CODEWITHSUNDEEP
jquery
Clement Ckh
Clement Ckh

Reputation: 191

Show overflow:hidden DIVS on click

I have seen similar questions posted here but I can't seem to find the right one for my desired approach. Probably cause I have minimal knowledge on jQuery.

Basically this is the case. I have a page containing 10 DIVS, say #page1 to #page10. I set overflow to hidden so only the first DIV, #page1 is shown on viewport. Is there a way to show the consecutive next and previous DIV on click .. say to have a "previous" and "next" link somewhere?

edit

My original idea was to have DIV overflow hidden and scroll to the DIV but found that the solution given by @Steve is what I needed. For overflow hidden solution, a method was explained by @VisioN.

Upvotes: 0

Views: 989

Answers (3)

VisioN
VisioN

Reputation: 145438

Well, if I understood correctly, you need to have a look at scrollIntoView() method.

As you get from the title it scrolls the element into view. It is quite basic and is supported even by IE6.

DEMO: http://jsfiddle.net/8D2jB/

Upvotes: 0

Steve
Steve

Reputation: 3080

Firstly you said overflow:hidden..... Do you actually mean Visibilily:hidden or Display:none?

I've made a example using display none.

http://jsfiddle.net/4HpXz/4/

Doesn't currently handle when you click "next" on already the last div but you could either hide the next link or make it clever enough to not hide the last div if you click next for example

JS

$(function(){

    $('.next').click(function(){
        $('.page.show')
            .removeClass('show')
            .next()
            .addClass('show');   
    });

    $('.prev').click(function(){
        $('.page.show')
            .removeClass('show')
            .prev()
            .addClass('show');   
    });

});

HTML

<div class="page show">Page1</div>
<div class="page">Page2</div>
<div class="page">Page3</div>
<div class="page">Page4</div>
<div class="page">Page5</div>
<div class="page">Page6</div>
<div class="page">Page7</div>
<div class="page">Page8</div>
<div class="page">Page9</div>
<div class="page">Page10</div>​

CSS

.page{
    display: none;
}
.show{
    display: block;
}
​

Upvotes: 1

The System Restart
The System Restart

Reputation: 2881

You can make slide effect to those div.

For example:

var firstpage = $('#container div#page1'), 
      pgwidth = firstpage.outerWidth();

$('.prevButton').on('click', function() {
  firstpage.animate({
     'margin-left' : '-=' + pgwidth + 'px' // sliding the first div amount of its outerWidth to left
  },300);
});


$('.prevButton').on('click', function() {
  firstpage.animate({
     'margin-left' : '+=' + pgwidth + 'px' // sliding the first div amount of its outerWidth to right
  },300);
});

Upvotes: 0

Related Questions