Utilisation de jQuery pour déterminer la taille de la fenêtre du navigateur et à détecter à nouveau cela si la page est redimensionnée ? J’ai besoin de faire une taille de l’IFRAME dans cet espace (entrant un peu sur chaque marge).
Pour ceux qui ne connaissent pas, la fenêtre du navigateur n’est pas la taille de la page du document. C’est la taille visible de votre fenêtre avant le parchemin.
Vous pouvez essayer viewport unités (CSS3) :
1. Réponse à la question principale
Le script $(window).height() fonctionne bien (montrant la fenêtre d'affichage de la hauteur et de ne pas le document avec le défilement de la hauteur), MAIS il faut que vous placez correctement la balise doctype dans votre document, par exemple, ces doctypes:
Pour le HTML 5:
<!DOCTYPE html>
Pour de transition HTML4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Probablement le défaut doctype supposé par certains navigateurs est tel, que $(window).height() prend le document de la hauteur et de ne pas le navigateur de la hauteur. Avec le doctype de la spécification, il est résolu de manière satisfaisante, et je suis sûr que vous peps permettra d'éviter "l'évolution de défilement-overflow hidden et puis de nouveau", qui est, je suis désolé, un peu sale tour, spécialement si vous n'avez pas de document sur le code pour l'avenir du programmeur d'utilisation.
2. Une autre astuce, note de côté: En outre, si vous faites un script, vous pouvez inventer des tests pour aider les programmeurs à l'aide de vos bibliothèques, permettez-moi d'inventer un couple:
$(document).ready(function() {
if(typeof $=='undefined') {
alert("PROGRAMMER'S Error: you haven't called JQuery library");
} else if (typeof $.ui=='undefined') {
alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
}
if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
alert("ERROR, check your doctype, the calculated heights are not what you might expect");
}
});
----------------------- EDIT: à propos de la partie 2, "Un petit truc en plus, note de côté": @Machiel, hier dans les commentaires (2014-09-04), était tout à fait à droite: la vérification de l' $ ne peut pas être à l'intérieur de l'événement ready de Jquery, car nous sommes, comme il l'a souligné, en supposant que $ est déjà défini. MERCI POUR CETTE remarque, et s'il vous plaît, le reste de vous, les lecteurs, corriger cet, si vous avez utilisé dans vos scripts. Ma suggestion est la suivante: dans vos bibliothèques mettre un "install_script()" fonction qui initialise la bibliothèque (mettre toute référence à $ l'intérieur d'une telle fonction init, y compris la déclaration de prêt()) et AU DÉBUT de ces "install_script()" fonction, vérifiez si le $ est définie, mais de faire tout indépendant de JQuery, votre bibliothèque peut "diagnostiquer" lorsque JQuery n'est pas encore défini. Je préfère cette méthode plutôt que de forcer la création automatique de JQuery en l'amenant à partir d'un CDN. Ceux sont de petites notes de côté pour aider les autres programmeurs. Je pense que les gens qui font les bibliothèques se doivent d'être plus riche dans les commentaires pour le potentiel du programmeur erreurs. Par exemple, l'Api Google besoin d'un côté manuel pour comprendre les messages d'erreur. C'est absurde, à besoin de la documentation externe pour les quelques petites erreurs qui n'ont pas besoin de vous pour aller à la recherche d'un manuel ou d'un cahier des charges. La bibliothèque doit être AUTO-DOCUMENTÉ. J'écris du code, même en prenant soin de les erreurs que je pourrais commettre encore six mois à partir de maintenant, et il essaie toujours d'être propre et sans code répétitif, déjà-écrit-pour-éviter-avenir-développeur-erreurs. ---------------------
Meilleures salutations, à partir de
En Colombie, Amérique Du Sud,
David López
Vous pouvez utiliser $(window).resize() pour détecter si la fenêtre est redimensionnée.
jQuery n'a pas de fonction pour détecter correctement la largeur et la hauteur de la fenêtre d'affichage[1].
J'ai trouvé une solution qui utilise la Modernizr de la bibliothèque et plus précisément de la mq fonction qui ouvre les media queries pour le javascript.
Voici ma solution:
// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
// Browsers that support media queries
min_width = function (width) {
return Modernizr.mq('(min-width: ' + width + ')');
};
}
else {
// Fallback for browsers that does not support media queries
min_width = function (width) {
return $(window).width() >= width;
};
}
var resize = function() {
if (min_width('768px')) {
// Do some magic
}
};
$(window).resize(resize);
resize();
Ma réponse sera probablement pas aider le redimensionnement d'une iframe à 100% de la largeur de la fenêtre d'affichage, avec une marge de chaque côté, mais j'espère que ça va apporter quelque réconfort pour webdevelopers frustrés avec le navigateur de l'incohérence de javascript fenêtre d'affichage de la largeur et de la hauteur de calcul.
Cela pourrait peut-être aider en ce qui concerne l'iframe:
$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');
[1] Vous pouvez utiliser $(window).width() et $(window).hauteur() pour obtenir un nombre qui sera corriger dans certains navigateurs, mais incorrecte dans d'autres. Dans ces navigateurs, vous pouvez essayer d'utiliser la fenêtre.innerWidth et de la fenêtre.innerHeight pour obtenir la bonne largeur et la hauteur, mais je voudrais des conseils à l'encontre de cette méthode car elle reposerait sur l'agent utilisateur en reniflant.
Généralement les différents navigateurs sont contradictoires quant à savoir si ou non ils comprennent la barre de défilement dans le cadre de la fenêtre de largeur et de hauteur.
Remarque: les Deux $(window).width() et de la fenêtre.innerWidth varier entre les systèmes d'exploitation en utilisant le même navigateur. Voir: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
