CODEWITHSUNDEEP
javascriptjqueryjquery-waypoints
Explicit Brand Design
Explicit Brand Design

Reputation: 158

How to toggle function with jquery waypoint

I want to toggle functions using the jQuery waypoint function, how can I combine these pieces of code to make that happen? (I would be happy with alternative solutions too).

I want to combine this.....

$('#pageborder').waypoint(function(direction) {
  //do something here
}, { offset: 'bottom-in-view' });

With this......

.toggle(function(){
  $('.play', this).removeClass('pausing');
  $('.play', this).addClass('playing');
}, function(){
  $('.play', this).addClass('pausing');
  $('.play', this).removeClass('playing');
});

The end result should be functions getting toggled when the way point is reached.

More info on the JQuery Waypoint plugin here: http://imakewebthings.com/jquery-waypoints/#doc-waypoint

Upvotes: 0

Views: 6871

Answers (3)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

E.B.D., I see you have something working.

If you wanted a slightly more concise toggle action, then you might consider the following :

var $next_btn_containers = $('.next_btn_container, .next_btn_container_static');
$('#pageborder').waypoint(function(dir) {
    $next_btn_containers
        .toggleClass('next_btn_container_static', dir == 'down')
        .toggleClass('next_btn_container', dir == 'up');
}, { offset: 'bottom-in-view' });

By pre-selecting and remembering all members of both classes, execution will be faster - particularly in a large DOM.

The original selector may well simplify, depending on how the elements are initialized.

With a little more thought (and appropriate adjustment of style-sheet directives), then you may be able to simplify things even further by toggling a single "static" class :

var $next_btn_containers = $('.next_btn_container');
$('#pageborder').waypoint(function(dir) {
    $next_btn_containers.toggleClass('static', dir == 'down')
}, { offset: 'bottom-in-view' });

.next_btn_container would thus remain a reliable selector (for other purposes), regardless of the statc/non-static state of the element(s).

Note: Unlike the first version (and your own code), this will not handle two sets of elements toggling in anti-phase, if that's what you have.

Upvotes: 1

Explicit Brand Design
Explicit Brand Design

Reputation: 158

I used this code to make it work, thanks to lucuma for pointing me in the right direction!

$('#pageborder').waypoint(function(direction) {

    if (direction == 'down') $('.next_btn_container').removeClass('next_btn_container').addClass('next_btn_container_static');
    else {
        $('.next_btn_container_static').removeClass('next_btn_container_static').addClass('next_btn_container');
    }
}, { offset: 'bottom-in-view' });

Upvotes: 0

lucuma
lucuma

Reputation: 18339

Here is an example of using the waypoint plugin to do something when the waypoint is reached. In my example I am showing and hiding something based on if the user is scrolling up or down:

Demo: http://jsfiddle.net/lucuma/pTjta/

$(document).ready(function () {
    $('.container div:eq(1)').waypoint(function (direction) {
        if (direction == 'down') $('.toggleme').show();
        else {
            $('.toggleme').hide();
        }
    }, {
        offset: $.waypoints('viewportHeight') / 2

    });
});

Upvotes: 2

Related Questions