CODEWITHSUNDEEP
jqueryhtmlcssjquery-waypoints
Rambo8000
Rambo8000

Reputation: 323

Does a div need to be displayed to be used as a waypoint?

I'm using JQuery waypoints to try and trigger events with the scroll of the mouse. But the page itself isn't scrolling. I'm using "waypoint" divs as triggers since the divs with content in them are not supposed to be scrolling. But the waypoint divs aren't registering currently. So the question is,since the divs themselves don't have scrollbars and I'm just listening for the scroll event, do I need to be showing the waypoint divs with display:block even if they have no content?

Perhaps a look at the markup will be more helpful to understand the problem. Here's the HTML:

<body>
    <div id="container">
        <header>
            <p class="homeLink">Words N' Pics</p>
            <div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
        </header>
        <div id="waypointOne"></div>
        <div id="waypointTwo"></div>
        <div id="waypointThree"></div>
        <div id="waypointFour"></div>
        <div id="slideOne" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideTwo" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideThree" class="slider">
            <div class="sliderPic"><img src="images/Sgt-Bilko.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
        <div id="slideFour" class="slider">
            <div class="sliderPic"><img src="images/ralph.jpg"/></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
    </div>
    <footer>
        <div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
    </footer>
    <div id="menuOverlay" class="menuDiv">
        <ul id="menu">
            <li>Work.</li>
            <li>About.</li>
            <li>Careers.</li>
            <li>Ideas.</li>
            <li>News.</li>
            <li>Events.</li>
            <li>Contact.</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/waypoints.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</body>

Here's the relevant bits of my CSS (please take note, this is only a segment. The rest will be in a fiddle at the end):

#waypointOne{
    position:absolute;
    top:150px;
}

#waypointTwo{
    position:absolute;
    top:250px;
}

#waypointThree{
    position:absolute;
    top:350px;
}

#waypointFour{
    position:absolute;
    top:450px;
}

And the Jquery:

$(function () { // When the page has loaded,
    $('#waypointOne').waypoint(function () {
        alert("Waypoint 1 reached.");
    })
});

$(function () { // When the page has loaded,
    $('#waypointTwo').waypoint(function () {
        alert("Waypoint 2 reached.");
    })
});

$(function () { // When the page has loaded,
    $('#waypointThree').waypoint(function () {
        alert("Waypoint 3 reached.");
    })
});

The specific question is, "Why are the waypoints not getting picked up?" But the broader question is, do divs like this need to be shown on the screen to be targeted by Waypoints (i.e. display:block)? or can they be hidden and simply be used in the background? Here's a fiddle. Note that currently, a click will do what the scroll should be doing. But the scroll should be alerting and it's not.

http://jsfiddle.net/rcJP9/

For some reason the click isn't working in the fiddle. But the full-page divs are supposed slide up to reveal what is behind them.

Upvotes: 0

Views: 126

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

Based on this jsFiddle, I'm going to say that the id anchor points don't register when display none.

How about something like this? Should be virtually invisible, but still hold it's place in the dom...

.visually-hidden { /*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
} 
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

Here is another jsFiddle with that in place. Seems to be working!

Upvotes: 1

Related Questions