PDA

View Full Version : 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. (http://www.codinghorror.com/blog/2012/03/the-end-of-pagination.html)
Example as you scroll down the page it keeps loading the posts/content (http://codysherman.com/)

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
<!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. (http://www.codinghorror.com/blog/2012/03/the-end-of-pagination.html)
Example as you scroll down the page it keeps loading the posts/content (http://codysherman.com/)

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)