Prismatic Posted March 12, 2007 Share Posted March 12, 2007 I've got some javascript on a site i'm working on that only activates when the page is fully loaded, which means if a guest clicks a link that has to do with the said javascript before the page finishes loading the effect that the javascript produces is not produced (it's the LightBox JS script). For anyone who has ever used Plesk, when loading a page within it, by default, it displays a "Loading..." box while the page behind it is greyed out and loading, thus preventing the user from clicking anything while the page loads. Is there a simple or easy or free or ANY way to do this? I've tried looking at the source for Plesk but it's not helping much Thanks! Quote Link to comment Share on other sites More sharing options...
Prismatic Posted March 13, 2007 Author Share Posted March 13, 2007 Made my own, disregard Quote Link to comment Share on other sites More sharing options...
Prismatic Posted March 13, 2007 Author Share Posted March 13, 2007 My code for anyone who's want's something similar. Script_FadeDiv.js ie5 = (document.all && document.getElementById); ns6 = (!document.all && document.getElementById); opac = 80; /* Needed variables for fadeOut function */ var DivID; var Disable; var DivSave; var DisableSave; /* Will take a Div ID and fade it out */ function fadeOut(DivID, Disable) { DivSave = DivID; DisableSave = Disable; if(opac!= 0){ if(opac >= 10){ opac = opac - 10; } else{ --opac; } if(ie5) document.getElementById(DivID).filters.alpha.opacity = opac; if(ns6) document.getElementById(DivID).style.MozOpacity = opac/100; setTimeout('fadeOut(DivSave, DisableSave)', 50); } else if(opac == 0){ if(Disable == "Yes"){ document.getElementById(DivID).style.visibility = "hidden"; } } } Usage: Include the script on your page, <script type ="text/javascript" src="Script_FadeDiv.js"></script> Place following code in <head> section <script type ="text/javascript"> window.onload=function(){ fadeOut("NoClick", "Yes"); } </script> Place the loading "box" under <body> <div id="NoClick" style="position:absolute; width:100%; height:1429px; z-index:0; visibility: visible; background-color: #fff;filter:alpha(opacity=80);opacity: 0.8;-moz-opacity:0.8;"> <div align="center"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <table width="94" height="79" border="2" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td><div align="center"> <font color="#000000" size="2"><strong>Loading...<br> Please Wait.</strong></font></div></td> </tr> </table> <p> </p> <p> </p> </div> </div> Could have most likely been done better but this works fine for me Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.