Page Loading Script for large content

[dmwhipp]

Hello,

I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points).

The content is shown in a div and called and loaded via Ajax.

Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.html
After you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments.

Here is the content page that appears in the div after you click "Go": http://www.gilchrist.leon.k12.fl.us/ar/1112-QuizListByTitle.html

If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded.

I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both...

Any help with this would be greatly appreciated.

Thank you,
Deborah

[jscheuer1]

I don't think you need anything so elaborate as a separate script.

First download this image:

3880
http://www.dynamicdrive.com/dynamicindex4/spinningred.gif

and put it in the same folder as the artest.html page. Then here on artest.html where you have:


<script type="text/javascript">
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj=document.getElementById? document.getElementById(selectobjID) : ""
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!="")
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea)
}
</script>

Change it to:


<script type="text/javascript">
/***Combo Menu Load Ajax snippet**/
function ajaxcombo(selectobjID, loadarea){
var selectobj=document.getElementById? document.getElementById(selectobjID) : "";
if (selectobj!="" && selectobj.options[selectobj.selectedIndex].value!=""){
document.getElementById(loadarea).innerHTML = '<img src="spinningred.gif" style="margin: 0 auto; display: block; width: 32px; height: 32px;" alt="Loading" title="">';
ajaxpage(selectobj.options[selectobj.selectedIndex].value, loadarea);
}
}
</script>

That's it!

[dmwhipp]

Simple, elegant and working perfectly! I've been testing different scripts and solutions for two days, and once again you solve my problem.

Many thanks,
Deborah