IFRAME Scroller - Horizontal Scrolling

Printable View

07-18-2011, 07:00 PM
Dave_G

IFRAME Scroller - Horizontal Scrolling

1) Script Title: IFRAME Scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...e-scroller.htm

3) Describe problem: Hi, i have the above script setup and really pleased with it; i would like to know how do i amend the script in external.htm so that i scrolls horizontal to the left and not vertical.

I have looked at several threads on here and some posts recommend to change these lines of code to 'left':

function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}

A number of members have done this but then get a problem with the text scrolling through and not returning again?

I would be grateful if you could help me with this?

Regards

Dave
07-19-2011, 11:12 AM
Dave_G

Hi

Can anyone help me with this please; i've changed parts of the below code to 'left' but the text doesn't return back on the screen from the right? Does the text need to be inside some wrap container or something?

function scrollDiv(){
dataobj.style.left=parseInt(dataobj.style.left)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.left="136px"
setTimeout("scrollDiv()",40)
}

Thanks.
07-24-2011, 06:19 AM
Dave_G

*Bump*
07-24-2011, 11:55 AM
vwphillips

Code:

<html> <head> <style type="text/css"> /*<![CDATA[*/ #datacontainer { position:absolute;left:1px;top:10px;width:600px; /*the width of the target page parent IFRAME */ } .scroll { position:absolute;left:1px;top:10px;width:3000px; } .item { width:200px;float:left; /* do not use margin-Right */ } /*]]>*/ </style> <script type="text/javascript"> /*********************************************** * IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Specify speed of scroll. Larger=faster (ie: 5) var scrollspeed=cache=2; // > 0 = scroll left, < 0 = scroll right //Specify intial delay before scroller starts scrolling (in miliseconds): var initialdelay=500; function initializeScroller(){ var obj=document.getElementById("datacontainer"),slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,sz=lst.offsetLeft+lst.offsetWidth,nu=Math.ceil(obj.offsetWidth/sz)+1,z0=0; for (;z0<nu;z0++){ slide=z0>0?slide.cloneNode(true):slide; slide.style.left=sz*z0+'px'; obj.appendChild(slide); } setTimeout(function(){ Scroll(0,sz); }, initialdelay); } function Scroll(lft,sz){ lft-=scrollspeed; if ((scrollspeed>0&&lft<-sz)||(scrollspeed<0&&lft>0)){ lft=(scrollspeed>0?0:-sz)-scrollspeed; } document.getElementById("datacontainer").style.left=lft+'px' setTimeout(function(){ Scroll(lft,sz); }, 40); } if (window.addEventListener) window.addEventListener("load", initializeScroller, false) else if (window.attachEvent) window.attachEvent("onload", initializeScroller) else window.onload=initializeScroller </script> </head> <body> <div id="datacontainer" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache"> <div class="scroll" >  <div class="item" > <b>What's Hot</b></p> </div> <div class="item" > <p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex9/encrypter.htm" target="_top">Source code encrypter</a> </small></font></strong><br> <font face="Verdana" size="2">Scramble the source of any chunk of code using this unique script.</font></p> </div> <div class="item" > <p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex5/flashlink.htm" target="_top">Flashing links</a> </small></font></strong><br> <font face="Verdana"><small>Bring attention to special links, by making them flash!</small></font></p> </div> <div class="item" > <p align="left"><small><strong><font face="Verdana"><a href="http://www.dynamicdrive.com/dynamicindex13/roamcursor.htm" target="_top">Roaming Cursor</a> </font></strong></small><br> <small><font face="Verdana">Display a second, "roaming" cursor on your page with this fun animation script.</font></small></p> </div> <div class="item" > <p align="left"><font face="Verdana"><strong><a href="http://www.dynamicdrive.com/dynamicindex11/animatedtitle.htm" target="_top"><small>Animated Document title</small></a><br> </strong><small>Animate into view your document's title!</small></font> </div>  </div> </div> </body> </html>
07-25-2011, 11:58 AM
Dave_G

vwphillips, many thanks for the help!!

Can you tell me how i can get the text to appear from a distance from the left, say 700px, instead of starting immediatley from the left?
07-25-2011, 12:22 PM
vwphillips

Code:

<html> <head> <style type="text/css"> /*<![CDATA[*/ #datacontainer { position:absolute;left:1px;top:10px;width:600px;left:700px; /*the width of the target page parent IFRAME */ } .scroll { position:absolute;left:1px;top:10px;width:3000px; } .item { width:200px;float:left; /* do not use margin-Right */ } /*]]>*/ </style> <script type="text/javascript"> /*********************************************** * IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Specify speed of scroll. Larger=faster (ie: 5) var scrollspeed=cache=2; // > 0 = scroll left, < 0 = scroll right //Specify intial delay before scroller starts scrolling (in miliseconds): var initialdelay=500; //Specify intial scroller position: var initialposition=700; function initializeScroller(){ var obj=document.getElementById("datacontainer"),slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,sz=lst.offsetLeft+lst.offsetWidth,nu=Math.ceil(obj.offsetWidth/sz)+1,z0=0; for (;z0<nu;z0++){ slide=z0>0?slide.cloneNode(true):slide; slide.style.left=sz*z0+'px'; obj.appendChild(slide); } setTimeout(function(){ Scroll(initialposition,sz); }, initialdelay); } function Scroll(lft,sz){ lft-=scrollspeed; if ((scrollspeed>0&&lft<-sz)||(scrollspeed<0&&lft>0)){ lft=(scrollspeed>0?0:-sz)-scrollspeed; } document.getElementById("datacontainer").style.left=lft+'px' setTimeout(function(){ Scroll(lft,sz); }, 40); } if (window.addEventListener) window.addEventListener("load", initializeScroller, false) else if (window.attachEvent) window.attachEvent("onload", initializeScroller) else window.onload=initializeScroller </script> </head> <body> <div id="datacontainer" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache"> <div class="scroll" >  <div class="item" > <b>What's Hot</b></p> </div> <div class="item" > <p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex9/encrypter.htm" target="_top">Source code encrypter</a> </small></font></strong><br> <font face="Verdana" size="2">Scramble the source of any chunk of code using this unique script.</font></p> </div> <div class="item" > <p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex5/flashlink.htm" target="_top">Flashing links</a> </small></font></strong><br> <font face="Verdana"><small>Bring attention to special links, by making them flash!</small></font></p> </div> <div class="item" > <p align="left"><small><strong><font face="Verdana"><a href="http://www.dynamicdrive.com/dynamicindex13/roamcursor.htm" target="_top">Roaming Cursor</a> </font></strong></small><br> <small><font face="Verdana">Display a second, "roaming" cursor on your page with this fun animation script.</font></small></p> </div> <div class="item" > <p align="left"><font face="Verdana"><strong><a href="http://www.dynamicdrive.com/dynamicindex11/animatedtitle.htm" target="_top"><small>Animated Document title</small></a><br> </strong><small>Animate into view your document's title!</small></font> </div>  </div> </div> </body> </html>
07-25-2011, 01:26 PM
Dave_G

Thanks again Vic

....but and sorry to be a pain!

When there is a long line of text (one line), the text is scrolling partly off the screen but not reaching the end and then returning back to the absolute left position and not scrolling again from the 700px position.

In the IFRAME Scroller script i have to change the number in the following code to get it to go off the screen and come back again, but there is a delay when it comes back.

if (parseInt(dataobj.style.left)<thelength*(-15))
07-25-2011, 05:19 PM
vwphillips

Code:

<html> <head> <style type="text/css"> /*<![CDATA[*/ #datacontainer { position:absolute;left:701px;top:10px; } .scroll { position:absolute;left:0px;top:10px; } /*]]>*/ </style> <script type="text/javascript"> /*********************************************** * IFRAME Scroller script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Specify speed of scroll. Larger=faster (ie: 5) var scrollspeed=cache=2; // > 0 = scroll left, < 0 = scroll right //Specify intial delay before scroller starts scrolling (in miliseconds): var initialdelay=500; function initializeScroller(){ var obj=document.getElementById("datacontainer"),slide=obj.getElementsByTagName('DIV')[0]; slide.style.width='20000px'; setTimeout(function(){ Scroll(obj.offsetLeft,slide.getElementsByTagName('A')[0].offsetWidth,obj.offsetLeft); }, initialdelay); } function Scroll(lft,sz,srt){ lft-=scrollspeed; if ((scrollspeed>0&&lft<-sz)){ lft=srt; } document.getElementById("datacontainer").style.left=lft+'px' setTimeout(function(){ Scroll(lft,sz,srt); }, 40); } if (window.addEventListener) window.addEventListener("load", initializeScroller, false) else if (window.attachEvent) window.attachEvent("onload", initializeScroller) else window.onload=initializeScroller </script> </head> <body> <div id="datacontainer" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache"> <div class="scroll" >  <a>Along line of text Along line of text</a>  </div> </div> </body> </html>
07-27-2011, 12:46 AM
lupstick

Hello!
It's owesome script!
May I have question?
how can I set this script from down to top, but slower than original?
07-27-2011, 01:34 PM
vwphillips

Quote:

from down to top

please explain
07-27-2011, 02:51 PM
lupstick

Sorry!
I like the the original effect, but it can be done a bit slowly?
07-27-2011, 03:28 PM
vwphillips

Code:

var scrollspeed=cache=.5;
07-27-2011, 06:38 PM
lupstick

it works, tks
07-28-2011, 06:43 AM
vwphillips

a more modern version with a cosistant scroll speed across browsers

Code:

<html> <head> <style type="text/css"> /*<![CDATA[*/ #datacontainer { position:relative;left:701px;top:0px; } .scroll { position:absolute;left:0px;top:0px;width:20000px;background-Color:#FFFFCC; } /*]]>*/ </style> </head> <body> <div class="scroll" onmouseover="S.Pause()" onmouseout="S.Scroll();" > <div id="datacontainer" >  <a>Along line of text Along line of text</a>  </div> </div> <script type="text/javascript"> //Specify intial delay before scroller starts scrolling (in miliseconds): var initialdelay=500; // the duration of one scroll in milli seconds var scrollduration=20000; function initializeScroller(){ var oop=this,obj=document.getElementById("datacontainer"); obj.style.width='20000px'; this.obj=obj; this.min=-obj.getElementsByTagName('A')[0].offsetWidth; this.max=obj.offsetLeft; this.now=this.max; this.ms=scrollduration; this.inc=Math.PI/(2*this.ms); setTimeout(function(){ oop.scroll(); }, initialdelay); } initializeScroller.prototype={ Scroll:function(){ var oop=this; this.dly=setTimeout(function(){ oop.scroll(); },200); }, Pause:function(){ clearTimeout(this.dly); }, scroll:function(){ clearTimeout(this.dly); this.mS=this.ms*Math.abs((this.min-this.now)/(this.max-this.min)); this.animate('left',new Date(),this.now,this.min); }, animate:function(mde,srt,f,t,sc){ var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f); this.now=Math.max(now,f<0||t<0?now:0); this.obj.style[mde]=this.now+'px'; if (ms<this.mS){ this.dly=setTimeout(function(){ oop.animate(mde,srt,f,t,sc); },10); } else { this.now=this.max; this.scroll(); } } } S=new initializeScroller() </script> </body> </html>