How to show an div when other div is not visible in the screen using jquery?

Question

I need to show the div#myDiv-1 when the div#myDiv-2 is not visible in the screen using jquery

When the page load the div#myDiv-2 is visible, then when the visitor scroll down and the div#myDiv-2 is not visible anymore the div#myDiv-1 is show up.

Sorry I don't post any code but I don't know how to start.

visible, like in display none, or visible like not visible on the users screen right now ? — adeneo, May 23 '13 at 08:28

Rohan Kumar · Answer 1 · 2013-05-23T09:59:31.733

0

try,

$(function(){
    $('div#myDiv-2').show();
    $('div#myDiv-1').hide();
    $(window).scroll(function(){
       if($('div#myDiv-2').is(":visible"))
       {
           $('div#myDiv-1').show();// shows the first div
           $('div#myDiv-2').hide();// hide the second div
       }
    });
});

Fiddle

edited May 23 '13 at 09:59

answered May 23 '13 at 08:25

Rohan Kumar

40,431
11
76
106

you could use `.is(":visible")` instead, as checking for css properties is not really ideal as there are 2 ways to hide/show elements (`display` and `visibility`) – painotpi May 23 '13 at 08:31
@badZoke - `visibility: hidden` or `opacity: 0` is considered visible when using `.is(":visible")`, so that does'nt do much good ? – adeneo May 23 '13 at 08:34
I can't get it working. Should I put the firt 2 lines in a `$(document).ready(function()` function? – Jaso2970 May 23 '13 at 09:22
@Jaso2970 I don't know what you have tried but I tested it and it works. Check my answer again with the working fiddle. – Rohan Kumar May 23 '13 at 10:01
@RohanKuma I checked on fiddle and it is not working right. The div-1 is shown at the very first step of the scrolling, not when div-2 is completely hidden. Since this will be hard to explain, I've made this 30secs video: http://www.screencast.com/t/wXc1wBm94t4T. Look that the div is shown even when div-2 is in the screen. – Jaso2970 May 23 '13 at 10:27
@Jaso2970 Read this http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – Rohan Kumar May 23 '13 at 10:53

score 0 · Answer 2 · answered May 23 '13 at 08:25

0

You could do this,

$(window).scroll(function(){
    if(!$("#myDiv-2").is(":visible")){
         $("#myDiv-1").show();
    }
});

answered May 23 '13 at 08:25

painotpi

6,894
1
37
70

score 0 · Answer 3 · edited May 23 '13 at 08:29

0

You can bind the hide event:

$('#myDiv-2').on('hide',function(){
    $('#myDiv-1').show();
});

edited May 23 '13 at 08:29

answered May 23 '13 at 08:28

0x1gene

3,349
4
29
48

1

Would be fun to see if you can get that working in a fiddle ? – adeneo May 23 '13 at 08:29
Will this work when the element is hidden by doing scrolling?? – Jaso2970 May 23 '13 at 08:39
1

@Jaso2970 - I think you should answer my comment on the question? By hidden, do you mean it just gets scrolled of the screen, and you can no longer see it on your screen, or are you actually hiding it with code ? – adeneo May 23 '13 at 08:40
@adeneo When the div is scrolled off the screen (not hiding with code) – Jaso2970 May 23 '13 at 08:42
@Jaso2970 so it is not 'hidden' it's just off-sceen this code wont work sorry ... – 0x1gene May 23 '13 at 08:43

score 0 · Answer 4 · answered May 23 '13 at 09:14

0

To make one element appear when another element is scrolled of the screen, you can do:

$(window).on('scroll', function() {
    var y  = $(window).scrollTop(),
        e1 = $('#myDiv-1'),
        e2 = $('#myDiv-2'),
        vi = e1.offset().top < (y + $(window).height()) && (e1.offset().top + e1.height()) > y;

    e2.toggle(!vi);
});

FIDDLE

answered May 23 '13 at 09:14

adeneo

312,895
29
395
388

I get the error `TypeError: 'undefined' is not a function (evaluating '$(window).on') Line: 88` Line 88 is the last line of your code. What am I missing here? – Jaso2970 May 23 '13 at 10:38
@Jaso2970 - What version of jQuery, it's 2.0 now ? – adeneo May 23 '13 at 15:00

How to show an div when other div is not visible in the screen using jquery?

4 Answers4