Javascript Remainder

Naast de grote javascript functie zijn er nog een paar kleine functie hieronder vermeld. Script bestand

##Menu#

$('.nav-menu-btn').click(function(){
    $('.navleft-dropdown').slideToggle(100); 
});

$('.nav-menu-btn_2').click(function(){
    $('.navleft-dropdown').slideToggle(100); 
});

De bovenste scrip zocht voor een dropdown effect van elementen in de header.

##PopUp# $('#comments_btn').click(function(){ $('#reaties_container').slideToggle(100); });

Deze zorgt voor een en dropdown effect voor#reaties_container in de popUp.

##Spore# $("#spore_container").hide();

#spore_container gaat over de breedt van de window. Door zijn position:fixed; zal deze altijd op zen plaats blijfen ook al word er gescrold. Door .hide(); op #spore_container te gebruiken word de display op none gezet in de css.

$('#btn_spore').click(function(){
    $('#spore_container').stop().animate({width: 'toggle'}, 130);
});

#spore_container moet vertical uitklappen. Dit kan niet met .slideToggel gedaan worden. Hierdoor word er gebruik gemaakt van een animatie die de CSS aanpast. De is nog een .stop() in geplaatst. Dit voorkomt dat als er meerdere malen opgeklikt word de animatie maar eenkeer word uitgevoerd.

Dropdown in landing page#

In de landing page zijn verschillende vakken te zien per categorie. Deze categorieën hebben elk hun eigen dropdown met subcategorieën.

$('.categoriee ul').hide();

De dropdown word hier op display:none; gezet met behulp van .hide().

$('.dropdown_2').each(function(idx){
    $(this).click(function(evt){
        evt.preventDefault();
        $(evt.target).next().slideToggle();
    })
})

Met deze "for loop" krijgen alle dropdowns de functie .slideToggle. Als er op een button word geklikt worden alle default functie van .dropdown_2 uitgezet en een nieuwe event word er aan gegeven. Dat is .slideToggle.

De tekst van hierboven zal nog in het engels vertaald worden.