Javascript scroller

[devonair]

I need to add a news scroller to a site I am putting together, however I want the contents of what is being scrolled to be grabbed from an external file. I'm quite new to javascript so would welcome any help, alternatively I would be grateful if someone would point in the the direction of a better script.

I am using the script below which scrolls any html defined at var content but how can I make var content display the content from another file such as news.txt?

Thanks in advance.

<script language="javascript">

//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com) for script

//ENTER CONTENT TO SCROLL BELOW.
var content='Enter text here to be scrolled<br><p>';
var boxheight=100; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=350; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
var speed=150; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var outer,inner,elementheight,ref,refX,refY;
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var txt='';
if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer name="inner" width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt);

function getElHeight(el){
if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
else if(ie4¦¦ie5)return (el.style.height)? el.style.height : el.clientHeight;
else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
if(ns4)return el.pageX;
if(ie4¦¦w3c){
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}}

function getPageTop(el){
var y;
if(ns4)return el.pageY;
if(ie4¦¦w3c){
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}}

function scrollbox(){
if(ns4){
inner.top+=(godown)? pixelstep: -pixelstep;
if(godown){
if(inner.top>boxheight)inner.top=-elementheight;
}else{
if(inner.top<2-elementheight)inner.top=boxheight+2;
}}else{
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)', 400);
else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}}

window.onload=function(){
outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
elementheight=getElHeight(inner);
if(ns4){
outer.moveTo(getPageLeft(ref),getPageTop(ref));
outer.clip.width=boxwidth;
outer.clip.height=boxheight;
inner.top=(godown)? -elementheight : boxheight-2;
inner.clip.width=boxwidth-4;
inner.clip.height=elementheight;
outer.visibility="show";
inner.visibility="show";
}else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
}
setInterval('scrollbox()',speed);
}
</script>

[papabaer]

Hello devonair,
Welcome to Webmaster World!

Im sure someone will come along and offer some suggestions, perhaps even an alternative script to use. I am not at all discouraging you from implementing a news scroller into your design, but I do want to point out a few concerns.

First, 11-12% of surfers browse the Internet with javascript disabled browsers. It is an option many choose, these surfers will not see your news items. Secondly, almost anything that scrolls across a screen either vertically or horizontally is pretty much ignored by the majority of surfers; overuse and abuse have blinded us to moving text much like we ignore ad banners.

Finally, you really need to consider this: Is the excessive code (kb) worth the return in potential user satisfaction? Will this really be an asset to your site, or something that will be more or less ignored? Certainly you will lose the potential benefits that can come from spidering and consequent indexing. Search engines do NOT like javascript to begin with and since you intend to pull your news from a text file, why not take advantage of the traffic building opportunity and make your news section static?

Achiving the pages will make your news articles both searchable externally (Google, Fast, etc.) and internally, where the added content can be searched with an internal (in-site) search engine. When you weigh the benefits, most would agree the scale tips undeniably to one side.

Look at the popularity of "Blogs" - they can very well serve as a "news presentation" scheme. Blogs have also become a hot topic in SEO circles because the content is static... and therefore searchable. On one hand (static content) there are very obvious benefits, while on the other (text scrollers), the benefit are questionable at best. Certainly so from a usability perspective.

Your intended use may fit your design perfectly and the benefits may outweigh the negative factors (though you really need to consider the pros and cons), in any event, you are correct in seeking a more elegant script and if after cross-browser testing you find the solution that's right for you, do move the script to an external file to help keep your page code clutter free. you want your pages as search engine freindly as possible! :)

[rewboss]

I wouldn't recommend using a scroller at all, but it is easily possible to do what you ask.

Simply place the JavaScript code in a plain text file and save it with a .js extension -- it should be plain JavaScript only. Then, on every page you want the scroller to appear, simply put in the <script> tag with an src attribute (as you would for an <img> tag):

<script language="javascript" src="scroller.js"></script>

[kapow]

Hi Devonair
I totally agree with the others on this. Only use 'bells and whistles' when it is necessary. I manage about 20 websites. A few of them are not for search engines, they are for a specific group of people On those sites I'm relatively free to use fancy stuff - when it suites the audience. On one of those sites I have a scrolling news thingy. I havn't looked at it for a while but here is the code if it helps.

<script language="JavaScript1.2">

/*
Cross browser marquee script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

//Specify the marquee's width (in pixels)
var marqueewidth=800
//Specify the marquee's height (in pixels, pertains only to NS)
var marqueeheight=20
//Specify the marquee's scroll speed (larger is faster)
var speed=9
//Specify the marquee contents
var marqueecontents='<font size="1" face="Arial, Helvetica, sans-serif" color="#FFFF00"><b>PUT YOUR TEXT CONTENT HERE</b></font>'

if (document.all)
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2
</script>

<ilayer width=&{marqueewidth}; height=&{marqueeheight}; name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>