SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    horizontgal scrolling of image links

    Hello,

    I'm not so familiar with jQuery. I hope that someone can push me in the right direction.

    Code:
    <nav id="small-box-links" class="nav-collapse" >
          <ul>
    		<li><a href="#small-box1"><img src="/images/templat/brands/logo_image_1.png" alt="brandname"/></a></li>
    	    	<li><a href="#small-box2"><img src="/images/templat/brands/ogo_image_2.png" alt="brandname"/></a></li>
    		<li><a href="#small-box3"><img src="/images/templat/brands/ogo_image_3.png" alt="brandname"/></a></li>
    		<li><a href="#small-box4"><img src="/images/templat/brands/ogo_image_4.png" alt="brandname"/></a></li>
    		<li><a href="#small-box5"><img src="/images/templat/brands/ogo_image_5.png" alt="brandname"/></a></li>
    		<li><a href="#small-box6"><img src="/images/templat/brands/ogo_image_6.png" alt="brandname"/></a></li>
    		<li><a href="#small-box7"><img src="/images/templat/brands/ogo_image_7.png" alt="brandname"/></a></li>
    		<li><a href="#small-box8"><img src="/images/templat/brands/ogo_image_8.png" alt="brandname"/></a></li>
          </ul>
    So as you can see I have in the first place 8 logo brand links. This was ok so far, for space I have. Now we have to add more logo's but the horizontal space is limited. So now is the idea to show 6 brand logo's and add a arrow on the left side <-- and one on the right side -->. So when you click for example on the right arrow --> then the logo's has scroll one position to the left with a new logo comes visible on the right side. The logo on the most left is srolling away. And of course if you click on the left arrow <-- just the opposite is happening.

    Can anyone help me out how to create this with Jquery?

    And one thing what I do not know if this is necessary, but is it necessary to configure how many branding logo's must be visible. Let say 6 branding logo's are visible.

    I hope that I'm clear.

    Thanks.

    Nico

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Can anyone help me out how to create this with Jquery?
    The script below will allow you to scroll in both directions on clicking the side buttons. It functions by adding or subtracting child nodes from the collection of images. The script works in all browsers back to IE7. It is written in javascript, rather than JQuery. Perhaps you can convert it as an exercise.

    Here is a JS Fiddle link so that you can see it working. Unfortunately js Fiddle does not allow this script to operate below IE9.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Horizontal Scroll</title>
    <script type="text/javascript">
     var allImages, currentLeftObj, currentRightObj; // global
     function goLR(dirn)
      { var parentN=currentLeftObj.parentNode;
        var pNodeChild=parentN.childNodes;
        var topChild=null;
        var thisDirnObj=(dirn=="L")? currentLeftObj : currentRightObj;  
        for(var i=0;i<pNodeChild.length;i++)
        { if(typeof pNodeChild[i].id !="undefined" && pNodeChild[i].id !="")
            {  if(!topChild){ topChild=pNodeChild[i]; }     // save first left child          
               if(pNodeChild[i].id==thisDirnObj.id)
                  { var thisChildNode=currentLeftObj.parentNode.removeChild(pNodeChild[i]);
                    if(dirn=="L")
                      { parentN.appendChild(thisChildNode); }
                     else 
                      { parentN.insertBefore(thisChildNode,topChild); }                                                
                    getCurrent();                
                  } 
              } 
          }
        }
    // -----------
      function getCurrent(){  
       allImages=document.getElementById("imgWrap").getElementsByTagName("img");
       currentLeftObj= allImages[0];
       currentRightObj=allImages[allImages.length-1];
      }  
    // --------
     window.onload=getCurrent;
    </script>
    <style type="text/css">
    body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:center; margin:3px 0px; }
    #wrap  { position:relative; width:900px; height:500px; margin:0px auto; border:1px solid #CCC;  }
    #catchAll { position:relative; top:0px; left:0px; width:540px; height:110px; margin:50px auto;  }
    #holder  { position:relative; top:0px; left:0px; width:540px; height:105px; border:1px solid #000; }
    #holder  { padding:5px; text-align:center; clip:auto; overflow:hidden; }
    #imgWrap  { width:800px; height:105px; margin-left:-110px; text-align:left; }
    #imgWrap img  { margin-right:10px;  } 
    #btnL   { left:-50px;  }
    #btnR   { right:-55px; }
    .btn  { position:absolute; bottom:0px; width:30px; height:30px; border:1px solid #00F; }
    .btn  { background-color:#EEE; text-align:center; cursor:pointer; font-size:18px; padding-top:5px; } 
    </style>
    </head>
    
    <body>
    
    <div id="wrap">
      <div id="catchAll">
        <div id="holder">
          <div id="imgWrap">
            <script type="text/javascript">
      		var i, build="";
      		for(i=1;i<8;i++)
     			{ build+='<img id="a'+i+'" border="0" src="B'+i+'.jpg" width="100" height="100">'; }
       		document.write(build);
            </script>
          </div>
        </div>
        <div id="btnL" class="btn" onclick="goLR('L')">
          &lt;&lt;</div>
        <div id="btnR" class="btn" onclick="goLR('R')">
          &gt;&gt;</div>
      </div>
    </div>
    
    </body>
    
    </html>

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by AllanP View Post
    Unfortunately js Fiddle does not allow this script to operate below IE9.
    JSFidde is quite broken in IE8 and below.

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have fixed it, see my other thread


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
  •