DIV shown slightly off screen

Question

I'm using this html & jquery I found on another question and it works well, with one exception.

It shows and hides divs and this works well unless the div is near the bottom of the screen then it is shown but part of it is off screen.

Is there anyway to update this code so if the DIV is partly off screen the page is automatically scrolled so it comes into view ?

HTML :

<ul id="list">
    <li>
        <a href="#" class="togglelink">America</a>
        <div class="toggle" style="display: block;">
            <p>America - USA - the States</p>
        </div>
    </li>
    <li>
        <a href="#" class="togglelink">Brazil</a>
        <div class="toggle" style="display: block;">
            <p>Brazil - Federative Republic of Brazil</p>
        </div>
    </li>
</ul>

JS :

$(document).ready(function () {
    $('.toggle').hide();
    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('slow');
        elem.toggle('slow');
    });
});

Obviously any other div that is shown and isn't off screen shouldn't be affected.

many thanks:-D

score 1 · Accepted Answer · answered Nov 25 '13 at 10:22

1

You can determine the position of a div container by its y-value and the height. So you can determine when it's off screen. Then you might want to add a parallax scrolling http://wedesignpixel.com/best-jquery-parallax-scrolling-tutorials/

answered Nov 25 '13 at 10:22

Schnodderbalken

3,257
4
34
60

It may not be beautiful but of course it works. Jquery uses plain Javascript underlying. You may check this out: http://stackoverflow.com/questions/13238099/viewport-size-and-scrolling – Schnodderbalken Nov 25 '13 at 15:01

score 1 · Answer 2 · answered Nov 25 '13 at 10:36

1

Using css you can adjust the position of the div according to your requirements so that it dosen't affect your other div's

answered Nov 25 '13 at 10:36

kirk

232
1
2
10

DIV shown slightly off screen

2 Answers2