IFRAME Scroller - Horizontal Scrolling

**Dave_G** · 07-18-2011, 07:00 PM

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

**Dave_G** · 07-19-2011, 11:12 AM

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.

**Dave_G** · 07-24-2011, 06:19 AM

*Bump*

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

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" >
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

<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>&nbsp;</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>&nbsp;</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>&nbsp;</font></strong></small><br>
<small><font face="Verdana">Display a second, &quot;roaming&quot; 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>

<!-- END SCROLLER CONTENT -->
</div>
</div>

</body>
</html>

**Dave_G** · 07-25-2011, 11:58 AM

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?

**vwphillips** · 07-25-2011, 12:22 PM

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" >
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

<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>&nbsp;</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>&nbsp;</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>&nbsp;</font></strong></small><br>
<small><font face="Verdana">Display a second, &quot;roaming&quot; 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>

<!-- END SCROLLER CONTENT -->
</div>
</div>

</body>
</html>

**Dave_G** · 07-25-2011, 01:26 PM

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))

**vwphillips** · 07-25-2011, 05:19 PM

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" >
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

  <a>Along line of text Along line of text</a>

<!-- END SCROLLER CONTENT -->
</div>
</div>

</body>
</html>