SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast Ciwan's Avatar
    Join Date
    May 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Content Slider Help

    Hello Everyone.

    I have created a "working" content slider with jQuery by following the following tutorial.

    However, since my slider is a little different, I have removed some bits of code, and that of course has created some unusual behaviour in my content slider.

    The content slides fine, however it keeps on sliding ! it doesn't stop when there are no more slides.

    Can someone please help me write this function in proper jQuery code.

    Code:
    function  manageSlides (position){
      // position==0 is first slide
      if(position==0)  {
      // and $('#leftControl') is clicked > move to position numberOfSlides-1
      }
      else { 
      // do nothing .. it will work as it should
      }
      
      // numberOfSlides-1 is last slides
      if(position==numberOfSlides-1) {
      and $('#rightControl') is clicked > move to position==0
      }
      else { do nothing .. it should work as before }
    }
    I would greatly appreciate any help.

    Thank You.

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's not clear to me exactly how you want the slide show to function after you made your changes to the jquery code.

    if it's any help, this is a plain vanilla javascript div slider you can use as a slideshow.

    perhaps you can tweak it to do what you want or post back with more details of how you want the sldieshow to function.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    <!-- 
    #main { 
    overflow: hidden; 
    border: 1px solid black; 
    color: black; 
    text-align: center; 
    position: absolute; top: 30px; left: 50px; 
    background-color: white; 
    width: 200px; 
    height: 200px} 
    #div0 {   
    position: absolute; top: 300px; left: 10px; 
    color: white; 
    background-color: black; 
    width: 200px; 
    height: 200px} 
    #div1 {   
    position: absolute; top: 300px; left: 300px; 
    background-color: green; 
    width: 200px; 
    height: 200px} 
    #div2 {    
    position: absolute; top: 50px; left: 300px; 
    background-color: red; 
    width: 200px; 
    height: 200px} 
    #div3 {    
    position: absolute; top: 300px; left: 600px; 
    background-color: blue; 
    width: 200px; 
    height: 200px} 
    #btnContainer { 
    position: absolute; top: 250px; left: 10px} 
    --> 
    </style> 
    <script type="text/javascript"> 
    
    var curDiv = 0; 
    var divSlide; 
    var divId; 
    var curLeft = -200; 
    var zedIndex = 0; 
    var pauser; 
     
    function swapDiv(dir) {
        divId = "div"+curDiv; 
        zedIndex = zedIndex + 100; 
        curLeft = curLeft * dir;
        document.getElementById(divId).style.top = 0+"px"; 
        divSlide = setInterval(function() {slideDiv(dir)},30); 
    } 
     
    function slideDiv(dir) {   
        document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through 
        curLeft = curLeft + (1*dir);  
        if(dir == 1 && curLeft > 0)   {  //we have scrolled all the way to the right 
         clearInterval(divSlide); 
         clearTimeout(pauser); 
         curDiv = curDiv + 1; 
         if(curDiv > 3) curDiv = 0; 
         curLeft = -200 * dir; 
         pauser = setTimeout(function() {swapDiv(dir)},2000);
        } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
          clearInterval(divSlide); 
          clearTimeout(pauser); 
          curDiv = curDiv + 1; 
          if(curDiv > 3) curDiv = 0; 
          curLeft = 200 * dir; 
          pauser = setTimeout(function() {swapDiv(dir)},2000);
        } else {  //keep scrolling to the right 
            document.getElementById(divId).style.left = curLeft+"px";   
        } 
    }
     
    function stopSliding(btn) {
        if(btn == "stop") {
            document.getElementById("l2r").disabled = false;
            document.getElementById("r2l").disabled = false;
            curLeft = -200;
        } else {  
            document.getElementById("l2r").disabled = true;
            document.getElementById("r2l").disabled = true;
        }
        clearInterval(divSlide); 
        clearTimeout(pauser);
    }     
    </script> 
    </head> 
    <body> 
     
    <div id="main"> 
        <div id="div0">This is Div 1</div> 
        <div id="div1">This is Div 2</div> 
        <div id="div2">This is Div 3</div> 
        <div id="div3">This is Div 4</div> 
    </div> 
     
    <div id="btnContainer"> 
        <button id="l2r" onclick="stopSliding(this.id);swapDiv(1);">Slide Left 2 Right</button>
        <button onclick="stopSliding('stop');">Stop Sliding</button>
        <button id="r2l" onclick="stopSliding(this.id);swapDiv(-1);">Slide Right 2 left</button> 
    </div> 
     
    </body> 
    </html>

  3. #3
    SitePoint Enthusiast Ciwan's Avatar
    Join Date
    May 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi Kalon

    I wasn't planning on buying a windows host this early, but it is so hard to explain things when people can't see what you actually mean

    So I went and bought it, Uploaded my site aaaand here it is.

    Now that you can see the issue, can you please help create the function.

    Thank You.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there are plenty of free web host providers, but that is beside the point.

    When I get to your home page it's not obvious how you want the content to slide or what I have to click to make it slide.

    can you give more specific instructions on how your content is to slide.

  5. #5
    SitePoint Enthusiast Ciwan's Avatar
    Join Date
    May 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To slide content you simply click the [ Next ] or [ Prev ] buttons.

    That slides the content fine, but the issues is it keeps on sliding and I want to stop that with some function.

    If it reaches the end slide I want it to go back to the first slide when Next is clicked.

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I've "butchered" the demo code I posted earlier so that that the original buttons now act as next and prev buttons to slide the content left or right 1 div at a time.

    the demo is hard coded for 4 sliding divs. you can tweak it to make it dynamic so that the script counts how may sliding divs there are and then adjusts the max and min values for currDiv accordingly.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    <!-- 
    #main { 
    overflow: hidden; 
    border: 1px solid black; 
    color: black; 
    text-align: center; 
    position: absolute; top: 30px; left: 50px; 
    background-color: white; 
    width: 200px; 
    height: 200px} 
    #div0 {   
    position: absolute; top: 300px; left: 10px; 
    color: white; 
    background-color: black; 
    width: 200px; 
    height: 200px} 
    #div1 {   
    position: absolute; top: 300px; left: 300px; 
    background-color: green; 
    width: 200px; 
    height: 200px} 
    #div2 {    
    position: absolute; top: 50px; left: 300px; 
    background-color: red; 
    width: 200px; 
    height: 200px} 
    #div3 {    
    position: absolute; top: 300px; left: 600px; 
    background-color: blue; 
    width: 200px; 
    height: 200px} 
    #btnContainer { 
    position: absolute; top: 250px; left: 10px} 
    --> 
    </style> 
    <script type="text/javascript"> 
    var curDiv = -1; 
    var divSlide; 
    var divId; 
    var curLeft = -200; 
    var zedIndex = 0; 
    var pauser; 
     
    function swapDiv(dir) {
        curDiv = curDiv + dir;
        if(curDiv > 3) {curDiv = 0};
        if(curDiv < 0) {curDiv = 3};
        divId = "div"+curDiv; 
        zedIndex = zedIndex + 100; 
        curLeft = curLeft * dir;
        document.getElementById(divId).style.top = 0+"px"; 
        divSlide = setInterval(function() {slideDiv(dir)},30); 
    } 
     
    function slideDiv(dir) {   
        document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through 
        curLeft = curLeft + (1*dir);  
        if(dir == 1 && curLeft > 0)   {  //we have scrolled all the way to the right 
         clearInterval(divSlide); 
         if(curDiv > 3) curDiv = 0; 
         curLeft = -200 * dir; 
        } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
          clearInterval(divSlide); 
          if(curDiv < 0) curDiv = 3; 
          curLeft = 200 * dir; 
        } else {  //keep scrolling to the right 
            document.getElementById(divId).style.left = curLeft+"px";   
        } 
    }
     
    function stopSliding(btn) {
            curLeft = -200;
    }     
    </script> 
    </head> 
    <body> 
     
    <div id="main"> 
        <div id="div0">This is Div 1</div> 
        <div id="div1">This is Div 2</div> 
        <div id="div2">This is Div 3</div> 
        <div id="div3">This is Div 4</div> 
    </div> 
     
    <div id="btnContainer"> 
        <button id="l2r" onclick="stopSliding(this.id);swapDiv(1);">Next</button>
        <button id="r2l" onclick="stopSliding(this.id);swapDiv(-1);">Previous</button> 
    </div> 
     
    </body> 
    </html>


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
  •