...

View Full Version : Need help with Cross Browser Marquee II code



pixelkitten
11-02-2012, 10:11 AM
Hello, I'm new here so I hope I'm posting this in the correct place. :o

I am needing help with a code I found here: http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

I've already found a thread here on how to remove the space in between, so now I'm just wondering how/if I can get it to move up and down? The same as what the behavior="alternate" code would do, except I have no idea how to do that in javascript. Here's the code so far:


<link rel="stylesheet"type="text/css"href="http://rosybub.webs.com/coding.css">

<html>
<body oncontextmenu="return false;"></body>
</html>

<script language=JavaScript><!--
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// --> </script>

<H6>Gallery</H6>
<H4>Art I own.<3</H4>

<style type="text/css">

#marqueecontainer{
position: relative;
width: 338px;
height: 395px;
background-color: transparent;
overflow: hidden;
border: 0px solid orange;
padding: 2px;
padding-left: 4px;
}

</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=0 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //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))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
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
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"
cross_marquee.style.overflow="scroll"
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>

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

<!--YOUR SCROLL CONTENT HERE-->

<center>Hello, hello, hello.</center>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

Thanks in advance for any help.

vwphillips
11-02-2012, 02:22 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" xml:lang="en" lang="en">

<head>
<title></title>
<link rel="stylesheet"type="text/css"href="http://rosybub.webs.com/coding.css">
</head>

<body>
<script language=JavaScript><!--
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS; }
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// --> </script>

<H6>Gallery</H6>
<H4>Art I own.<3</H4>

<style type="text/css">

#marqueecontainer{
position: relative;
width: 338px;
height: 395px;
background-color: transparent;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
}

</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=0 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //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(spd){
clearTimeout(scrollmarquee.to);
var spd=typeof(spd)=='number'?spd:marqueespeed,top=parseInt(cross_marquee.style.top)-spd;
if ((spd>0&&top<-actualheight)||(spd<0&&top>marqueeheight)){
top=spd>0?marqueeheight:-actualheight;
}
cross_marquee.style.top=top+"px";
scrollmarquee.to=setTimeout(function(){ scrollmarquee(spd); },30);
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
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"
cross_marquee.style.overflow="scroll"
return
}
setTimeout(function(){ scrollmarquee(); }, 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>
<input type="button" name="" value="Up" onmouseup="scrollmarquee(1);"/>
<input type="button" name="" value="Down" onmouseup="scrollmarquee(-1);"/>
<div id="marqueecontainer" onMouseover="scrollmarquee(0);" onMouseout="scrollmarquee(-1);">
<div id="vmarquee" style="position: absolute; width: 98%;top:401px;">

<!--YOUR SCROLL CONTENT HERE-->

<center>Hello, hello, hello.</center>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>


</body>

</html>

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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.marquee{
position: relative;
width: 338px;
height: 205px;
background-color: transparent;
overflow: hidden;
border: 1px solid orange;
padding: 0px;
padding-left: 10px;
text-Align:left;
}

</style>

<script type="text/javascript">

function scrollmarquee(id,spd,c){
var o=scrollmarquee['zxc'+id],m=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
if (m&&!o){
var s=m.getElementsByTagName('DIV')[0],nu,z0=1;
s.style.position='absolute';
s.style.top=s.offsetTop+'px';
o=scrollmarquee['zxc'+id]={
s:s,
sh:s.offsetHeight,
max:m.offsetHeight,
c:c===true
};
if (o.c){
c=s.cloneNode(true);
for (;z0<Math.ceil(o.max/o.sh)+1;z0++){
c=c.cloneNode(true);
c.style.left='0px';
c.style.top=z0*o.sh+'px';
o.s.appendChild(c);
if (z0>40){
return;
}
}
s.style.top='0px';
o.max=0
}
}
if (m&&o){
clearTimeout(o.to);
var spd=typeof(spd)=='number'?spd:0,top=parseInt(o.s.style.top)-spd;
if ((spd>0&&top<-o.sh)||(spd<0&&top>o.max)){
top=o.c?spd>0?0:-o.sh:spd<0?-o.sh:o.max;
}
o.s.style.top=top+'px';
o.to=setTimeout(function(){ scrollmarquee(id,spd); },30);
}
}

</script>
</head>

<body>
<input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee1',1);"/>
<input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee1',-1);"/>

<div id="marquee1" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
<div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
<!--YOUR SCROLL CONTENT HERE-->
Hello, hello, hello.
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee2',1);"/>
<input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee2',-1);"/>

<div id="marquee2" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
<div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
<!--YOUR SCROLL CONTENT HERE-->
Hello, hello, hello.
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>


<script type="text/javascript">
/*<![CDATA[*/
scrollmarquee('marquee1',1,true);
scrollmarquee('marquee2',-1);
/*]]>*/
</script>
</body>

</html>

pixelkitten
11-02-2012, 10:20 PM
Thank you for your response vwphillips!

I was hoping for something without buttons though, so when it automatically reaches the bottom, it starts going back up, and vice versa. I hope that makes sense, I probably should have added that to my first post. :o

vwphillips
11-03-2012, 11:42 AM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<link rel="stylesheet"type="text/css"href="http://rosybub.webs.com/coding.css">
</head>

<body>
<script language=JavaScript><!--
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS; }
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// --> </script>

<H6>Gallery</H6>
<H4>Art I own.<3</H4>

<style type="text/css">

#marqueecontainer{
position: relative;
width: 338px;
height: 395px;
background-color: transparent;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
}

</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=0 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //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(spd){
clearTimeout(scrollmarquee.to);
var spd=typeof(spd)=='number'?spd:marqueespeed,top=parseInt(cross_marquee.style.top)-spd;
if ((spd>0&&top<-actualheight)||(spd<0&&top>marqueeheight)){
// top=spd>0?marqueeheight:-actualheight;
spd*=-1;
}
cross_marquee.style.top=top+"px";
scrollmarquee.to=setTimeout(function(){ scrollmarquee(spd); },30);
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
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"
cross_marquee.style.overflow="scroll"
return
}
setTimeout(function(){ scrollmarquee(); }, 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>
<input type="button" name="" value="Up" onmouseup="scrollmarquee(1);"/>
<input type="button" name="" value="Down" onmouseup="scrollmarquee(-1);"/>
<div id="marqueecontainer" onMouseover="scrollmarquee(0);" onMouseout="scrollmarquee(-1);">
<div id="vmarquee" style="position: absolute; width: 98%;top:401px;">

<!--YOUR SCROLL CONTENT HERE-->

<center>Hello, hello, hello.</center>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>


</body>

</html>

Read more at http://www.codingforums.com/showthread.php?t=280484#bfUVHSfFdYmBKSvV.99




<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.marquee{
position: relative;
width: 338px;
height: 205px;
background-color: transparent;
overflow: hidden;
border: 1px solid orange;
padding: 0px;
padding-left: 10px;
text-Align:left;
}

</style>

<script type="text/javascript">

function scrollmarquee(id,spd,c){
var o=scrollmarquee['zxc'+id],m=document.getElementById(id),spd=typeof(spd)=='number'?spd:0;
if (m&&!o){
var s=m.getElementsByTagName('DIV')[0],nu,z0=1;
s.style.position='absolute';
s.style.top=s.offsetTop+'px';
o=scrollmarquee['zxc'+id]={
s:s,
sh:s.offsetHeight,
max:m.offsetHeight,
c:c===true
};
if (o.c){
c=s.cloneNode(true);
for (;z0<Math.ceil(o.max/o.sh)+1;z0++){
c=c.cloneNode(true);
c.style.left='0px';
c.style.top=z0*o.sh+'px';
o.s.appendChild(c);
if (z0>40){
return;
}
}
s.style.top='0px';
o.max=0
}
}
if (m&&o){
clearTimeout(o.to);
var spd=typeof(spd)=='number'?spd:0,top=parseInt(o.s.style.top)-spd;
if ((spd>0&&top<-o.sh)||(spd<0&&top>o.max)){
// top=o.c?spd>0?0:-o.sh:spd<0?-o.sh:o.max;
spd*=-1;
}
o.s.style.top=top+'px';
o.to=setTimeout(function(){ scrollmarquee(id,spd); },30);
}
}

</script>
</head>

<body>
<input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee1',1);"/>
<input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee1',-1);"/>

<div id="marquee1" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
<div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
<!--YOUR SCROLL CONTENT HERE-->
Hello, hello, hello.
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<input type="button" name="" value="Up" onmouseup="scrollmarquee('marquee2',1);"/>
<input type="button" name="" value="Down" onmouseup="scrollmarquee('marquee2',-1);"/>

<div id="marquee2" class="marquee" onMouseover="scrollmarquee('marquee1',0);" onMouseout="scrollmarquee('marquee1',-1);">
<div style="position: absolute; width: 98%;left:0px;padding-left: 10px">
<!--YOUR SCROLL CONTENT HERE-->
Hello, hello, hello.
<!--YOUR SCROLL CONTENT HERE-->
</div>
</div>


<script type="text/javascript">
/*<![CDATA[*/
scrollmarquee('marquee1',1,true);
scrollmarquee('marquee2',-1);
/*]]>*/
</script>
</body>

</html>

Read more at http://www.codingforums.com/showthread.php?t=280484#bfUVHSfFdYmBKSvV.99

pixelkitten
11-03-2012, 08:19 PM
Oh thank you so much, that's what I was looking for!

Works perfectly!

pixelkitten
11-03-2012, 11:12 PM
Ahh sorry for double posting, but I actually just noticed a couple of things, I'm using the first code in your second post, and I'm wondering if they can be changed.

The first thing is that when it firsts starts scrolling, their's no gap before they start scrolling, if that makes sense. I'm wondering if the coding can be changed so they can come from the bottom up.
And secondly, when I hover my mouse over after it's changed directions, when I move my mouse back off it causes it too start going upwards again instead of continuing in the same direction.

If you could help me with these two things I would greatly appreciate it, I hope I'm not being too much of a hassle.

pixelkitten
11-07-2012, 05:10 AM
Anybody? D:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum