voeg element toe als scherm kleiner is dan

Door Loek Lemmens op 09-11-2018 14:29

1.987 views

Met jQuery wil ik een element toevoegen aan de body, dit mag gebeuren wanneer het scherm kleiner is dan.
Ik heb er een functie van gemaakt deze word geactiveerd bij dom ready en bij resize.
Bij resize gaat het mis, hij voegt er meerdere toe aangezien resize continu word geactiveerd als een gebruiker z'n scherm verkleind of vergroot.

Hoe kan ik dit oplossen?


$(document).ready(function(){
    responsive();
	
    $(window).on('resize', function(){
        responsive();
    });

    function responsive(){
        if($(window).width() < 780){
             $("body").append('<div class="sidemenu">Hallo</div>');
        }else{
             $(".sidemenu").remove();  
        }
    }
});

Rob Doemaarwat

09-11-2018 14:36

Door een "vlaggetje" te gebruiken (zo noem je een variabele waarmee je bijhoud of iets wel/niet aan staat):


$(document).ready(function(){
    var hasSideMenu = false; //initieel geen side menu

    responsive();
    
    $(window).on('resize', function(){
        responsive();
    });

    function responsive(){
        if($(window).width() < 780){ //toon side menu
             if(!hasSideMenu) //heeft (nog) geen side menu
                 $("body").append('<div class="sidemenu">Hallo</div>');
             hasSideMenu = true; //nu wel
        }
        else if(hasSideMenu){ //heeft wel een side menu, maar moet weg
             $(".sidemenu").remove();  
             hasSideMenu = false; //geen side menu meer
        }
    }
});

Dennis WhoCares

09-11-2018 17:58 gewijzigd op 09-11-2018 17:58

je had ook gewoon je sidemenu standaard al in de html kunnen laten staan en hiden. dan kun je gewoon in responsive $(".sidemenu").show() en .hide() gebruiken :)
Je kan ook bootstrap gebruiken, daar zit alles al voor je ingebakken :)

Reageren

Inloggen om te reageren