Javascript Preloader for your forum and forum portal

Current Version: 1.0.6
Released: 09.01.10
Forum rules
Before creating a new support thread, please take a look in the board3 Portal FAQ and use the search!
Many questions have already been answered.
Locked

Topic author
dreambill
Active Member
Posts: 11
Joined: 9. June 2008 18:48

Javascript Preloader for your forum and forum portal

Post by dreambill »

this is a simple loader script for your forum or webpage, this let your visitors know that the webpage they are about to see is getting loaded.
dont forget to backup your files before editing it!

1 files to modify
-overall_header.html

im using the prosilver template, but this work with any forum style.

Step #1

first locate the overall_header.html in root/styles/prosilver/template
open it with notepad++
Insert the following javascript inside the <head></head> tag:

<script type="text/javascript" language="javascript">
function is_loaded() { //DOM
if (document.getElementById){
document.getElementById('preloader').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.preloader.visibility = 'hidden';
}
else { //IE4
document.all.preloader.style.visibility = 'hidden';
}
}
}
//-->
</script>



Step #2


Now replace the <body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

by: <body onload="is_loaded();" id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Step #3

insert this html code just under the <body onload="is_loaded();" id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">tag:

<div id="preloader" style="position:absolute; left:30%; top:290px; width:380px; height:120px;">
<center>
<table border="0" align="center" cellpadding="6" cellspacing="0" style="font-family:Arial, Verdana; border: 2px solid #006633;">
<tr>
<td style="text-align:center; background-color:#ffffff">
<font style="font-size:120px; font-weight:bold; color:#0099ff">!</font>
</td>
<td style="text-align:center; background-color:#0099ff">
<font style="font-size:28px; color:#ffffff; text-align:center;">Loading ... please wait</font>
</td>
</tr>
</table>
</center>
</div>



costumize it to your language by changing: "Loading ... please wait" for the language you want.


enjoy! :D


exemple: Click here
Locked

Return to “board3 Portal 1.0.x - English Support”