DevBlog » javascript

Centrer un élément dans le “viewport” avec jQuery

Yann — Thu, 12 Nov 2009 14:45:06 +0000

Voici une petite fonction qui permet de centrer un élément dans une page Web ou, plus exactement, dans le “viewport”.

Mais qu’est-ce que c’est le “viewport” ? Il s’agit de la partie visible d’une page dans un navigateur.

Ainsi, quelle que soit la position de l’internaute dans la page, l’élément sera centré…

Voyons cette fonction…

function centerThis(element) {
	$(element).css({
		'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
		'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
	});
}

À utiliser comme ceci :

centerThis('#ZoomPhoto');

Attention, cette fonction ne fait que déterminer la position de l’élément concerné. S’il est caché (display: none), n’oubliez pas de le montrer suite à l’appel de cette fonction…

Mais attendez… “Houston ? We have a problem…”

En effet, pour l’instant, si le viewport est plus petit que l’élément à centrer, certaines parties de l’élément se retrouvent en dehors du viewport et ne sont donc pas visibles… C’est le genre de problème qui ne saute pas tout de suite aux yeux lorsque le bureau arbore fièrement un écran de 20 pouces et plus…

Corrigeons donc cette anomalie, pour le bien des mobinautes et de leurs écrans 7 pouces…

function centerThis(element) {
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var elementHeight = $(element).height();
	var elementWidth = $(element).width();

	var elementTop, elementLeft;

	if (windowHeight <= elementHeight) {
		elementTop = $(window).scrollTop();
	} else {
		elementTop = ((windowHeight - elementHeight) / 2) + $(window).scrollTop();
	}

	if (windowWidth <= elementWidth) {
		elementLeft = $(window).scrollLeft();
	} else {
		elementLeft = ((windowWidth - elementWidth) / 2) + $(window).scrollLeft();
	}

	$(element).css({
		'top': elementTop,
		'left': elementLeft
	});
}

Et voilà ! L’élément est centré, quelle que soit la taille du viewport…

Une dernière chose, ça fonctionne sous IE6…

ParseFloat (Javascript) et Safari

Virginie — Thu, 16 Jul 2009 13:16:06 +0000

Sous Safari, la fonction JavaScript parseFloat n’a pas toujours le fonctionnement attendu…

Voici une petite fonction adaptée pour résoudre ce problème :

function parseFloatCustom(str)
{
if (str != undefined)
{
if (!isNaN(parseFloat(str)))
return parseFloat(str);
else
{
return (parseFloat((str.toString()).substring(0, (str.toString()).length - 2)));
}
}
}

Javascript : récupérer la valeur d’un select sur l’événement onchange

Virginie — Thu, 16 Jul 2009 13:01:52 +0000

Pour passer à une fonction JavaScript la valeur de l’option du select qui vient d’être choisie, il suffit de récupérer la valeur de l’option grâce à : this.options[this.selectedIndex].value .

Par exemple :

Dans cet exemple, maFonctionQuiVaBien va recevoir 12 ou 14 comme paramètre, selon l’option sélectionnée.

Redimensionner une iframe automatiquement à la dimension du contenu affiché

Benoit — Thu, 09 Jul 2009 08:00:36 +0000

Une petite fonction javascript bien pratique pour utiliser au mieux le potentiel des iframes. Découverte dans Joomla, elle permet de redimensionner automatiquement une iframe en fonction du contenu affiché dans celle-ci. Bien pratique pour utiliser en toute transparence ou presque une iframe. Lorsque celle-ci est inévitable évidemment !

Le principe est simple. La fonction calcule à chaque affichage la hauteur de la page affichée dans votre cadre et redimensionne celui-ci au besoin à l’aide d’un “onload”.

Attention cependant, la page contenant l’iframe et la page à afficher dans l’iframe doivent être sur le même serveur.

La fonction Javascript :

function iFrameHeight() {
var h = 0;
if ( !document.all ) {
h = document.getElementById('blockrandom').contentDocument.height;
document.getElementById('blockrandom').style.height = (h + 110) + 'px';
} else if( document.all ) {
h = document.frames('blockrandom').document.body.scrollHeight;
document.all.blockrandom.style.height = (h + 70) + 'px';
}
}

La page html qui contient votre iframe (et la fonction javascript ci-dessus)




Cette option ne fonctionnera pas correctement car votre navigateur ne supporte par les IFrames

Créer un carrousel avec jquery pour vos diaporamas, fils infos, catalogue produits…

Benoit — Tue, 23 Jun 2009 08:51:15 +0000

Même s’il existe de nombreux scripts prêt à l’emploi, comme l’excellent jcaroussel, l’utilisation de ceux-ci dans un environnement spécifique s’avère parfois compliqué. L’imbrication du html et du javascript notamment, ne facilite pas en effet la personnalisation de l’objet et la prise en main de la CSS relève souvent de l’exploit.

Aussi, afin de mettre en place quelque chose de plus personnel et de moins gourmand je vous propose d’apprendre à réaliser simplement votre propre carrousel à l’aide de jquery.

Un carrousel, à quoi ça sert ?

L’objectif de ce script consiste à afficher sur une page (html) une liste d’objet (potentiellement infinie) dont un nombre limité seulement sera visible par l’utilisateur. Il sera bien sûr complété par une interface de navigation pour parcourir ce “catalogue” d’objets (qui peuvent être des vignettes des textes ou encore des vidéos). Les applications sont donc multiples : diaporama photo, diaporama produit, ou encore module d’actualités.

Ce dont vous avez besoin pour commencer.

Avant toute chose, il convient de déterminer avec précision l’apparence finale de votre carrousel. En effet, pour que l’affichage fonctionne correctement sur tous les navigateurs (et c’est aussi le but), il conviendra d’être précis et méticuleux. En premier lieu donc, commencez par mesurer (en pixels) l’espace dont vous disposez pour l’affichage du carrousel. Dans notre exemple, le carrousel sera horizontal ce qui signifie que j’ai besoin de connaître la largeur totale de l’espace qui accueillera la navigation, par exemple de mon diaporama.

Comme le montre l’image ci-dessus, cette mesure doit tenir compte de l’ensemble des éléments qui constituent votre navigation. Ensuite, il convient généralement de sortir la calculatrice pour déterminer d’autres paramètres très important :

La nombre d’éléments visibles au chargement du carrousel (ici 6).
La dimension (précise) de chaque éléments (ne pas oublier les bordures éventuelles…).
L’espacement entre chaque objet (ici 10 pixels qui seront obtenus par une “margin-right”).

Dans notre exemple, chaque élément visible occupera donc une largeur totale de 96px. (80 de largeur + 6 de bordure (3 de chaque côté) +10 de marge droite). Soit un total de 576 pixels nécessaires pour l’affichage de 6 éléments. Si vous avez suivi, il nous reste donc 12 pixels à droite et à gauche de nos vignettes qui serviront à l’affichage de la navigation (par exemple avec de petites flèches explicites.

Et maintenant on fait quoi ?

Une fois que le gabarit de votre Carrousel est déterminé, il convient de le créer en HTML. Pour cela je vais utiliser deux conteneurs, deux liens et une liste non ordonnées :

Peu importe le html que vous souhaitez utiliser, 2 choses sont importantes dans le code ci-dessus :

La class “first” que j’ajoute sur le premier lien : elle servira à le masquer lors de l’amorce (puisqu’aucune navigation vers la gauche sera possible au lancement).
La class “pdt” toujours identique spécifiée sur chaque éléments de la liste : elle servira à compter au chargement de la page combien j’ai d’éléments dans ma liste.

Attaquons nous maintenant au javascript qui va nous permettre de rendre tout ça interactif et nous rapprocher du but. Avec un petit script simple, qui utilisera la puissance de jquery et nécessitant très peu de paramètre hormis le nombre d’éléments visibles au chargement (6 dans notre exemple) qui sera passé en “constante” de configuration.


//On s'assure d'abord que le document est chargé :
$(document).ready(function(){
//On configure notre script en lui indiquant le nombre d'objet visible en même temps :
var nbdisplay = 6;
//Puis on compte le nombre d'objet présent dans notre liste, à adapter peut-être à votre html
var nbobjet = $('#defileur').children('li.pdt').size();
//Enfin on amorce une variable à 0 qui va nous permettre de nous repérer dans la navigation
var repere = 0;
//On crée ensuite deux fonctions assigné sur chacun de nos boutons de navigation :
//La fonction qui permet d'avancer dans le carrousel est assigné au lien possédant l'id "next" :
$('#next').click(
function () {
if ($(this).is(".last")==false) //je n'active la fonction que si je ne suis pas sur le dernier élément
{
repere++; //j'incrémente ma variable de repère
$("#defileur").animate({"left": "-=96px"}, "slow");//je déplace vers la gauche mon conteneur de largeur totale d'un élément (element+marge+bordure).
$('#prev').removeClass();//j'enlève la classe du lien "précedent" pour le faire apparaitre puisque désormais je peux naviguer en arrière.
if((repere+nbdisplay)==nbobjet){//enfin, je calcule si je ne suis pas au bout de ma liste.
$(this).addClass("last");//le cas écheant, j'ajoute une classe au bouton pour le faire disparaitre.
}
}
return false;
});
//La fonction qui permet de reculer dans le carrousel est assigné au lien possédant l'id "prev" :
$('#prev').click(
function () {
if ($(this).is(".first")==false) {
$("#defileur").animate({"left": "+=96px"}, "slow");
repere--;
$('#next').removeClass();
if(repere==0){
$(this).addClass("first");
}
}
return false;
});
});

Il ne me reste plus qu’à ajouter une couche essentielle. La feuille de style. Qui va servir à masquer articiellement les objets qui dépasse le quota autoriser (ici 6) et à afficher et/ou masquer les boutons servant à la navigation.


*{
margin:0;
padding:0;
}
#navigation{
position:absolute;
width:600px;
left:0px;
top:0px;
}
#thumb{
width: 576px;
height:56px;
overflow:hidden;
position:relative;
left:14px;
}
#defileur {

position:absolute;
left:0px;
top:0px;
}
#defileur li {
float:left;
list-style:none;
width:80px;
height:50px;
margin-right:10px;
overflow:hidden;
border:solid 3px #C7922D;
}
.last,.first{
visibility:hidden;
}
#prev{
position:absolute;
top:25px;
left:0;
}
#next{
top:25px;
position:absolute;
left:590px;
}

Voilà, nous y sommes, le carrousel est terminé et permet de naviguer image par image dans notre collection de vignettes.

La démo du script achevé est disponible ici.