Results 1 to 6 of 6

Thread: Horizontal Endless Scrolling

  1. #1
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Horizontal Endless Scrolling

    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
    Last edited by madnhate; 04-23-2012 at 08:34 AM. Reason: Add more information.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    any ideas?

  6. #6
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •