Dynamic page load and replacing content

Hi ,

Today, I would like to teach you a very simple method to load multiple pages into a single page, without showing page URL’s in the address bar.

I am using Jquery, ajax to achieve the following.

First, let us create a page html/php (say index.php) and let us create two DOM objects. One is the button and another division, where the external pages are loaded dynamically.

Page loader jquery example

<input type="button" value="load"/> - creates the button.
<div id="page_loader"></div> - create div to load page into it.

Now , let us write a function in Jquery to load pages on the fly.

function loadpage(page){
  $.ajax({
    url:page,
    beforeSend:function(){
      $('#page_loader').html("Please wait...");
    },
    success:function(data){
      $('#page_loader').html(""); // to empty previous page contents.
      $('#page_loader').html(data);
    }
  });
}

Now , from the button click, pass the page that you would like to load.
For e.g , if you want to load a contact page contact.php. simply call the function like this…

<input type="button" value="load" onclick="loadpage('contact.php')"/>

On click of the button , the contact.php page will be loaded into the “page_loader” division in the index.php page. Like this we can load ‘n’ number of pages in a single page.

Please subscribe for more cool codes 🙂

That’s it guys feedback’s are welcome! 🙂

Google like menu in jquery

I just love google’s new look, especially the menus in Beta version. have you noticed the border that appears for each link which you have selected?. Well lets learn how to create one such fantastic vertical menu button using jquery and css.

Include jquery library

create a HTML page and few link texts

<div id="menu">
  <div class="normal"> Everything </div>
  <div class="normal"> Images </div>
  <div class="normal"> Maps </div>
</div>

Write a little css fo the same

.normal{ 
  width:100px; height:30px; 
  margin:5px; padding:5px 5px 5px 15px; 
  background: #FFFFF; 
  text-align:left; 
  border:#fff solid 5px; 
  cursor:pointer;   
}

.clicked{ 
  width:100px; height:30px; 
  margin:5px; padding:5px 5px 5px 15px; 
  background: #FFFFF; color:#FF0000;
  text-align:left; 
  border-left:#00cc00 solid 5px; 
  cursor:pointer; 
}

vertical menu using jquery

$(document).ready(function () {
      
      $("#menu > div").each(function() {
            
            $("#menu > div").click(function() {
                  
                  $("#menu > div").removeClass("clicked");
                  $(this).addClass("clicked").animate({ borderLeftWidth: "5px" }, 1500 );            
                  
                });
            
          });
});

 

Thats it guys!!

Please subscribe if found useful  and click on other links to see more cool codes  🙂

DEMO LOOK:

Google beta Menu

 

jQuery to export html table data into excel sheet

Simple script to export html table or PHP data to excel sheet using jQuery, without having to write separate script again in php.

The basic idea is to take the html data as a screen shot and render it into excel output using jQuery.

Learn complete tips and tricks of Excel and stay ahead in competition. Buy now! 

Excel 2019 All-In-One

Here is how it is done.

Wrap a div with an ID around the data that needs to be exported. Attach the form at the end of the data with an hidden text element

<div id="excelExportDivision">
  <table cellpadding="5" cellspacing="5" border="1">
    <tr>
      <th>Blog</th>
    </tr>
    <tr>
      <td>https://www.infoandapps.com/blog/</td>
    </tr>
  </table>
</div>

<form style="display:hidden" name="hiddenForm" id="hiddenForm" method="post" action="export_file.php">
  <input type="hidden" id="hiddenExportText" name="hiddenExportText">
</form>

<input type="button" value="Submit" onclick = "excel_export();">

Next we will see a simple jQuery script , on click of which we trigger a page call, where headers for excel export is coded.

function excel_export(){
  
  var content = document.getElementById('excelExportDivision').innerHTML;
  
  $('#hiddenExportText').val(content);
  
  document.getElementById("hiddenForm").submit();	
}

You can call the function like so ,  <input type=”button” onclick=”excel_export();” value=”submit”/>

….. and finally the export_file.php page.

<?php
  header('Content-type: application/vnd.ms-excel');
  
  header("Content-Disposition: attachment; filename=BOBreport.xls");
  
  header("Pragma: no-cache");
  
  header("Expires: 0"); 
  
  echo $_REQUEST['hiddenExportText'];  
?>

NOTE: I HAVE MADE SOME CHANGES AS SOME OF MY FRIENDS HAVE COMMENTED THAT IT IS NOT WORKING. IT”S FIXED AND WORKING… 🙂

This is as simple as i can suggest you to export the php data into excel sheet.

It is amazingly fast and reliable.

Subscribe for more cool codes and see the other links below for more cool stuff!!

Custom news ticker script using jQuery

Hi everyone!

Here is a piece of cake , a custom news ticker script using jquery.

First create a division and write all the tickers inside the “<li>” tags.

jquery ticker example

<div>
  <ul id="news">
    <li>First news ticker text</li>
    <li>Second news ticker text </li>
  </ul>
</div>

Next add some css to hide the <li> texts and style up your news box column as you like.

#news{
  height: 50px;
  overflow: hidden !important;
  border-bottom:#F00 1px dashed; margin:opx auto;
}

#news li {
  height: 50px;
}
Now a very simple jQuery script to bring your news ticker to life
//function to find the texts other then the first text

function newstick(){
  $('#news li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#news')).css('opacity', 1); });
}

// This will automatically call the next tickers for a time interval of 4 sec
setInterval(function(){ newstick() }, 4000);

Thats it! told you was a piece of cake!

Tested with latest browsers only. Let me know your thoughts through comments!
subscribe for more cool codes and see the other links below!.
Have a great day! 🙂

Using multiple accordion in jquery with single function

I was working on an application recently and i had to use accordion in multiple places and pages. Of-course this was a extra space and time. So, i came up with an idea to make my own accordion in
jQuery which can be called any time with help a single function.This could not be a complete solution, but certainly has re usability.
Today I will be sharing this knowledge with you all and hope it would be helpful.

First create a function pass two variables to the function. first parameter is link field with which we click to toggle , second parameter is the division which opens and closes data. rest is a simple logic as you can see.Note that parameter are nothing but your div ID’s.

var Toggled=false; 
$(document).ready(function() {
  function custom_accordion(linker,changer)
  {
    $('#'+linker).click(function(){
      if(Toggled==false)
      {
        $('#'+linker).html("Hide");
        $("#"+changer).fadeIn(100); 
        Toggled=true;
      }
      else
      {
        $('#'+linker).html("Change");
        $("#"+changer).fadeOut(100);    
        Toggled=false;
      }
      return false;
    });
  }
});

call this for each page and forget manual coding to check if you need to place accordion or not..

That’s it guys , feedback’s are welcome!!.

below are some other useful links, click and explore!!! 🙂