Ajax loading script problem

I have found this code , but is only working if i enable the FM toolbar . But i want this to work when the toolbar is disabled , what is wrong?

 Javascript code:

Code:

jQuery(function() {
              jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i58.servimg.com/u/f58/17/89/00/23/ajax_l10.gif" alt="Loading..."></div>');
              jQuery('a').click(function() {
                  jQuery('#ajax_loading').slideDown();
                  setTimeout('load()', 1000);
              });
            });
            function load() {
              jQuery('#ajax_loading').slideUp('1000');
            }
            setTimeout('load()', 1000);

The CSS code i don't think is so important , i belive the problem is in the JS code.

Hello PixX,

I tested the script and it is working fine, with and without the toolbar. What is the CSS you're using ?

Hmm , maybe the problem is my header. He "follow" me when i scroll down.. Anyway , the CSS code:
 

Code:

#ajax_loading {
            background: url("http://i58.servimg.com/u/f58/16/18/26/07/ajaxlo10.png") repeat-x scroll 0px 0px transparent;
            border: 1px solid rgb(56, 77, 37);
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.2) inset;
            color: rgb(255, 255, 255);
            left: 46%;
            padding: 5px 0px 8px;
            position: fixed;
            text-align: center;
            top: 0px;
            width: 8%;
            z-index: 999;
        }

Yep, still displaying fine

Try setting the z-index on the element in the script since you cannot exceed 999 z-index in the stylesheet.

( I already set it for you )

Code:

jQuery(function() {
                  jQuery('body').prepend('<div id="ajax_loading" style="z-index:99999;"><img src="http://i58.servimg.com/u/f58/17/89/00/23/ajax_l10.gif" alt="Loading..."></div>');
                  jQuery('a').click(function() {
                      jQuery('#ajax_loading').slideDown();
                      setTimeout('load()', 1000);
                  });
                });
                function load() {
                  jQuery('#ajax_loading').slideUp('1000');
                }
                setTimeout('load()', 1000);

Nothing changed to me  

Could you post your forum that has this active ?

Thanks

Alright , it is under construction   
http://vontech.board.st/

Add this to your CSS :

Code:

#topbar { z-index:950 !important; }

Your header z-index is higher than your loading bar.

Thank you very much Ange.You can lock this topic now.

 Thank you again!  

You're very welcome

Topic solved and archived