...

View Full Version : Continuous JavaScript Scrolling Tweak?



Rick5150
12-29-2011, 12:57 PM
I am using the code below and was wondering if someone can help me. Right now, the code scrolls until the text is off the page before starting again. I have replaced the text with images and wanted them to scroll seamlessly to the first image starts again right after the last image. I expect it is simple, but I cannot figure it out. Thanks in advance...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">

#wrapper {

background-color: #C96;
padding: 50px;
height: 300px;
width: 300px;
}

#marqueecontainer{
position: relative;
width: 300px; /*marquee width */
height: 300px; /*marquee height */
background-color: white;

overflow: hidden;

}


}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"

return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>






<body>
<div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

</div><!--wrapper end div-->
</body>
</html>

vwphillips
12-29-2011, 02:19 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">

#wrapper {

background-color: #C96;
padding: 50px;
height: 300px;
width: 300px;
}

#marqueecontainer{
position: relative;
width: 300px; /*marquee width */
height: 300px; /*marquee height */
background-color: white;

overflow: hidden;

}


}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>-actualheight) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=0+"px"
}

function initializemarquee(){
var obj=document.getElementById("marqueecontainer"),h,d,ary=[],z0=0;
marqueeheight=obj.offsetHeight
cross_marquee=obj.getElementsByTagName('DIV')[0];
actualheight=h=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
while (h<marqueeheight+actualheight){
ary.push(cross_marquee.cloneNode(true));
h+=actualheight;
}
for (;z0<ary.length;z0++){
cross_marquee.appendChild(ary[z0]);
}
cross_marquee.style.top=0
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"

return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>






<body>
<div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div style="position:relative;left:0px; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

</div><!--wrapper end div-->
</body>
</html>

Rick5150
12-29-2011, 05:12 PM
Beautiful, thank you! I put your javascript in a separate file and then modified all the HTML and CSS to fit my needs and it looks great. Thank you again.

Rick5150
12-30-2011, 05:31 PM
Another quick question... is this the code I need to edit to make the scroller move from top to bottom instead of bottom to top?


cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top=0+"px"
}

Then of course, the follow-up question is how would I do it?

vwphillips
12-30-2011, 06:13 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">

#wrapper {

background-color: #C96;
padding: 50px;
height: 300px;
width: 300px;
}

#marqueecontainer{
position: relative;
width: 300px; /*marquee width */
height: 300px; /*marquee height */
background-color: white;

overflow: hidden;

}


}
</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=-1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
var top=parseInt(cross_marquee.style.top);
if ((copyspeed>0&&top>-actualheight)||(copyspeed<0&&top<0)){ //if scroller hasn't reached the end of its height
cross_marquee.style.top=top-copyspeed+"px" //move scroller upwards
}
else if (copyspeed!=0){//else, reset to original position
cross_marquee.style.top=top+actualheight*(copyspeed<0?-1:1)+"px"
}
}

function initializemarquee(){
var obj=document.getElementById("marqueecontainer"),h,d,ary=[],z0=0;
marqueeheight=obj.offsetHeight
cross_marquee=obj.getElementsByTagName('DIV')[0];
actualheight=h=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
while (h<marqueeheight+actualheight){
ary.push(cross_marquee.cloneNode(true));
h+=actualheight;
}
for (;z0<ary.length;z0++){
cross_marquee.appendChild(ary[z0]);
}
cross_marquee.style.top=0
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"

return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>






<body>
<div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div style="position:relative;left:0px; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

</div><!--wrapper end div-->
</body>
</html>

Rick5150
12-30-2011, 07:00 PM
That is great, but unfortunately, it interferes with other javascript I have on the page. Too bad, as I it looked better when scrolling downward.

If you look here you can see what I mean. I will leave the page alone until you see what I mean. ;)

http://www.ricktheriault.net/new/test.html

Basically, the scrolling of the top images is right to left and the advertisements on the left are bottom to top. I wanted the top images to remain right to left, and the advertisements to go from top to bottom.

When I use your code to make the advertisements go from top to bottom, the top images scroll from left to right and do not flow continuously as they do in the other direction. In fact, they scroll right off the right edge and are never seen from again.

I will leave it the way it is, I guess and appreciate the help though. You sure know your stuff and your responses are really quick. Thank you for that.

vwphillips
12-31-2011, 09:40 AM
both scripts use global variable copyspeed

change 1 to copyspeed2


var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=-1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed2=marqueespeed
var pausespeed=(pauseit==0)? copyspeed2: 0
var actualheight=''

function scrollmarquee(){
var top=parseInt(cross_marquee.style.top);
if ((copyspeed2>0&&top>-actualheight)||(copyspeed2<0&&top<0)){ //if scroller hasn't reached the end of its height
cross_marquee.style.top=top-copyspeed2+"px" //move scroller upwards
}
else if (copyspeed2!=0){//else, reset to original position
cross_marquee.style.top=top+actualheight*(copyspeed2<0?-1:1)+"px"
}
}

function initializemarquee(){
var obj=document.getElementById("adcontainer"),h,d,ary=[],z0=0;
marqueeheight=obj.offsetHeight
cross_marquee=obj.getElementsByTagName('DIV')[0];
actualheight=h=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
while (h<marqueeheight+actualheight){
ary.push(cross_marquee.cloneNode(true));
h+=actualheight;
}
for (;z0<ary.length;z0++){
cross_marquee.appendChild(ary[z0]);
}
cross_marquee.style.top=0
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"

return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


and


<div id="adcontainer" onMouseover="copyspeed2=pausespeed" onMouseout="copyspeed2=marqueespeed">


or


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">

#m1{
position: relative;
width: 300px; /*marquee width */
height: 300px; /*marquee height */
background-color: white;
border:solid red 1px;
overflow: hidden;

}

#m2{
position: relative;
width: 600px; /*marquee width */
height: 150px; /*marquee height */
background-color: white;
border:solid red 1px;
overflow: hidden;

}

#m2 IMG{
float:left;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)

////NO NEED TO EDIT BELOW THIS LINE////////////


function scrollmarquee(){
var data=marquee.data,top,spd,z0=0;
for (;z0<data.length;z0++){
top=parseInt(data[z0][1].style[data[z0][3]]);
spd=marquee[data[z0][0]];
if ((spd>0&&top>-data[z0][2])||(spd<0&&top<0)){ //if scroller hasn't reached the end of its height
data[z0][1].style[data[z0][3]]=top-spd+"px" //move scroller upwards
}
else if (spd!=0){//else, reset to original position
data[z0][1].style[data[z0][3]]=top+data[z0][2]*(spd<0?-1:1)+"px"
}
}
}

function marquee(id,mde,spd){
if (!marquee.data){
marquee.data=[];
}
var obj=document.getElementById(id),cm=obj.getElementsByTagName('DIV')[0],mh=mde=='left'?obj.offsetWidth:obj.offsetHeight,ah=mde=='left'?cm.offsetWidth:cm.offsetHeight,h=ah, c,ary=[],z0=0;
while (h<mh+ah){
c=cm.cloneNode(true);
c.style[mde]=h+'px';
ary.push(c);
h+=ah;
}
for (;z0<ary.length;z0++){
cm.appendChild(ary[z0]);
}
cm.style[mde]=0+'px';
marquee[id]=spd;
marquee.data.push([id,cm,ah,mde]);
clearTimeout(marquee.to);
marquee.to=setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll);
}
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
marquee('m1','top',-1);
marquee('m2','left',1);
}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</script>






<body>

<div id="m1" onmouseover="marquee['m1']=0;" onmouseout="marquee['m1']=-1;">
<div style="position:absolute;left:0px; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

<div id="m2" onmouseover="marquee['m2']=0;" onmouseout="marquee['m2']=1;">
<div style="position:absolute;top:0px; width:400px;">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum