voeg element toe als 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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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();
}
}
});
responsive();
$(window).on('resize', function(){
responsive();
});
function responsive(){
if($(window).width() < 780){
$("body").append('<div class="sidemenu">Hallo</div>');
}else{
$(".sidemenu").remove();
}
}
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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
}
}
});
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
}
}
});
Je kan ook bootstrap gebruiken, daar zit alles al voor je ingebakken :)
Gewijzigd op 09/11/2018 17:58:34 door Dennis WhoCares