Help - Search - Members - Calendar
Full Version: what do i change so i can have 2 of these running
Weborum Webmaster Forum > Web Page Design > Javascript
leo
hey guys smile.gif

i want to use a simple scroller script but i want to use it twice in one page, i can't figure out all i need to change to make the second one work, i tried changing layer names etc but i'm obviously not getting it quite right:

CODE

<script language="JavaScript1.2">

/*
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="200px"
//Specify the marquee's height
var marqueeheight="150px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<img src="images/scrollingtest.gif" border="0"><br><br><br><br><img src="images/scrollingtest.gif" border="0">'


////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
var actualheight=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>
Willy Duitt
That script would need to be completely re-written to be used more than once on a page... Have your tried just using a simple <marquee> tag? Although deprecated, it does serve itself well in these situations... Besides, all the newer browsers still support it...

CODE

<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="2" scrolldelay="0" style="Filter:Alpha(Opacity=100, FinishOpacity=5, Style=1, StartX=0, StartY=45, FinishX=0, FinishY=0);font-weight:bold;overflow:hidden;width:300px;height:200px">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</marquee>


.....Willy
leo
nope, didn't know you could have a vertically scrolling marque, that does the job perfectly thanykou Wily smile.gif
Willy Duitt
FWIW: If it is important to you to have your pages validate... The <marquee> tag will prevent your pages from validating UNLESS you place the marquee into an external javascript file and append it to the page...

The below will allow you to place the function into the HEAD or into an external file if you are validating XHTML Strict and allow you to place the marquee contents into an external text file to facilitate quickly editting the contents by editting the text file...

Unfortuenetly... I haven't yet got it to work with more than one marquee... I'm not sure what I am doing wrong there but I'll have another go at it some other time... Until then, this should work for those wishing to use only one marquee...

CODE

<script type="text/javascript">
<!--//
 function marquee(id,src){
  var insertHere = document.getElementById(id);
  var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src  = src;
      document.getElementsByTagName('head')[0].appendChild(script);

  var marquee = document.createElement('marquee');
      marquee.direction = 'left';
      marquee.scrollamount = 5;
      marquee.scrolldelay = 0;
      marquee.style.fontWeight = 'bold';
      marquee.style.fontFamily = 'cursive';
      marquee.onmouseover = function(){ this.stop() };
      marquee.onmouseout = function(){ this.start() };
      document.writeln = function(src){ marquee.innerHTML = src };
      insertHere.parentNode.insertBefore(marquee,insertHere.nextSibling);
 }
//-->
</script>
</head>

<body>
<div>
<script type="text/javascript" id="marquee1">
marquee('marquee1','http://www.gospelcom.net/ibs/dm/syndicate/scripture.txt')
</script>


Additionally, the script should be easily modified to include more style as well as passing the marquee attributes as parameters thru the function call...

.....Willy
leo
hehe, haven't validated a page in years smile.gif
Willy Duitt
QUOTE(leo @ Mar 16 2005, 02:10 PM)
hehe,  haven't validated a page in years smile.gif
[right][snapback]24759[/snapback][/right]


I guess we're even then...

I never wrote something I did not understand before...
But I'll be danged if I can understand how this line works...

document.writeln = function(src){ marquee.innerHTML = src };

All I know is, this is the only way I could get the contents of the external text file which was appended to the document as an external javascript file to write to the page...

And it is this line which is preventing me from using this script more than once on the page... I'm thinking I need to prototype the document.writeln method but I just can't get my head around why or how it works in the first place...

.....Willy

Willy Duitt
QUOTE(Willy Duitt @ Mar 16 2005, 03:06 PM)
QUOTE(leo @ Mar 16 2005, 02:10 PM)
hehe,   haven't validated a page in years smile.gif
[right][snapback]24759[/snapback][/right]


I guess we're even then...

I never wrote something I did not understand before...
But I'll be danged if I can understand how this line works...

document.writeln = function(src){ marquee.innerHTML = src };

All I know is, this is the only way I could get the contents of the external text file which was appended to the document as an external javascript file to write to the page...

And it is this line which is preventing me from using this script more than once on the page... I'm thinking I need to prototype the document.writeln method but I just can't get my head around why or how it works in the first place...

.....Willy
[right][snapback]24764[/snapback][/right]


Hmmmm...

Needless to say... My pussy don't hurt...
If ya'll want to know why ur pussy hurts...

(but heh.... I now now know)...

UR... a bunch of pussy's
.....Willy party.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.