Cross Browser Marquee II --- Horizontal?

**andrewpike2000** · 12-29-2005, 07:10 PM

RE: http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

I am looking to implement the "Cross Browser Marquee II" script into a dynamic webpage. I have manually reconfigured the script to scroll horizontally, but the content within the DIV (a series of images) is "wrapping" to the next line of the scroller and becomes invisible to the visitor - even though there are no breaks in the string of code to be displayed. I am guessing this has something to do with "overflow" or just the fact that the script was meant to handle up & down content as opposed to side-to-side content. What can I do to tweak this script and make it work similar to the original "Cross Browser Marquee" (horizontal scrolling) but still using the content expressed in a seperate DIV??? I need this so that my PHP variables (expressed on the fly) can generate the content.

Sample Page: http://waynedennon.com/v3/show.php?s=121&p=13.jpg

Any help or suggestions for this fix would be greatly appreciated. Thank you, in advance.

**jscheuer1** · 12-30-2005, 07:31 AM

I saw no attempt to use any marquee script on the page that the link you provided brought up in my browser. I can give you a few tips, if you are going for a horizontal marquee, use no <p>, <div>. <br> or any other block level tags in the content. Replace the containing division for the content with a <span> tag followed by a <nobr> tag:

Code:

<span><nobr> content without block level tags goes or will be inserted here </nobr></span>

These measures may not be sufficient but, they will be a start.

**andrewpike2000** · 12-30-2005, 03:21 PM

Script: Cross Browser Marquee II
URL: http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

Sorry, John. You must have visited the page while I was trying to tweak it... it's available for viewing now: http://waynedennon.com/v3/show.php?s=121&p=13.jpg

Your suggestion fixed the issue I was having with content breaking to the next line. Thanks.

Can the content of the scroll be set to be continually scrolled in a loop, without a blank space in the scroll content? As you know, when the srolled content reaches it's end, there is a blank space that srolls behind it until all of the scroll content has passed. Then it reloads.

**jscheuer1** · 12-30-2005, 04:33 PM

Well, the key to having a continuous scrolling feature is to create two identical mobile elements that follow each other. As soon as one scrolls out of view, it is repositioned, offscreen, to follow the one that is currently visible. To that end, using your version of this script, you could put this directly after the content area:

HTML Code:

<span id="vmarquee2" style="position: absolute; width: 98%;"></span>

Then for the initialization function you could do this:

Code:

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.width=marqueewidth+"px"
cross_marquee.style.overflowX="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

and for the scrollmarquee function:

Code:

function scrollmarquee(){
if (parseInt(cross_marquee.style.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

**jscheuer1** · 12-30-2005, 05:19 PM

There are a few more things that should be done to make the implementation cross browser. For the initialization function:

Code:

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

Once this is done, we need to wrap everything in an additional div with overflow set to hidden and assure that the nobr tag follows immediately after (without even a new line) the span tag:

HTML Code:

<div style="overflow:hidden"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
<!--SCROLL CONTENT HERE-->

Don't forget to close the added div tag:

HTML Code:

</nobr>
</span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div>
</div>

Now the style needs just a little tweaking and we are done (additions red):

Code:

<style type="text/css">

#marqueecontainer{
position: relative;
width: 500px; /*marquee width */
height: 120px; /*marquee width */
background-color: black;
overflow: hidden;
border: 0px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</style>

**lizlee00** · 02-04-2006, 11:40 PM

Hello,

I too am trying to make the marquee II script work horizontally. I have tried to follow what you have done here, but I have run into a problem. At first it seems to scroll just fine, but once it is about to get to the end of one set, it wraps around- but much faster than the previous set and it overlaps. Here is an example of what I am talking about: http://www.lizleeweb.com/portfoliotest.htm.

I am attempting to have the images scroll through continuously in a loop- with no breaks and no overlaps. Any help you can give would be much appreciated! And thank you John for your previous posts, they helped me to get at least this far.

Thanks!
Liz Lee

**jscheuer1** · 02-05-2006, 04:13 AM

I had a little trouble following it myself and I wrote it! But, it wasn't too bad. Here is a working demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#marqueecontainer{
position: relative;
width: 500px; /*marquee width */
height: 20px; /*marquee height */
background-color:lightyellow;
color:black;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
text-align:left;
}

#marqueecontainer img {
border-width:2px;
border-style:solid;
}

</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=2000 //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.left)<(actualwidth*(-1)+4))
cross_marquee.style.left=(parseInt(cross_marquee2.style.left)+actualwidth+4)+"px"
if (parseInt(cross_marquee2.style.left)<(actualwidth*(-1)+4))
cross_marquee2.style.left=(parseInt(cross_marquee.style.left)+actualwidth+4)+"px"
cross_marquee2.style.left=parseInt(cross_marquee2.style.left)-copyspeed+"px"
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee2=document.getElementById("vmarquee2")
cross_marquee.style.left=0
marqueewidth=document.getElementById("marqueecontainer").offsetWidth
actualwidth=cross_marquee.firstChild.offsetWidth
cross_marquee2.style.left=actualwidth+4+'px'
cross_marquee2.innerHTML=cross_marquee.innerHTML
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>
</head>
<body>
<div style="overflow:hidden">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"> <span id="vmarquee" style="position: absolute; width: 98%;"><nobr>
 <!--SCROLL CONTENT HERE-->

<h4 style="display:inline;">Your scroller contents:</h4>&nbsp;&nbsp;
<b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp; 
Ajax category added</a></b>&nbsp;&nbsp;
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a> 
to better organize its scripts.<b>&nbsp;&nbsp;<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b>&nbsp;
We're excited to introduce our latest web tool- Gradient Image Maker!&nbsp;&nbsp;<b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b> 
Check out our new forums for help on our scripts and coding in general.&nbsp;&nbsp;<b><a href="http://www.dynamicdrive.com/notice.htm">Terms of 
Usage update</a></b> 
Please review our updated usage terms regarding putting our scripts in an 
external .js file.&nbsp;&nbsp;


</nobr> </span><span id="vmarquee2" style="position: absolute; width: 98%;"></span></div> </div>
</body>
</html>

**lizlee00** · 02-05-2006, 04:28 AM

Thanks a million! It feels so good to finally have everything working!!

**bobjimwilly** · 05-30-2007, 10:40 AM

hi. I know this post is old but if anyone is still interested in helping me, I was wondering does anyone know of a quick fix to make this work properly in firefox and opera

thanks.

**Dark-Wolf** · 02-20-2008, 08:17 PM

Hi!
I have successfully used this javascript to create a block with mkportal on my site.
Work perfectly with all browser except opera.
I have changed code from:

Code:

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
}

to:

Code:

// if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){
// cross_marquee.style.height=marqueeheight+"px"
// cross_marquee.style.overflow="scroll"
// return
// }

and now work perfectly also with opera.
You can test in my site: http://darkwolf.altervista.org

PS sorry for my bad english