Horizontal Endless Scrolling

**madnhate** · 04-21-2012, 10:42 PM

Is there a javascript that creates endless scrolling horizontally?

EDIT:
Sorry completely didn't leave examples. I guess it would be more like endless content loading? Or endless pagination or something? Sorry I didn't describe it better. Basically I am looking for this but as usual there doesn't seem to be a horizontal version of this. Or at least I haven't found it.
This video shows what I'm talking about.
Example as you scroll down the page it keeps loading the posts/content

**djr33** · 04-21-2012, 11:26 PM

What's "endless"? Do you mean it would loop? There are some here. Just do a search for them.
http://www.dynamicdrive.com/dynamicindex2/index.html

**vwphillips** · 04-22-2012, 02:46 PM

Code:

<!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">
/*<![CDATA[*/

.slider {
 position:relative;overflow:hidden;width:400px;height:75px;border:solid red 1px;
}


.slider IMG {
 width:100px;margin-Left:5px;
}

.sliderV {
 position:relative;overflow:hidden;width:100px;height:300px;border:solid red 1px;
}


.sliderV IMG {
 width:100px;margin-Top:5px;
}
/*]]>*/
</style></head>

<body>

 <div id="c1" class="slider" onmouseover="zxcConveyor('c1',0);" onmouseout="zxcConveyor('c1',-1);">
  <div >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" />
  </div>
 </div>

 <div id="c2" class="slider" onmouseover="zxcConveyor('c2',0);" onmouseout="zxcConveyor('c2',1);">
  <div>
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
  </div>
 </div>

 <div id="c3" class="sliderV" onmouseover="zxcConveyor('c3',0,'V');" onmouseout="zxcConveyor('c3',1,'V');">
  <div>
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
  </div>
 </div>

<script  type="text/javascript">
/*<![CDATA[*/
// Conveyor (30-January-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcConveyor(id,spd,mde){
 if (!zxcConveyor[id]){
  var mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height','left']:['left','offsetLeft','offsetWidth','width','top'],obj=document.getElementById(id),slide=obj.getElementsByTagName('DIV')[0],oop;
  slide.style.position='absolute';
  slide.style[mde[0]]='0px';
  slide.style[mde[3]]='3000px';
  var objs=slide.getElementsByTagName('*'),lgth=objs.length-1,w=objs[lgth][mde[1]]+objs[lgth][mde[2]],z0=1,nu=Math.ceil(obj[mde[2]]/w)+1,c
  for (;z0<nu;z0++){
   c=slide.cloneNode(true);
   c.style[mde[0]]=w*z0+'px';
   c.style[mde[4]]='0px';
   slide.appendChild(c);
  }
  zxcConveyor[id]=obj={};
  obj.sz=w;
  obj.lft=0;
  obj.mde=mde[0];
  obj.slide=slide;
 }
 var obj=zxcConveyor[id],sz=obj.sz,lft=obj.lft;
 clearTimeout(obj.to);
 obj.lft=lft+spd>0&&spd>0?-sz+spd:lft+spd<-sz+spd&&spd<0?0:lft+spd;
 obj.slide.style[obj.mde]=obj.lft+'px';
 obj.to=setTimeout(function(){ zxcConveyor(id,spd); },50);
}

zxcConveyor('c1',-1);
zxcConveyor('c2',1);

/*]]>*/
</script>
</body>

</html>

**madnhate** · 04-23-2012, 08:33 AM

Sorry I have posted clarification on my original post. Basically what I want is something more of endless loading of content. Or they call it endless pagination or something.

Sorry completely didn't leave examples. I guess it would be more like endless content loading? Or endless pagination or something? Sorry I didn't describe it better. Basically I am looking for this but as usual there doesn't seem to be a horizontal version of this. Or at least I haven't found it.
This video shows what I'm talking about.
Example as you scroll down the page it keeps loading the posts/content

**madnhate** · 05-07-2012, 04:26 PM

any ideas?

**madnhate** · 05-30-2012, 08:15 PM

For example it will start loading the content when you scroll to the right(the side which the rest of the content would be)

Thread: Horizontal Endless Scrolling

Thread Tools

Search Thread

Horizontal Endless Scrolling

Bookmarks

Bookmarks

Posting Permissions