Faire élément HTML basé sur de la largeur du document

Question

J'essaie d'ajouter un bouton pour un menu mobile lorsque la largeur du document est inférieure à 470.

Il le fait quand la page se charge d'abord, mais quand je mess avec la largeur du document réel sur mon navigateur ne change pas à côté du document. Comment puis-je y parvenir?

Le bouton devrait apparaître lorsque la largeur est inférieure à 470 et s'en aller lorsque la largeur de la page est supérieure à 470, essentiellement.

Voici mon code.

 var width = $(document).width(); 
     if (width < 470) { 
      $("<button id='menu'>Menu</button>").insertAfter("#navigation a img"); 
     } else { 
      $("<button id='menu'></button>").hide(); 
     } 

Answer 1

Vérifiez la largeur du document à chaque changement de taille de la fenêtre.

function onresize(){ 
    var width = $(document).width(); 
    if (width < 470) { 
     if($("#menu").length){ 
       $("#menu").show(); 
     } 
     else{ 
       $("<button id='menu'>Menu</button>").insertAfter("#navigation a img"); 
     } 
    } else { 
     $("#menu").hide(); 
    } 
} 

onresize()//first call 
$(window).resize(onresize); 

Answer 2

Bind la fonction/chèques à un procédé resize dans la fenêtre:

$(window).resize(
    function(){ 
     /* do stuff in here */ 
    }); 

Simple proof-of-concept.