1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Slider/rotator problem

Discussion in 'jQuery' started by LS5000, Jan 4, 2015.

0
  1. #1
    Hi,

    First, what I want to say is I am very new to JavaScript.

    The rotation I made is rather buggy. When I switch between the slides, a white background appears and keeps flashing. This, I believe, happens when there is a switch between first and the last slide and vice versa. The other problem is, that when I switch, the rotation keeps on going, which I don't want.
    Basically, what I want to do is to rotate it by default, then when I switch, I want it to wait 4000ms, then keep on rotating. And I need to solve that bug with white background showing/flashing. Any help is much appreciated. But since I am very new to JS, if you have the time, please make it as clear as you possibly can, because I don't just need it to work, but I want to understand every line of the code and go from there.
    Here is the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hopefullybetterslider</title>

<style type="text/css">

.imgcontainer{
   
   position:relative;
   width:500px;
   height:300px;
   box-shadow: 1px 1px 3px #333333;
   border:solid 1px #000;
   }

.img1{
   position:absolute;
   width:500px;
   height:300px;
   background-color:#CCC;
   

   
   }

.img2{
   
   position:absolute;
   width:500px;
   height:300px;
   background-color:#999;

   
   }
   
.img3{
   
   position:absolute;
   width:500px;
   height:300px;
   background-color:#666;

   
   }
   

.switch1{
   position:absolute;
   top:-12px;
   right:10px;
   background-color:yellow;
   padding:5px;
   display:block;
   
   }   
   
.switch2{
   position:absolute;
   top:-12px;
   right:80px;
   background-color:yellow;
   padding:5px;
   display:block;
   
   }
   
.switch3{
   position:absolute;
   top:-12px;
   right:150px;
   background-color:yellow;
   padding:5px;
   display:block;
   
   }       

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function(){
    function rotate(){
     
      $('.imgcontainer div').last().fadeOut(500,function(){
       
        $(this).insertBefore($('.imgcontainer div').first()).show();
       
        });
       
      }
       
     setInterval(function(){
         
        rotate();
      },4000);
       
      $('.switch1').click(function(){
         
        $('.imgcontainer div').fadeOut(200,function(){
           
           
          $('.img1').fadeIn(200);
           
          });
         
       
        });
         
        $('.switch2').click(function(){
         
        $('.imgcontainer div').fadeOut(200,function(){
           
         
          $('.img2').fadeIn(200);
           
          });
         
       
        });
         
        $('.switch3').click(function(){
         
        $('.imgcontainer div').fadeOut(200,function(){
           
         
          $('.img3').fadeIn(200);
           
          });
         
       
        });
         
         
     
    });

</script>

</head>

<body>

<div class="imgcontainer">

  <div class="img1">texttexttexttexttexttexttexttex<br>ttexttexttexttexttexttexttexttext</div>
  <div class="img2">text2text2text2text2text2text2text2<br>text2text2text2text2text2text2</div>
  <div class="img3">text3text3text3text3text3text3text3<br>text3text3text3text3text3text3</div>
 
  <p class="switch1">switch1</p>
  <p class="switch2">switch2</p>
  <p class="switch3">switch3</p>
 

</div>


</body>
</html>
    Code (markup):
     
    LS5000, Jan 4, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Well, here's a new take - it fixes most of the problems, except the stop-then-continue problem with clicking on the switch-buttons:
    
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>hopefullybetterslider</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
  <style type="text/css">
  * { padding: 0; margin: 0;}
  #imgcontainer {
  position:relative;
  width:500px;
  height:300px;
  box-shadow: 1px 1px 3px #333333;
  border:solid 1px #000;
  margin: 20px auto;
  }

  ul {
  list-style-type: none;
  width: 100%;
  }

  #imglist_1 li {
  display: block;
  position:absolute;
  width:500px;
  height:300px;
  background-color:#CCC;
  text-align: center;
  }
  #imglist_1 #img_2 {
  background-color: #ddd;
  }
  #imglist_1 #img_3 {
  background-color: #eee;
  }

  #switchlist_1 li {
  position:absolute;
  bottom: -50px;
  right:10px;
  background-color:yellow;
  padding:5px;
  }  
  #switchlist_1 li#switch_2{
  right:80px;
  }
  #switchlist_1 li#switch_3{
  right:150px;
  }   
  </style>

  <script type="text/javascript">
  $(document).ready(function(){
  $('#imglist_1 li').not('#img_1').hide();

  function rotate(){
  var currentItem = $('#imglist_1 li:visible').attr('id');
  var getIDnum = currentItem.split('_');
  $('#'+currentItem+'').hide().next('li').show();
  if (getIDnum[1] == $('#imglist_1 li').length) {
  $('#'+currentItem+'').hide().parent('ul').find('li:first-child').show();
  }
  };

  setInterval(function(){
  rotate();
  },4000);


  $('#switchlist_1 li').click(function(){
  var imgID = $(this).attr('id').split('_');
  $('#imglist_1 li').not('#img_'+imgID[1]+'').hide();
  $('#img_'+imgID[1]+'').show();
  });

  });

  </script>
  </head>
  <body>
  <div id="imgcontainer">
  <ul id="imglist_1">
  <li id="img_1">TEXT 1</li>
  <li id="img_2">TEXT 2</li>
  <li id="img_3">TEXT 3</li>
  </ul>
  <ul id="switchlist_1">
  <li id="switch_1">Switch 1</li>
  <li id="switch_2">Switch 2</li>
  <li id="switch_3">Switch 3</li>
  </ul>
  </div>
  </body>
</html>
    Code (markup):
    I redid a lot of the code, especially the markup - also, I've reconfigured some of the CSS, and generally made it a bit more compact and easier to read while developing.
     
    PoPSiCLe, Jan 5, 2015 IP
  3. Alexstorm

    Alexstorm Greenhorn

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    PoPSiCle,

    I like it. I played around with the image options and jqueryui slide. I am sure this is pretty straight forward modification info, but thought I would just post it:

    Notice the auto function fades the back image and the button function does not.

    
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>hopefullybetterslider - with images links and sliding</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <style type="text/css">
  * { padding: 0; margin: 0;}
  #imgcontainer {
  position:relative;
  width:960px;
  height:540px;
  box-shadow: 1px 1px 3px #333333;
  border:solid 1px #000;
  margin: 20px auto;
  }
  ul {
  list-style-type: none;
  width: 100%;
  }
  #imglist_1 li {
  display: block;
  position:absolute;
  width:960px;
  height:540px;
  background-color:#CCC;
  background-image:url('http://cdn1.coresites.mpora.com/twc/wp-content/uploads/2014/03/Afan-Bike-park.jpg');
  background-repeat:no-repeat;
  text-align: center;
  }
  #imglist_1 #img_2 {
  background-color: #ddd;
    background-image:url('http://www.star-telegram.com/incoming/3awpk6/picture3780894/ALTERNATES/FREE_960/AW7Uk.So.58.jpeg');
  background-repeat:no-repeat;
    }
  #imglist_1 #img_3 {
  background-color: #eee;
    background-image:url('http://static.digitalconcerthall.com/cms/thumbnails/960x540/images/concert/100410-Kozena.jpg');
  background-repeat:no-repeat;
}

  #switchlist_1 li {
  position:absolute;
  bottom: -50px;
  right:10px;
  background-color:yellow;
  padding:5px;
  }
  #switchlist_1 li#switch_2{
  right:80px;
  }
  #switchlist_1 li#switch_3{
  right:150px;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
  $('#imglist_1 li').not('#img_1').hide();
  function rotate(){
  var currentItem = $('#imglist_1 li:visible').attr('id');
  var getIDnum = currentItem.split('_');
  $('#'+currentItem+'').fadeOut(1000).next('li').show("slide", {direction: 'right'},1000);
  if (getIDnum[1] == $('#imglist_1 li').length) {
  $('#'+currentItem+'').hide().parent('ul').find('li:first-child').show("slide", {direction: 'right'},1000);
  }
  };
  setInterval(function(){
  rotate();
  },4000);
  $('#switchlist_1 li').click(function(){
  var imgID = $(this).attr('id').split('_');
  $('#imglist_1 li').not('#img_'+imgID[1]+'').show("slide", {direction: 'right'},1000);
  $('#img_'+imgID[1]+'').show("slide", {direction: 'right'},1000);
  });
  });
  </script>
  </head>
  <body>
  <div id="imgcontainer">
  <ul id="imglist_1">
  <li id="img_1">TEXT 1</li>
  <li id="img_2">TEXT 2</li>
  <li id="img_3">TEXT 3</li>
  </ul>
  <ul id="switchlist_1">
  <li id="switch_1">Switch 1</li>
  <li id="switch_2">Switch 2</li>
  <li id="switch_3">Switch 3</li>
  </ul>
  </div>
  </body>
</html>
    HTML:
    Also noticed that the switch buttons fail with the error:

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check 
    https://xhr.spec.whatwg.org/
    HTML:
    I tried fixing it with direct click functions for each button, but still something is wrong. Do you have to declare each button as it's own div?

    ===

    Photo credits in case you are interested:

    http://totalwomenscycling.com/mountain-biking/mountain-biking-events/where-to-ride-afan-mtb-trails-21517/2/
    http://www.star-telegram.com/living/indulge/indulge-getting-around/article3905976.html
    https://www.digitalconcerthall.com/en/concert/318
     
    Last edited: Feb 12, 2015
    Alexstorm, Feb 12, 2015 IP