CODEWITHSUNDEEP
javascriptphpjquery
Maxxer
Maxxer

Reputation: 91

jquery scroll for dynamic elements

I have a case where i require multiple scroll left/right events, normally i use something like :

<div class="arrow_left" onclick="/* move_left() */">&lt;</div>
<div id="some_container" class="somecontainer">
<div class="item_container" id="item_container">
<span>item 1</span>
<span>item 2</span>
<span>item 3</span>
</div>
</div>
</div>

and in my jquery:

function move_right() {
var leftPos = $('#item_container').scrollLeft();
if (leftPos < 1500) {
$('#item_container').animate({scrollLeft: leftPos + 150});
}
}

But in this case i am using multiple instances of some_container using php foreach and i don't want to define each selector in jquery manually.

is there a way i can solve this problem without using fancy plugins?

thanks max

Upvotes: 0

Views: 43

Answers (2)

Maxxer
Maxxer

Reputation: 91

$('.arrow_left').click(function() {
    var newLeftPos = $(this).next().find('div').scrollLeft();
    console.log(newLeftPos);
    if(newLeftPos >10){
     $(this).next().find('div').animate({scrollLeft: - 150});
    }
    else{
        $(this).next().find('div').animate({scrollLeft: + 150});
    }
});

and same thing for right arrow :)

Upvotes: 0

Felippe Duarte
Felippe Duarte

Reputation: 15131

Made a jsFiddle for better explanation: https://jsfiddle.net/Lpcbq0ko/

<div class="group">
  <div class="arrow_left" onclick="/* move_left() */">&lt;</div>
  <div class="arrow_right">&gt;</div>
  <div id="some_container" class="somecontainer">
    <div class="item_container" id="item_container">
      <span>item 1</span>
      <span>item 2</span>
      <span>item 3</span>
  </div>
  </div>
</div>
<div class="group">
  <div class="arrow_left" onclick="/* move_left() */">&lt;</div>
  <div class="arrow_right">&gt;</div>
  <div id="some_container" class="somecontainer">
    <div class="item_container" id="item_container">
      <span>item 1</span>
      <span>item 2</span>
      <span>item 3</span>
  </div>
  </div>
</div>

$('.group .arrow_right').click(function() {
    $(this).next('.somecontainer').html('update');
  $(this).next('.somecontainer').animate({scrollRight: 150});
});

You can wrap everything in a div that will separate your controls. Then you'll have individual access for each container. In this example I'm updating entire HTML, but, of course, you will do whatever you want.

Upvotes: 1

Related Questions