...

View Full Version : JS Scroller



phantom007
07-14-2009, 11:09 AM
HI

Please consider the code below. Its a table containing images in rows and columns which is wrapped by a DIV tag. The width of the DIV tag is 300px and overflow set to hidden. Is there anyway I can scroll the contents of the DIV tag to right and left with the links Scroll Left and Scroll Right with javascript? Or is there any javascript that can do this trick for me?

Many thanks




<a href="#">Scroll Left</a> | <a href="#">Scroll Right</a>
<BR><BR>
<div style="width:300px; overflow:hidden; border:3px solid #000;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
</tr>
<tr>
<td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
</tr>
</table>
</div>

Amphiluke
07-14-2009, 11:24 AM
Use the scrollLeft property.

<script type="text/javascript">
function scrollDiv(direction) {
var theDiv = document.getElementById("imgs");
theDiv.scrollLeft = (direction == "right") ? theDiv.scrollWidth : 0;
}
</script>

<p><a href="#" onclick="scrollDiv('left');">Scroll Left</a> | <a href="#" onclick="scrollDiv('right');">Scroll Right</a></p>
<br /><br />
<div id="imgs" style="width:300px; overflow:hidden; border:3px solid #000;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
</tr>
<tr>
<td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
</tr>
</table>
</div>

vwphillips
07-14-2009, 11:29 AM
<!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>
<script type="text/javascript">
/*<![CDATA[*/

function Scroll(id,ud){
var obj=document.getElementById(id);
clearTimeout(obj.to);
if (ud){
obj.scrollLeft=obj.scrollLeft+ud;
obj.to=setTimeout(function(){ Scroll(id,ud); },10);
}
}
/*]]>*/
</script></head>

<body>
<a onmousedown="Scroll('tst',1);" onmouseup="Scroll('tst');">Scroll Left</a> | <a onmousedown="Scroll('tst',-1);" onmouseup="Scroll('tst');">Scroll Right</a>
<BR><BR>
<div id="tst" style="position:relative;width:300px; overflow:hidden; border:3px solid #000;">
<table width="100%" border="1" cellspacing="0" cellpadding="5"style="position:relative;">
<tr>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
</tr>
<tr>
<td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
</tr>
</table>
</div></body>

</html>

phantom007
07-14-2009, 11:30 AM
@Amphiluke,

Hi

Thanks for the quick reply.

The script you provided scrolls either the extreme right or the extreme left. It misses the middle ones.

Actually I am looking something similar to this


http://www.shopstyle.com/browse/dresses?feat=53873241

vwphillips
07-14-2009, 11:31 AM
see post #3

phantom007
07-14-2009, 11:38 AM
see post #3

Hi,

I appreciate your quick help.

The script you provided works fine. Can it be done (only if its ok for you) like once you click on the scroll left/right links, the first 4 images moves and the next 4 images scrolls.

To be precise I am actually looking for a scroller like this


http://www.shopstyle.com/browse/dresses?feat=53873241

Many thanks

Amphiluke
07-14-2009, 11:51 AM
If you no need smooth scrolling, try this

<script type="text/javascript">
function scrollDiv(direction) {
var theDiv = document.getElementById("imgs");
var scrollStep = theDiv.getElementsByTagName("td")[0].offsetWidth * 4;
theDiv.scrollLeft += (direction == "right") ? scrollStep : -scrollStep;
}
</script>

<p><a href="#" onclick="scrollDiv('left');">Scroll Left</a> | <a href="#" onclick="scrollDiv('right');">Scroll Right</a></p>
<br /><br />
<div id="imgs" style="width:300px; overflow:hidden; border:3px solid #000;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
</tr>
<tr>
<td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
</tr>
</table>
</div>

phantom007
07-14-2009, 11:56 AM
I'd appreciate if it can be smooth scrolling :)


Many thanks

vwphillips
07-14-2009, 02:41 PM
<!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>
<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 2 = the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 5 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (digits)
// parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: The default units(excepting opacity) are 'px'.
// Note 2: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: To 'toggle' the effect include '#' in parameter 0.
// The first call will set the toggle parameters.
// Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
// Note 4: The function may be re-executed with a different set of parameters (start/finish time or period)
// whenever required, say from an onclick/mouseover/out event.
// The period parameter will be retained unless re-specified.
// Note 5: parameter 5 is of particular use when re-calling the effect
// in mid travel to retain an constant rate of progression.
// Note 6: parameters 2 and 3 must be different values to execute the script.
//

// **** Advanced Applications
//
// Calling function 'zxcBAnimator' returns the instance of the script,
// this may be assigned to a variable and used to access the current value of the effect or to control the effect.
// alternatively the script instance by elementobject[mode.replace(/\W/g,'')+'oop'];
// where mode is parameter 0 of the initial call.
// An array storing the current, start and finish values of the element effect may be accessed
// from the element [instance].data as fields 0, 1 and 2 respectively where [instance] is the instance of the script.
//
// Once initialised the effect may be updated by calling function
// [instance].update([100,200])
// where:
// parameter 0 = an array defining the start and finish values. (array)
// field[0] =the start position of the effect. (digits, for opacity minimum 0, maximum 100)
// field[0] = the finish position of the effect. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = (optional) period of time between the start and finish of the effect in milliseconds. (digits or defaults to 2000 milliSeconds)
// parameter 2 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 5)
// field 0 the minimum. (digits)
// field 1 the maximum. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// ** Bounce
// A 'bounce' effect may be applied by assigning the script instance property 'Bounce' an array
// defining the 'bounce' properties.
// e.g.
// [instance].Bounce=[100,90,4,200];
// where:
// field[0] = the 'bounce' maximum. (digits)
// field[1] = the 'bounce' minimum. (digits)
// field[2] = the number of bounces. (digits)
// field[3] = the 'bounce' duration. (digits)
//


// **** General
//
// Function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code, about 2.41K with 'bounce' and 'opacity' or 1.97K without is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj) return;
var oop=obj[mde.replace(/\W/g,'')+'oop'];
if (oop){
if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/\W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
clearTimeout(this.to);
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.ms=this.mS;
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
this.ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
this.apply();
if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Bounce&&this.Bounce[2]>0) this.bounce();
}
}

zxcBAnimatorOOP.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

zxcBAnimatorOOP.prototype.bounce=function(){
if (this.Bounce[2]%2==0)
this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Scroll(id,nu,ud,ms){
var obj=document.getElementById(id);
if (!obj.oop){
obj.oop=zxcBAnimator('left',obj,5,0,10);
}
var inc=obj.getElementsByTagName('TD')[0].offsetWidth*nu*ud;
obj.oop.update([obj.oop.data[0],Math.max(Math.min(obj.oop.data[2]+inc,0),obj.parentNode.offsetWidth-obj.offsetWidth)],ms||1000,[0,inc]);
}
/*]]>*/
</script></head>

<body>
<a onmouseup="Scroll('tst',4,-1,1000);" >Scroll Left</a> | <a onmouseup="Scroll('tst',4,1,1000);">Scroll Right</a>
<BR><BR>
<div style="position:relative;width:345px; overflow:hidden; border:3px solid #000;">
<table id="tst" width="100%" border="1" cellspacing="0" cellpadding="5"style="position:relative;">
<tr>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></td>
<td><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></td>
</tr>
</table>
</div>

</body>

</html>

phantom007
07-14-2009, 02:43 PM
Thanks so much phillips



God Bless :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum