CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jonattan Davelaar
Jonattan Davelaar

Reputation: 83

Jquery horizontal slide based on div width

I have jquery script where you can click a left and right button and it will scroll horizontally to show more content.

The content that needs to be scrolled are in a div with a width of 1296px, but i want to set my jquery code to automatically get the width of the div and when you press on one of the left or right scroll button it will scroll exactly 1296px.

I want to do it this way because I need to later on optimize the design for all screen size and this would be the easier way.

My code:

    var $item2 = $('div.group'), //Cache your DOM selector
    visible2 = 1, //Set the number of items that will be visible
    index2 = 0, //Starting index
    endIndex2 = ( $item.length ); //End index

$('#arrowR').click(function(){
      index2++;
      $item2.animate({'left':'-=1296px'});
});

$('#arrowL').click(function(){
    if(index2 > 0){
      index2--;            
      $item2.animate({'left':'+=18.5%'});
    }
});

Upvotes: 1

Views: 209

Answers (3)

Lajos Arpad
Lajos Arpad

Reputation: 76564

This Javascript should work:

    var $item2 = $('div.group'), //Cache your DOM selector
    visible2 = 1, //Set the number of items that will be visible
    index2 = 0, //Starting index
    endIndex2 = ( $item2.length ); //End index
    var w = $("#group").width();

$('#arrowR').click(function(){
      index2++;
      $item2.animate({'left':'-=' + w + 'px'});
});

$('#arrowL').click(function(){
    if(index2 > 0){
      index2--;            
      $item2.animate({'left':'+=' + w + 'px'});
    }
});

Check this fiddle. Basically we calculate the width initially to not do the same thing repeatedly and the reuse it whenever we need it.

Upvotes: 1

Alvin Pascoe
Alvin Pascoe

Reputation: 1209

I've created a fiddle that I think solves your problem:

http://jsfiddle.net/77bvnw3n/

What I did was to create another variable (called width) which on page load, dynamically gets the width of the container.

var width = $('.group-container').width(); //Container Width

This variable is also reset whenever the Next or Previous buttons are pressed (in case the window has been resized since the page loaded).

 $('#arrowR').click(function(){
   index2++;

   //recheck container width
   width = $('.group-container').width();

   $item2.animate({'left':'-=' + width + 'px'});
});

Take a look and let me know if it helps.

Note: I replaced the 'Next' and 'Previous' images with coloured boxes in my Fiddle and I think you also had a typo in your code, should 

endIndex2 = ( $item.length )

be changed to:

endIndex2 = ( $item2.length )

Upvotes: 0

Muhammad Abdul-Rahim
Muhammad Abdul-Rahim

Reputation: 2010

Why not get the width of the visible container first, and then use that value later? Quick example:

var width = $('container').width();

And then during animations:

var left = $item2.css('left') + width;
$item.animate({'left',left});

As a note, innerWidth and outerWidth may be more beneficial than just width depending on how you've set everything up, so if values aren't quite right take a look at those documents.

Upvotes: 0

Related Questions