PDA

View Full Version : 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/dynamicindex2/iframe-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
<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
<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
<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>

lupstick
07-27-2011, 12:46 AM
Hello!
It's owesome script!
May I have question?
how can I set this script from down to top, but slower than original?

vwphillips
07-27-2011, 01:34 PM
from down to top

please explain

lupstick
07-27-2011, 02:51 PM
Sorry!
I like the the original effect, but it can be done a bit slowly?

vwphillips
07-27-2011, 03:28 PM
var scrollspeed=cache=.5;

lupstick
07-27-2011, 06:38 PM
it works, tks

vwphillips
07-28-2011, 06:43 AM
a more modern version with a cosistant scroll speed across browsers



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


<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

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

<!-- END SCROLLER CONTENT -->
</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>