Le bloc-notes professionnel d'un développeur front-end senior
Source: How to trigger the window resize event in JavaScript?
|
1 2 3 |
var evt = window.document.createEvent('UIEvents'); evt.initUIEvent('resize', true, false, window, 0); window.dispatchEvent(evt); |
Pour Angular:
|
1 2 3 4 5 |
$timeout(function() { var evt = $window.document.createEvent('UIEvents'); evt.initUIEvent('resize', true, false, $window, 0); $window.dispatchEvent(evt); }); |
Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width.
Ressources en ligne
Lorsqu’on utilise Firefox, IE ou Opéra pour naviguer sur un site responsive, on peut remarquer au redimensionnement en largeur de la fenêtre un léger décalage dans l’exécution d’une media querie par rapport avec un javascript auxquels on a assigné des break-points similaires.
Cet différence provient d’une inconsistence dans la prise en compte de la présence des scroll-barres verticales par les largeurs déclarées pour les media queries.
Ce bug a pour effet qu’une valeur de largeur identique déclarée dans une media query et par jQuery ne s’exécutera pas tout-à-fait au même moment.
Plutôt que de mesurer la largeur d’écran au redimensionnement de la fenêtre, je vérifie si un changement de règle CSS s’est opéré par le biais d’une media query. De cette façon, sans se préoccuper de la manière dont le navigateur prend en charge la largeur de la scroll-barre verticale, le code jQuery et la media query seront exécutés au même moment.
Supposons que la classe « .sampleClass » possède une règle « float: left; » avant la media query et une règle « float: none; » après. Au redimensionnement de la fenêtre, je vérifie un changement de cette règle.
|
1 2 3 4 5 |
$(window).resize(function(){ if ($(".sampleClass").css("float") == "none" ){ // your code here } }); |
Ou (versions les plus récentes de jQuery 1.x) :
|
1 2 3 4 5 |
$(window).on('resize', function(){ if ($(".sampleClass").css("float") == "none" ){ // your code here } }); |
|
1 2 3 4 |
.sampleClass {float:left;} @media only screen and (max-width: 800px){ .sampleClass {float:none;} } |
Source: http://stackoverflow.com/questions/1974788/combine-onload-and-onresize-jquery
|
1 2 3 4 5 6 |
// Bind to the resize event of the window object $(window).on("resize", function () { // Set .right's width to the window width minus 480 pixels $(".content .right").width( $(this).width() - 480 ); // Invoke the resize event immediately }).resize(); |
Source : Using jQuery to access an element from the parent frame from an iFrame
jQuery('div#hello', window.parent.document).hide();
…et conserver le centrage au redimensionnement de la fenêtre.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// On crée une fonction qui centre verticalement le visuel du champ résumé function verticalAlignImageOnWindowResize() { jQuery('.mobile-blog-list li').each(function(){ var listItemHeight = jQuery(this).height(); var listItemImageHeight = jQuery(this).find('img').height(); jQuery(this).find('img').css('margin-top', + ((listItemHeight - listItemImageHeight) / 2)); }); } jQuery(window).load(function(){ verticalAlignImageOnWindowResize(); }); jQuery(window).resize(function(){ jQuery('.mobile-blog-list li .post-image img').each(function(){ jQuery(this).removeAttr('style'); }); verticalAlignImageOnWindowResize(); }); |
Comportement de la fonctionnalité :
Lorsqu’on scrolle vers le bas de page, une fois que notre DIV en question (il peut s’agit d’un menu, d’une barre de recherche, etc..) a atteint le haut de la page, il y reste fixé.
Lorsqu’on re-scrolle vers le haut de page, notre DIV retourne à sa position initiale (en dessous de certains éléments le cas échéant).
|
1 2 3 4 |
#header.floating { position: fixed; top: 0; } |
|
1 2 3 4 5 6 7 8 |
jQuery(document).ready( function() { jQuery(window).scroll( function() { if (jQuery(window).scrollTop() > jQuery('#header-wrapper').offset().top) jQuery('#header').addClass('floating'); else jQuery('#header').removeClass('floating'); }); }); |
Update : code désormais disponible sous forme de plug-in !
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function($){ "use strict"; $(document).ready(function(){ $.fn.extend({ setEqualHeight: function(chunkSize){ var length = this.length; if(typeof(chunkSize) == 'undefined'){chunkSize = length;} for (var i=0; i<length; i+=chunkSize){ var columns = this.slice(i, i+chunkSize); var max = 0; columns.each(function(){ var current = $(this).height(); if(current > max) {max = current;} }); columns.height(max); } } }); }); })(jQuery); |
Le paramètre setEqualHeight() sert à déterminer le nombre d’éléments par ligne (3 éléments par ligne dans le code d’exemple ci-dessous).
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $('#shelfList .shelf-line').setEqualHeight(3); }); })(jQuery); </script> |
Remarque #1: Il reste la possibilité de définir depuis vos feuilles de styles des propriétés
|
1 |
min-height |
et
|
1 |
max-height |
pour gérer des hauteurs minimum et maximum pour vos blocs.
Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width
Il est indispensable de réinitialiser la hauteur du bloc ou de la colonne ciblée par le redimensionnement, sinon le plug-in ne sera pas capable d’écraser la valeur qu’il a précédemment affecté.
|
1 2 3 4 5 6 7 |
(function($){ "use strict"; $('.abo-offre').css({height: 'auto'}).setEqualHeight(2); $(window).on('resize', function(){ $('.abo-offre').css({height: 'auto'}).setEqualHeight(2); }); })(jQuery); |
Remplacer le code du plug-in comme suit :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function($){ "use strict"; $.fn.extend({ setEqualHeight: function(chunkSize){ var length = this.length; if(typeof(chunkSize) == 'undefined'){chunkSize = length;} for (var i=0; i<length; i+=chunkSize){ var columns = this.slice(i, i+chunkSize); var max = 0; columns.each(function(){ var current = $(this).height(); if(current > max) {max = current;} }); columns.height(max); } } }); })(jQuery); |
…et utiliser la fonction comme suit :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> (function($){ "use strict"; $(document).ready(function(){ $('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2); $('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2); }); $(window).on('resize', function(){ $('.shelf-line .shelf-label').css({height: 'auto'}).setEqualHeight(2); $('.shelf-line .shelf-description').css({height: 'auto'}).setEqualHeight(2); }); })(jQuery); </script> |
…mais seulement une fois que la fenêtre est redimensionnée, utiliser le plug-in dans la forme donnée plus haut dans le paragraphe Si erreur « TypeError: $(…).css(…).setEqualHeight is not a function » et déclenchez le de façon suivante :
|
1 2 3 4 5 6 7 8 9 10 |
(function($){ "use strict"; $(window).on('load', function(){ // http://stackoverflow.com/questions/9134918/document-ready-fires-too-early $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight(); }); $(window).on('resize', function(){ $('.shipping-mode-list .tab-wrapper').css({height: 'auto'}).setEqualHeight(); }); })(jQuery); |
Ancien article…
Source : http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
Simulation : http://jsfiddle.net/frontenddeveloper/6GPKn/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ function setEqualHeight(columns) { var tallestcolumn = 0; columns.each(function() { currentHeight = jQuery(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } }); columns.height(tallestcolumn); } jQuery(document).ready(function() { setEqualHeight(jQuery("ol.my-list li")); }); |