java slowing pageload down is there a css alternative 1

[benluke4]

Hi im currently using a java script which creates a scrolling marquee in the header fo the page. The script is only 4kb but it seems to slow the page load time down considerably. When i remove it the page loads a lot quicker

Is there a css alternative. Im not a great fan of marquees but need one in this case.

Maybe its just a poor script i am using????

heres the code for the java

/*
Cross browser Marquee script- © Dynamic Drive ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
For full source code, 100's more DHTML scripts, and Terms Of Use, visit [URL unfurl="true"]http://www.dynamicdrive.com[/URL]
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="620px"
//Specify the marquee's height
var marqueeheight="13px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//configure background color:
var marqueebgcolor="#EFEFEF"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><font face="Arial" font color="oooooo" font size="1px"><strong>Welcome to W&P Assessment and Training Centre - Professional Personalised Training throughout the Care Sector! <a href="../news.htm" style="text-decoration: none font-family: Arial, Helvetica, sans-serif; font-size: 11px;font-weight: normal; color: #007ba4;">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>         Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>     Latest New<a href="../news.htm">Click Here</a></FONT></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

I dont know why its slowing the page down so much but if there is a css alternative which works across the browsers i'd be extremely grateful

Thanks

Ben

 

[BillyRayPreachersSon]

What are your target browsers? If you do not require NN4 or IE4 support, you can remove all the junk to do with document.layers, and document.all, and use 1 simple set of modern "getElementById" code.

Hope this helps,
Dan

 

[benluke4]

I would like it to work in as many browsers as possible

Ben

 

[BillyRayPreachersSon]

The more browsers you want to support, the bigger your code will have to be.

Dan

 

[benluke4]

ok, so Ill edit like you recommend.

But i dont know which chunks to take out - I have kno knowledge of javascript.

Hate to ask but you couldn't remove the right sections for me?

 

[BillyRayPreachersSon]

The following works for me in IE6, NN7.1, and FF1:

var marqueewidth = '620px';			//Specify the marquee's width (in pixels)
var marqueeheight = '13px';			//Specify the marquee's height
var marqueespeed = 1;				//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueebgcolor = '#EFEFEF';		//configure background color:
var pauseit = 1;					//Pause marquee onMousever (0=no. 1=yes)?

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent = '<nobr><font face="Arial" font color="oooooo" font size="1px"><strong>Welcome to W&P Assessment and Training Centre - Professional Personalised Training throughout the Care Sector! <a href="../news.htm" style="text-decoration: none font-family: Arial, Helvetica, sans-serif; font-size: 11px;font-weight: normal; color: #007ba4;">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>         Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>        Latest News <a href="../news.htm">Click Here</a>    Latest News <a href="../news.htm">Click Here</a>     Latest New<a href="../news.htm">Click Here</a></FONT></nobr>';


////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed = marqueespeed;
var pausespeed = (pauseit==0) ? copyspeed : 0;
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">' + marqueecontent + '</span>');
var actualwidth = '';
var cross_marquee;

function populate() {
	cross_marquee = document.getElementById('marquee');
	cross_marquee.style.left = parseInt(marqueewidth, 10) + 8 + 'px';
	cross_marquee.innerHTML = marqueecontent;
	actualwidth = document.getElementById('temp').offsetWidth;
	lefttime = setInterval('scrollmarquee();', 20);
}
window.onload = populate;

function scrollmarquee() {
	if (parseInt(cross_marquee.style.left) > (actualwidth * (-1) + 8)) {
		cross_marquee.style.left = parseInt(cross_marquee.style.left, 10) - copyspeed + 'px';
	} else {
		cross_marquee.style.left = parseInt(marqueewidth, 10) + 8 + 'px';
	}
}

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
document.write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">');
document.write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">');
document.write('<div id="marquee" style="position:absolute;left:0px;top:0px"></div>');
document.write('</div></div>');
document.write('</td></table>');

As you can see, I've removed all traces of document.layers and document.all, and also fixed a few potential bugs into the bargain (parseInt did not have the second parameter).

Hope this helps,
Dan

 

[benluke4]

Cheers Dan thats cool,

really appreciate your help

Thanks

Ben