LinkBack URL
About LinkBacks
Handy Loading script
Handy Javascript Code:
Here we will start with the header
And now we start with the style of the page, call this loading.cssCode:<style type="text/css"> <!-- .subtitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-transform: uppercase; color: #00A5E9; text-decoration: none; } .subsectiontitle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: italic; font-weight: bold; text-transform: uppercase; color: #00A5E9; text-decoration: none; } .content { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #333333; text-decoration: none; } .anchor { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; font-variant: normal; color: #4778BD; text-decoration: none; } .style1 {font-size: 12px; font-style: normal; color: #333333; text-decoration: none; font-family: Arial, Helvetica, sans-serif;} --> </style>
Now the Javascript code call this loading.jsCode:html, body { margin:0px; padding:0px; overflow:auto; height:100%; } #loading-mask{ top:0px;left:0px; width:100%; height:100%; background:#c3daf9; position:absolute; z-index:20000; } #loading{ position:absolute; left:45%; top:40%; border:1px solid #6593cf; padding:2px; background:#c3daf9; width:150px; text-align:center; z-index:20001; } #loading .loading-indicator{ border:1px solid #a3bad9; background:white url(load-bg.gif) repeat-x; color:#003366; font:bold 13px tahoma,arial,helvetica; padding:10px; margin:0; text-align:left; }
Now to do the rest of the codeCode:var LoaderInstance=function(){var rtnObj={},timer=100;function _addEvent(obj,evt,fnt,args){if(obj.addEventListener){obj.addEventListener(evt,function(){fnt.call(this,args);},false);}else if(window.attachEvent){obj.attachEvent('on'+evt,function(){fnt.call(this,args);});}else{obj['on'+evt]=function(){fnt.call(this,args);};}};function _closeLoader(elemName){var elem,elemArr=[],op=100,opF=1,stl,ua=navigator.userAgent.toLowerCase(),isIE=(ua.indexOf('opera')==-1&&ua.indexOf('msie')>-1);function _setStyle(elem,stl,key,val){for(var i=0;i<key.length;i++){if(isIE){stl[key[i]]=val[i];}else{stl=(stl)?stl+key[i]+':'+val[i]+';':key[i]+':'+val[i]+';';}}return stl;};function _transform(){var stl,elemBody;for(var i=0;i<elemArr.length;i++){stl=_setStyle(elemArr[i].elemObj,elemArr[i].elemStl,['filter','opacity','-moz-opacity'],['alpha(opacity='+op+')',opF,opF]);elemArr[i].elemObj.setAttribute('style',stl,true);}if(op>0){op-=10;opF='.'+(op/10)%100;setTimeout(function(){_transform();},timer);}else{for(var i=0;i<elemArr.length;i++){elemArr[i].elemObj.parentNode.removeChild(elemArr[i].elemObj);}}};for(var i=0;i<elemName.length;i++){elem=document.getElementById(elemName[i]);if(elem){stl=elem.getAttribute('style',true);elemArr=elemArr.concat({elemObj:elem,elemStl:stl});}}if(elemArr.length>0){_transform();}};rtnObj.closeLoader=_closeLoader;_addEvent(window,'load',function(){rtnObj.closeLoader(['loading-mask','loading']);});return rtnObj;}();
and last of all the loading image.Code:<link rel="stylesheet" type="text/css" href="loading.css" /> </head> <body> <div id="loading-mask"> </div> <div id="loading"> <div class="loading-indicator"><img src="loading.gif" style="width:16px;height:16px;" align="absmiddle" alt="" /> <Loading Message here.> </div> </div> <script type="text/javascript" src="loading.js"></script> </head><body><?php include(yourfile.php); // please note iframes will screw up on this.<br /> <br /> <br /> ?> <br /> <br /> Text here if you dont want to use php include. </body>
Included is the script. for more handy codes visit HERE.
Reply With Quote
