0

I have a single page (scrolling) html. My divs( home and home2 ) looks like the code below. Both having height 100% each. I want to apply some CSS to the second div(home2) using jQuery, only when it is visible to the user in the browser. Please suggest me a way to do so. 

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
        <h1 class="home2head">Heading 1</h1>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
        <h1 class="home2head">Heading 1</h1>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

I don't know how to use the $(window).scrollTop() properly, if it is a solution to my problem.

arshad
  • 895
  • 6
  • 29
  • 2
    I answered a similar question to show a div after the user has passed the one above it on the screen. could be applied to do the job for you -- http://stackoverflow.com/questions/25660289/show-hide-div-when-passed-the-other-div/25661103#25661103 – Tasos Oct 02 '14 at 12:50
  • You could check out this little plugin: https://github.com/zeusdeux/isInViewport – Rvervuurt Oct 02 '14 at 12:52
  • _"when it has focus"_ and _"when it is visible in the browser."_ are two very different things. Focus usually implies and action such as selection or activation. This is not true for visibility though. Just to clear up any confusion, which one of the two are you trying to use the CSS for? – War10ck Oct 02 '14 at 13:05
  • "when it is visible in the browser" @War10ck.. should i modify the question? – arshad Oct 02 '14 at 13:09
  • @Tasos : I am new to jQuery, I did not completely understand your code. Can i do this, var r = $(document).scrollTop(); var t = $('#home2').offset().top; var y = $('#home2').height(); var u = t+y; if(r>u){ alert("hai"); } – arshad Oct 02 '14 at 15:01
  • 1
    Check the demo i did for you. Make sure the window on the bottom right is resized to about a line off the page content i.e (make the window small until you see about a line off the bottom), then scroll. You will see as page 1 rolls of the screen, page2 turns blue. You can delete the (+300) if you want and enlarge the window a bit to see what happens. -- http://jsfiddle.net/4xx2vcg3/ – Tasos Oct 02 '14 at 17:11

2 Answers2

1

Maybe you should use mousein and mouseleave, i think that because have many contents inside your div the focusin and focusout have an difficult area to get focus, you can too add some checks as is visible or what you want to do

http://jsfiddle.net/mmue2hcd/

Html

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

Javascript/Jquery

$(document).ready(function () {

    $('#home2').mouseenter(function () {
        $(this).addClass('cssfocused');
    })

    $('#home2').mouseleave(function () {
        $(this).removeClass('cssfocused');
    });


});

CSS .cssfocused { background-color: red; }

douglasjam
  • 113
  • 1
  • 9
  • Good thought, but has a problem.. the mouseenter function will work only when the mouse is over the div.. if the user is scrolling to the div using navs the function wont work.. – arshad Oct 02 '14 at 13:17
0

could do something like this:

$(document).on('scroll', function() {
    var $element = $(".elementClass");
    if (isScrolledIntoView($element))
        $element.addClass('someclass');
    else
        $element.removeClass('someclass');
})

then check its position on the window, as described in this post: https://stackoverflow.com/a/488073/2414886

example: http://jsfiddle.net/dmv1cty5/3/

Community
  • 1
  • 1
Sarah Bailey
  • 1,434
  • 12
  • 23