guwop69 guwop69 - 8 months ago 19
Javascript Question

Website changing content using bootstrap and jquery

I have found this example where there is one

page where it contains its design for the navigational bar using bootstrap. The other page is just a
page where it just contains the content and a jquery script.
Example of the content page:

<body><h1>hello world!</h1></body>
<--jquery script calling another function from a .js file-->

When I access
and for example I will click the messages tab in the navigation bar It will display the
inside the

My question is how can that be done. Its efficient that we don't have to copy and paste the design again. Was that a function of jquery? Are there any online tuturials for that? I can't find the solution.


Refer the following links,you may get an idea,

<!DOCTYPE html>
<script src=""></script>
        $("p").text("Hello world!");

<button>Set text content for all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


For link,I have added the code for dynamically changing content while loading gif according to the link processed.Till the link is processed,it will show the loading image with its respective content. Below overlay function is used for loading gif image.

var overlay = {

    click_on_overlay_hide : true,

    show_loading_image : true,

    loading_image : "images/loading.gif",

    $ : function(id) {
        return document.getElementById(id);

    init : function() {
        var ol_div = document.createElement("div"); = "overlay"; = "none";
        ol_div.onclick = (this.click_on_overlay_hide) ? overlay.hide : null;

        if (this.show_loading_image) {
            var l_img = document.createElement("img");

            l_img.src = this.loading_image;
   = "absolute";
   = (((window.innerHeight) ? window.innerHeight
                    : document.body.clientHeight) / 2)
                    + "px";
   = (((window.innerWidth) ? window.innerWidth
                    : document.body.clientWidth) / 2)
                    + "px";



    show : function() {
        if (this.$("overlay")) {
            this.$("overlay").style.display = "";

    hide : function() {
        if (overlay.$("overlay")) {
            overlay.$("overlay").style.display = "none";

        function First() {
                document.getElementById("di").innerHTML = "";
                document.getElementById("di").innerHTML = "<center><h6>I am First</h6></center>";
        function Second() {
                document.getElementById("di").innerHTML = "";
                document.getElementById("di").innerHTML = "<center><h6>I am Second</h6></center>";

 <body onload=overlay.init();">      
               <div style="display: none;" id="overlay">
                            <img class="centerImg" src="images/loading.gif">

    //Below tag content will change according to the link processed
                            <div id="di">Processing the url...</div>


      //First link  
      //It will call the First() and changes the content of id="di" into  "I am First" ,displayed along with the gif image,till the href link is processed.
   <a href="services/dealjson/first" onclick="First();; setTimeout('overlay.hide()', 20000)">FIRST</a>

      //Second link      
   <a href="services/dealjson/second" onclick="Second();; setTimeout('overlay.hide()', 13000)">SECOND</a>