CODEWITHSUNDEEP
jquery
Cafecorridor
Cafecorridor

Reputation: 1609

Implemented a JQuery Slider on my own - Not very impressed

I'm new to both Javascript and JQuery though I have prior experience in J2ee/C/C++. I created a JQuery slider on my own. Here is the entire source code -

<!DOCTYPE html>
<html>
  <head>
    <title>Experimentation</title>
    <style type="text/css">

#container {
overflow:hidden;
position: relative;
height: 200px;
width: 800px;
background-color: white;
float: left;
}   

#slider {
width: 876px;
height: 200px;
background-color:black;
margin: 0 auto;
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
  width: 200px;
  height: 200px;
  background-color: gray;
  z-index: 10000;
  position: relative;
  float: left;
  overflow:hidden;
  }


.information1, .information2, .information3, .information4, .information5, .information6, .information7, .information8 {
  position: absolute;
  width: 200px;
  height:200px;
  background-color: black;
  opacity: 0.2;
  filter:alpha(opacity=40);
  top: 170px;
  color: #FFF;
}

.information1 h3, .information2 h3,.information3 h3, .information4 h3, .information5 h3, .information6 h3, .information7 h3, .information8 h3   {
 margin: 3px 3px; 
 text-align: center;
}

.leftbutton img {
cursor:pointer;
float:left;
}

.rightbutton img {
cursor:pointer;
float: right;
}

    </style>
    <script type="text/javascript" src="jquery-1.4.js"></script>
    <script type="text/javascript">
      var topInitial = "0";
      var topAfter = "170px";
      var sliderPos=1;
      var timeDuration= 1;

      $(function() {

      $(".box1").mouseenter(function() {    
      $(".information1").animate({
      top: topInitial }, "normal"); });

      $(".box1").mouseleave(function() {
      $(".information1").animate({
      top: topAfter }, "normal"); });


      $(".box2").mouseenter(function() {    
      $(".information2").animate({
      top: topInitial }, "normal"); });

      $(".box2").mouseleave(function() {
      $(".information2").animate({
      top: topAfter }, "normal"); });

       $(".box3").mouseenter(function() {   
      $(".information3").animate({
      top: topInitial }, "normal"); });

      $(".box3").mouseleave(function() {
      $(".information3").animate({
      top: topAfter }, "normal"); });

       $(".box4").mouseenter(function() {   
      $(".information4").animate({
      top: topInitial }, "normal"); });

      $(".box4").mouseleave(function() {
      $(".information4").animate({
      top: topAfter }, "normal"); });

      $(".box5").mouseenter(function() {    
      $(".information5").animate({
      top: topInitial }, "normal"); });

      $(".box5").mouseleave(function() {
      $(".information5").animate({
      top: topAfter }, "normal"); });

      $(".box6").mouseenter(function() {    
      $(".information6").animate({
      top: topInitial }, "normal"); });

      $(".box6").mouseleave(function() {
      $(".information6").animate({
      top: topAfter }, "normal"); });

      $(".box7").mouseenter(function() {    
      $(".information7").animate({
      top: topInitial }, "normal"); });

      $(".box7").mouseleave(function() {
      $(".information7").animate({
      top: topAfter }, "normal"); });

      $(".box8").mouseenter(function() {    
      $(".information8").animate({
      top: topInitial }, "normal"); });

      $(".box8").mouseleave(function() {
      $(".information8").animate({
      top: topAfter }, "normal"); });



      $(".leftbutton img").click(function() {   

      if(sliderPos == 1)
      {
      $(".box1").animate({
      marginLeft: "-200px" },timeDuration);
      }
      else if(sliderPos == 2)
      {
       $(".box2").animate({
      marginLeft: "-200px" }, timeDuration);
      }
      else if(sliderPos == 3)
      {
       $(".box3").animate({
      marginLeft: "-200px" }, timeDuration);
      }
      else if(sliderPos == 4)
      {
       $(".box4").animate({
      marginLeft: "-200px" }, timeDuration);
      }
      else
      {
      return;
      }
      sliderPos++;
      });


      $(".rightbutton img").click(function() {

      if(sliderPos == 2)
      {
      $(".box1").animate({
      marginLeft: "+=200px" }, timeDuration); 
      }
      else if(sliderPos == 3)
      {
      $(".box2").animate({
      marginLeft: "+=200px" }, timeDuration);
      }
      else if(sliderPos == 4)
      {
      $(".box3").animate({
      marginLeft: "+=200px" }, timeDuration);
      }
      else if (sliderPos == 5)
      {
      $(".box4").animate({
      marginLeft: "+=200px" }, timeDuration);
      }
      else
      {
      return;
      }
      sliderPos--;

      });

     });
    </script>
  </head>

  <body>
  <div id="slider">
  <span class="leftbutton"><img src="left.gif"/></span>

  <span id="container">
  <span class="box1">
  <div class="information1">
  <h3> A for Apple</h3>
  <p> You have never seen something like this before!</p>
  </div>
  </span>

  <span class="box2">
  <div class="information2">
  <h3> B for Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box3">
  <div class="information3">
  <h3> C for Cat </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box4">
  <div class="information4">
  <h3> D for Dog</h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>


  <span class="box5">
  <div class="information5">
  <h3> E for Elephant </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

   <span class="box6">
  <div class="information6">
  <h3> F for Frog </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box7">
  <div class="information7">
  <h3> G for Grasshopper </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box8">
  <div class="information8">
  <h3> H for Horny ;) </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>
  </span>

  <span class="rightbutton"><img src="right.gif"/></span>
  </div>
  </body>
</html>

Right now my focus is on the functionality. I'll take care of the design aspects later.So my questions are-

  1. Is this the right way to implement a slider? I've just used common sense and some knowledge of JQuery/CSS to create this. Could I have done it in a better way? If yes, how?

  2. When I change the value of 'timeDuration' in my code to 'slow', the sliding is not smooth, as in, there is white patch that appears when the element moves to the left or right. How does one rectify this issue?

  3. When I first reload the page and click on the left arrow 4 times, where do the elements get moved? How do they relocate on the page? This concept is unclear to me.

HELP!

Edit: None find this slider good enough? I need help! :(

Upvotes: 0

Views: 153

Answers (1)

Stefan
Stefan

Reputation: 5672

I started rewriting it for you but I don´t have the time to finish it right now.

However, you should know that elements can share class and that jQuery can be used to bind events to mutiple elements at once.

This for example binds both the mouseenter and mouseleave events to all elements with the "box" class and animates all elements with the class "information" that´s located within the current element, that is the "box" element;

$('.box').hover(
    function() {
        $(this).find('.information')
            .animate({top: topInitial }, "normal");
    },
    function() {
        $(this).find('.information')
            .animate({top: topAfter }, "normal");
    }
);

See jQuery API documentation for chainability, hover() and find().

Upvotes: 1

Related Questions