Cacher A DIV si l’écran est plus étroit que 1024px

J’ai trouvé (à partir de cette question – Hide div si l’écran est inférieur à une certaine largeur ) ce morceau de codage

$(document).ready(function () { if (screen.width < 1024) { $("#floatdiv").hide(); } else { $("#floatdiv").show(); } });

Le seul problème est que je n’arrive pas à faire en sorte que le code fonctionne, je n’ai besoin que de code pour fonctionner avec IE, je vais utiliser Media Queries pour d’autres navigateurs (plus récents). Des astuces / conseils sur où je vais mal?

Jusqu’à présent, j’ai

Puis à la fin de cette div (où est ferme) j’ai

Dans mon en-tête, j’ai

Et je ne parviens toujours pas à faire fonctionner le code (test dans IE8) Est-ce que je me trompe toujours quelque part?

Mise à jour J’ai un autre élément de jQuery lié, cela pourrait-il causer le problème? Voici le code complet ci-dessous

    

Tweet

Message d’erreur

Détails d’erreur de page Web

Agent utilisateur: Mozilla / 4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident / 4.0; chromeframe / 10.0.648.133; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152. .NET CLR 3.5.30729; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.2) Horodatage: samedi, 12 mars 2011 11:31:32 UTC

Message: Identifiant, chaîne ou numéro attendu Ligne: 140 Char: 1 Code: 0 URI: www.itsdaniel0.com/2011/03/unicorns-are-cool/

Message: L’object ne prend pas en charge cette propriété ou cette méthode. Ligne: 16 Caractère: 1 Code: 0 URI: dl.dropbox.com/u/17087195/website/sidebar_size.js

Message: ‘twttr.anywhere._instances’ est null ou n’est pas un object Ligne: 1 Caractère: 5207 Code: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Message: ‘twttr.anywhere._instances’ est null ou n’est pas un object Ligne: 1 Caractère: 5207 Code: 0 URI: platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

Http supprimé des URL en raison de l’erreur “low rep”

ANCIENNE REPONSE UTILISANT JQUERY:

 //the function to hide the div function hideDiv(){ if ($(window).width() < 1024) { $("#floatdiv").fadeOut("slow"); }else{ $("#floatdiv").fadeIn("slow"); } } //run on document load and on window resize $(document).ready(function () { //on load hideDiv(); //on resize $(window).resize(function(){ hideDiv(); }); });

EDIT: S'il vous plaît noter que maintenant il y a beaucoup plus de support multi-navigateur pour les requêtes multimédia css3, il serait beaucoup plus efficace d'utiliser celles-ci plutôt que javascript.

UTILISER CSS.

 /* always assume on smaller screen first */ #floatdiv { display:none; } /* if screen size gets wider than 1024 */ @media screen and (min-width:1024px){ #floatdiv { display:block; } }

Notez que dans la plupart des navigateurs modernes, vous pouvez également exécuter des requêtes multimédia en javascript à l’aide de window.matchMedia.

 if(window.matchMedia("(min-width:1024px)").matches){ console.log("window is greater than 1024px wide"); }

vous devez définir l’élément screen:

 var screen = $(window)

par exemple:

 $(document).ready(function () { var screen = $(window) if (screen.width < 1024) { $("#floatdiv").hide(); } else { $("#floatdiv").show(); } });

Questions médiatiques pour la victoire

Comment faire en sorte qu’une div ne soit pas affichée si la fenêtre du navigateur a une certaine largeur?

 @media all and (max-width: 1024px) { /* Change Width Here */ div.class_name { display: none; } }