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.
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.
<!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 &
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 &
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>
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.
Last edited by flipper828; 10-04-2012 at 03:03 PM..
Reason: took my name out.
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.
Before you post, read our: 
A HUGE thanks!
