Question

I have a pagination like this

<div> ( =400px )
<ul> ( =2000px )
<li>1<div>1</div></li>
<li>2<div>2</div></li>
<li>3<div>3</div></li>
..
</ul>
</div>

The pagination goes up to 100 and is about 2000px width. However, the div is only 400px width with overflow:hidden This means only a certain amount of li is visible. I also have two buttons do do animation left and right, this way a visitor can ‘slide’ left and right trought the pagination:

$(".right").live('click', function(){
  $(ul).animate({"left": "-=140px"}, "fast");
});

$(".left").live('click', function(){
  $(ul).animate({"left": "+=140px"}, "fast");
});

The problem is that at a certain point the ‘active'(Class) pagination number is out of sight (the reason is not important in this question)

I would like to have control over the li.active trough whatever Jquery event or on document ready. I would like the li.active to be visible in 400px div all the time. So that means the ul would move left or right relative to the li.active so that the li.active will not be in the part that is ‘hidden’ (overflow:hidden)

I hope my question is clear, I cant post all the code do to its big size. (it would only complicate things..)

Answer 1

Ok, my only guess is add a css rule on “active” class with position:absolute;

EDIT :

Try this solution here, if it’s what you’re looking for. I hope it helps!