Waypoints Tutorial

It's easy son

In tutorial.js staat alle JavaScript die van belang is voor volgende waypoints.

In tutorial.css staat het gedrag dat veroorzaakt of overschreven wordt na het activeren van een waypoint

classes die zijn geprefixed met 'wp-' worden toegevoegd in een waypoint-handler in javascript

app.css & app.js is niet belangrijk voor deze oefening.

Zoals je ziet heb ik elk onderwerp in zijn eigen container gestoken, en op die container het betreffende waypoint toegepast zodat je hier al kan zien hoe en wanneer het waypoint aangeroepen wordt.

Ik maak gebruik van twee highlight achtergrondkleuren:

Standaard waypoint id: #basic

JavaScript:

$('#basic'1).waypoint({
    handler: function(){

        // Eigen code2
        // bvb. $(this.element3).addClass('active');

    }
});

Actief:

basic waypoint

1Element selecteren zoals normaal bij jQuery

2Binnen de handlerfuntie wordt alle gewenste functionaliteit geschreven

3this.element verwijst naar het geselecteerde element, dus '#basic' in dit geval, je kan hier eender welk element selecteren met jQuery

Waypoint met controle op scrollrichting id: #basic_direction

JavaScript:

$('#basic_direction').waypoint({
    handler: function(scrolldirection1){

        if(scrolldirection == 'down'){2
            // Eigen code3
        }else if(scrolldirection == 'up'){
            // Eigen code3
        }

    }
});

Actief:

basic waypoint

1Verwacht argument instellen, hoe je deze variabele noemt is van geen belang, maar maak het overzichtelijk voor jezelf. Deze variabele wordt automatisch ingevuld met een 'string' (tekstinhoud), zijnde 'up' of 'down', bij het passeren van de waypoint

2Controle op 'scrolldirection' met if/elseif statement, in principe is if/else ook voldoende

3Functionaliteit invullen voor respectievelijk 'down' en 'up'

Waypoint op onderkant scherm id: #offset_bottom

JavaScript:

$('#offset_bottom').waypoint({
    handler: function(){
        // Eigen code
    },1
    offset: 'bottom-in-view'2
});

Actief:

bottom waypoint

1Comma niet vergeten, 'offset:' staat op hetzelfde niveau als 'handler:'

2Offsetwaarde 'bottom-in-view', hier kan je ook numerieke waarden en functies invoeren

Waypoint met verschuiving (positief: 100px) id: #offset_pos

JavaScript:

$('#offset_pos').waypoint({
    handler: function(){
        // Eigen code
    },
    offset: 1001
});

Actief:

pos offset waypoint

1Numerieke waarde invoeren, niet definiƫren met 'px'

Waypoint met verschuiving (negatief: -100px) id: #offset_neg

JavaScript:

$('#offset_neg').waypoint({
    handler: function(){
        // Eigen code
    },
    offset: -1001
});

Actief:

neg offset waypoint

1Getalwaarde voorafgegaan door minteken

Waypoint met offset uit functie id: #offset_function

JavaScript:

function getOffset(){
    var offset = 2001;
    return offset;2
}

$('#offset_function').waypoint({
    handler: function(){
        // Eigen code
    },
    offset: getOffset()3
});

Actief:

offset waypoint

1Hier kan je bvb de hoogte van een element ophalen, de mogelijkheden zijn eindeloos

2Return wijst erop dat de functie de berekende waarde moet doorgeven

3Gewenste functie invoeren, eindig met '()', dit betekent dat de functie onmiddelijk moet uitgevoerd worden

Refresh

Om te testen bij grotere elementen:

Maak elementen groter dan viewport

Indien je iets zoals dit wil doen in JavaScript waardoor elementen groter worden in de hoogte, maar je pagina niet gerefreshed wordt, kan dit problemen opleveren. De offset waardes in je waypoints kloppen niet meer voor de nieuwe hoogtes van herschaalde elementen. Om deze waarden te herberekenen moet je volgende regel code invoeren:

Waypoint.refreshAll();

In zijn context kan dit er bijvoorbeeld als volgt uitzien:

var grow = true;

$('#grow').click(function(){
    if(grow){
        $('.example').css({'height':'125vh'});
        grow = false;
    }else{
        $('.example').css({'height':'auto'});
        grow = true;
    }

    Waypoint.refreshAll();
});

Indien er zaken niet duidelijk zijn of ontbreken: Gert Braeckman op facebook.

meme

Kijkt keer op e groter scherm moatje.