ajax loading icon beside menu

makecg / 2010-04-22 04:33:42   

If anyone has ever been using Cargo collective.
I wanted to get a similar effect.

Basically it's a loading icon that appears beside the Menu when you click on a menu icon it will show a loading icon.

you can see it working on my site > Webpage <

Heres the script I used.

Place this in index.php above the header.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. //References
  4. var sections = $("#menu li");
  5. var loading = $("#loading");
  6. var content = $("#content");

//Manage click events
sections.click(function(){
//show the loading bar
showLoading();

});

//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});

-------------------------
Below the body

use this for the icon

  1. <div style="visibility: hidden; position: fixed; margin: 35px 0 0 10px"><img src="/images/loader.gif" /></div> 
makecg / 2010-04-22 04:35:50   

Let me try pasting the code again somethings wrong.

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     //References
  4. ¬†¬†¬†¬†var sections = $("#menu li");
  5. ¬†¬†¬†¬†var loading = $("#loading");
  6. ¬†¬†¬†¬†var content = $("#content");
  7.     
  8. ¬†¬†¬†¬†//Manage click events
  9.     sections.click(function(){
  10. ¬†¬†¬†¬†¬†¬†¬†¬†//show the loading bar
  11.         showLoading();

    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});

  1. <div id="loading" style="position: fixed; margin: 35px 0 0 10px"><img src="/images/loader.gif" /></div> 

This thread has been closed, thank you.