friendsterTalk - Friendster Forum

This is my first time to share some simple idea. I'm still a noob at this but lemme give it a try.

This is only tested in FF 2+

PREVIEW:
http://www.friendster.com/jeueljoseph

Paste the code below inside your onload handler

var loadpage = "<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><p align='justify'>LOADING PROFILE<span style='text-decoration:blink;'>...</span></p><br /><img src='URL OF LOADING PIC' alt='loading' /><br /><br /><p align='justify' id='loadtext'></p>";
addBox("LEFT","",loadpage,"loadpage",null);
var loadst = setTimeout("detachThis('loadpage')",3000);
var lfunc = new Array();
lfunc[0] = setTimeout("changeContent('LOADING TEXT 1')",1000);
lfunc[1] = setTimeout("changeContent('LOADING TEXT 2')",2000);
lfunc[2] = setTimeout("changeContent('LOADING TEXT 3')",3000);

Make sure to change the URL OF LOADING PIC. You can change the whole box code but don't leave this out:

<p align='justify' id='loadtext'></p>

Change this to your preferred loading text (view my profile for some example ideas):

lfunc[0] = setTimeout("changeContent('LOADING TEXT 1')",1000);

Change this part to your preferred time (in milliseconds) before the text changes:

lfunc[0] = setTimeout("changeContent('LOADING TEXT 1')",1000);
lfunc[1] = setTimeout("changeContent('LOADING TEXT 2')",2000);
lfunc[2] = setTimeout("changeContent('LOADING TEXT 3')",3000);

Never set it above this number:

var loadst = setTimeout("detachThis('loadpage')",3000);

Example in changing time interval:
If you want the text to change every half a second (500 milliseconds) -

lfunc[0] = setTimeout("changeContent('LOADING TEXT 1')",500);
lfunc[1] = setTimeout("changeContent('LOADING TEXT 2')",1000);
lfunc[2] = setTimeout("changeContent('LOADING TEXT 3')",1500);


Change this to how long (in milliseconds) you want your loader to appear before auto-remove:

var loadst = setTimeout("detachThis('loadpage')",3000);

The Example above is 3 seconds.

Paste this code at the very bottom of your js file:

function detachThis(name){
document.getElementById(name).style.display = "none";
}
function changeContent(content){
document.getElementById("loadtext").innerHTML = content+"<span style='text-decoration:blink;'> . . .</span>";
}

Paste this in your css extension:

#loadpage {
opacity: 0.7;
-moz-opacity: 0.7;
filter:alpha(opacity=70);
background: #COLOR CODE;
position: fixed;
width: 1024px;
height: 768px;
top: 0px;
left: 0px;
z-index: 20000;
}
#loadpage h2 {
display:none;
}

Lastly, if you want to add more load text just put this:

lfunc[4] = setTimeout("changeContent('LOADING TEXT 1')",9999);

The first bold should be changed to the last number+1.

The example above is 4 because the last number was 3:

lfunc[3] = setTimeout("changeContent('LOADING TEXT 1')",9999);

The next load text you add to the 4th should be:

lfunc[5] = setTimeout("changeContent('LOADING TEXT 1')",9999);

Make sure to change the other bold texts.

Last edited by briskicetea (2008-08-29 09:56:44)