All for Joomla All for Webmasters

Let's Play With Coding…

Load HTML content using jQuery

When playing your code with HTML language you sometime thought about loading content from different HTML file without reloading page. If not you thought about I thought about it several time at that time a way which I handle thing is using jQuery. It provide pre-build in function load to handle this. For an example if a page have different menu items like about us, services, contact us etc. then we can use this jQuery to load those HTML in body without refresh page.

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */

<div id="nav">
    <a href ="#" id="load_home"> HOME </a>
    <a href ="#" id="load_about"> About Us </a>
    <a href ="#" id="load_services"> Services </a>
    <a href ="#" id="load_contact"> Contact Us </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("home.html");
    });
    $("#load_about").on("click", function() {
        $("#content").load("about.html");
    });
    $("#load_services").on("click", function() {
        $("#content").load("services.html");
    });
    $("#load_contact").on("click", function() {
        $("#content").load("contact.html");
    });
});
</script>

In the above script when a particular link is clicked then it load respective content in content div.

Happy playing….

Related posts

Simple Site Maintenance HTML Page

When playing your code with HTML language you sometime thought about loading content from different HTML file without reloading page. If not you

International Calling Codes

When playing your code with HTML language you sometime thought about loading content from different HTML file without reloading page. If not you

Load Instagram feeds in webpage

When playing your code with HTML language you sometime thought about loading content from different HTML file without reloading page. If not you

Leave a Comment

Leave a Reply