CodingForums.com - Cross Browser Marquee II: remove blank space between scrolls

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Cross Browser Marquee II: remove blank space between scrolls (http://www.codingforums.com/showthread.php?t=244361)

Cross Browser Marquee II: remove blank space between scrolls

Hi there
Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at:
http://www.mrjindustrial.com.au/scro..._concrete.html
Thanks, hope someone can help.

Modifying that type of marquee to convert it to scroll continuously is complicated. It is easier to start over and write one that handles continuous scrolling from the start.

Take a look at http://javascript.about.com/library/blctmarquee1.htm which has a marquee script that scrolls text continuously regardless of the width of the marquee and the length of the text.

Code:

<!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">



#marqueecontainer{

position: relative;

width: 200px; /*marquee width */

height: 200px; /*marquee height */

overflow: hidden;

background-color: white;

border: 3px 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=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.top)>(actualheight*(-1)+8))

cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"

else

cross_marquee.style.top="0px"

}



function initializemarquee(){

 cross_marquee=document.getElementById("vmarquee")

 cross_marquee.style.top=0



 marqueeheight=document.getElementById("marqueecontainer").offsetHeight

 actualheight=cross_marquee.offsetHeight;

 var div=cross_marquee.cloneNode(true);

 div.style.left='0px';

 div.style.top=actualheight+'px';

 cross_marquee.appendChild(div);

 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></head>



<body>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">

<div id="vmarquee" style="position: absolute; width: 98%;">



<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;

Ajax category added</a></b><br>

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.</p>

<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>

We're excited to introduce our latest web tool- Gradient Image Maker!</p>



<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>

Check out our new forums for help on our scripts and coding in general.</p>

<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of

Usage update</a></b><br>

Please review our updated usage terms regarding putting our scripts in an

external .js file. </p>



</div>

</div>

</body>



</html>

Thank you vwphillips, that worked great!
Happy to make a small donation to your charity.

One more question if possible ...
URL: http://www.mrjindustrial.com.au/scro..._concrete.html
It works great but I just noticed there's a "jump" sideways where the images move slowly left, then "jump" back to the correct position once they reach the starting position.
You can really see it if you watch the white triangle.
Possible to fix that???
Thanks again!

Hello everyone...brand new member and first time post.

I know this thread is dated 2011. But, after weeks of searching and testing and trying, jwphillips code above has been the only thing I've been able to get to work. However, the scroll is upward. Is there any way to change the direction to "from left to right"?

Thank you in advance for your consideration and help.

Code:

<!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">



.container{

position: relative;

width: 200px; /*marquee width */

height: 200px; /*marquee height */

overflow: hidden;

background-color: white;

border: 3px solid orange;

padding: 2px;

padding-left: 4px;

}



</style>



<script type="text/javascript">



/***********************************************

* Simple Marquee (04-October-2012)

* by Vic Phillips - http://www.vicsjavascripts.org.uk/

***********************************************/



var zxcMarquee={



 init:function(o){

  var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;

  p.style.overflow='hidden';

  obj.style.position='absolute';

  obj.style[mde[0]]='0px';

  obj.style[mde[3]]=sz+'px';

  clone=obj.cloneNode(true);

  clone.style[mde[0]]=sz+'px';

  clone.style[mde[2]]='0px';

  obj.appendChild(clone);

  o=this['zxc'+id]={

   obj:obj,

   mde:mde[0],

   sz:sz

  }

  if (typeof(srt)=='number'){

   o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);

  }

  else {

   this.scroll(id,0)

  }

 },



 scroll:function(id,ud){

  var oop=this,o=this['zxc'+id],p;

  if (o){

   ud=typeof(ud)=='number'?ud:0;

   clearTimeout(o.dly);

   p=parseInt(o.obj.style[o.mde])+ud;

   if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){

    p+=o.sz*(ud>0?-1:1);

   }

   o.obj.style[o.mde]=p+'px';

   o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);

  }

 }

}



function init(){



 zxcMarquee.init({

  ID:'marquee1',     // the unique ID name of the parent DIV.                        (string)

  Mode:'Vertical',   //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')

  StartDelay:2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)

  StartDirection:-1  //(optional) the auto start scroll direction'.                  (number, default = -1)

 });



 zxcMarquee.init({

  ID:'marquee2',     // the unique ID name of the parent DIV.                        (string)

  Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')

  StartDelay:2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)

  StartDirection:-1  //(optional) the auto start scroll direction'.                  (number, default = -1)

 });



}



if (window.addEventListener)

 window.addEventListener("load", init, false)

else if (window.attachEvent)

 window.attachEvent("onload", init)

else if (document.getElementById)

 window.onload=init





</script></head>



<body>

<div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">

<div style="position: absolute; width: 98%;">



<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;

Ajax category added</a></b><br>

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.</p>

<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>

We're excited to introduce our latest web tool- Gradient Image Maker!</p>



<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>

Check out our new forums for help on our scripts and coding in general.</p>

<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of

Usage update</a></b><br>

Please review our updated usage terms regarding putting our scripts in an

external .js file. </p>



</div>

</div>





<div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);">

<div style="position: absolute; width: 98%;">



<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;

Ajax category added</a></b><br>

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.</p>

<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>

We're excited to introduce our latest web tool- Gradient Image Maker!</p>



<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>

Check out our new forums for help on our scripts and coding in general.</p>

<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of

Usage update</a></b><br>

Please review our updated usage terms regarding putting our scripts in an

external .js file. </p>



</div>

</div>

</body>



</html>

Thank you vwphillips! The fact that you know so much and are so nice about wanting to help others makes you a blessing.

I'm sorry to bother again....

Hi again.

I am finding the simple marquee works great in IE but its not scrolling at all in the latest versions of Chrome, Firefox and Safari. Is there a workaround on those 3 browsers?

Thanks again for your help.

I forgot to mention....

I forgot to mention above that the page I am working on has a javascript date program and an image slider that are working on all of the browsers. So I don't understand why this wonderful marquee script works perfectly on IE.

On the rest of the browsers (Chrome, Firefox, Safari and Opera) display the test for the marquee but it is not scrolling.

I hope that explains my problem at little bit better. Sometimes it takes me a while to explain things properly. Sorry.

I suppose I am as stupid as I feel.....

Please disregard the two posts above.....the script works perfectly in all the browsers.

*bows* to vwphillips