11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

Je suis en pleine session de mise à jours en JS et plus particulièrement en Jquery. Et pour m'exercer j'essaie de transformer plusieurs de anciens script.
En ce moment je travail sur un script qui récupère la taille de la fenêtre du nav de l'utilisateur pour l'appliquer à une div (couverture), et qui réagis à chaque redimensionnement.

La première partie du script ne m'a pas posée de problème, par contre la seconde avec les écouteurs d’événements me rend dingue Smiley biggol .

Est-ce que quelqu'un aurait une piste à me donner ?

function adapter(){
   	// On récupère l'id couverture et on lui applique la largeur/hauteur de la fenêtre du nav
	$('#couverture').css('width',$(window).width()+'px');
	$('#couverture').css('height',$(window).height()+'px');
}

// Une fonction de compatibilité pour gérer les évènements
function boucle(element, type, listener){
    if(element.addEventListener){
        element.addEventListener(type, listener, false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type, listener);
   	}
}
 
// On exécute la fonction une première fois au chargement de la page
boucle(window, "load", adapter);
// Puis à chaque fois que la fenêtre est redimensionnée
boucle(window, "resize", adapter);

Modifié par X-F (12 Dec 2014 - 15:12)
Smiley eek

Merci beaucoup _laurent, ça fonctionne parfaitement !
J'étais tellement absorbé dans mon délire de vouloir transformer le script mot pour mot. Que j'ai pas pensé à regarder les nouveautés offertes pas Jquery...
Ça me servira de leçon, la prochaine fois je retournerais la doc Jquery avant de poster ! Smiley sweatdrop
Hello Smiley smile

petit truc en passant...

je sais pas à quoi sert la div en question .. mais ça se gère pas direct en css ça maintenant ???

;)
Modérateur
pchlj a écrit :
je sais pas à quoi sert la div en question .. mais ça se gère pas direct en css ça maintenant ???

J'ai pas osé soulever le caillou, j'ai juste répondu à la demande mais ça m'a titillé aussi ! Smiley lol
Ouarf, encore quelque chose sur lequel je suis passé à côté on dirait.

Vous pourriez m'en dire plus ?
Modérateur
Je sais pas si c'est aussi ce que pchlj à en tête mais un css :
#couverture{
  width:100%;
  height:100%;
}

ne peut pas régler le soucis plutôt que de calculer tout ça en js ?
Merci pour les infos Smiley smile .

Cette technique me dis quelque chose, je crois que je l'avais vu passée. Mais ayant mon "jolie" à l'époque, je ne m'étais pas plus renseigné que ça.

Par contre pour que cela fonctionne correctement il ne faut pas ajouter
html, body {
height: 100%;
}

dans le CSS ?
Modifié par X-F (12 Dec 2014 - 16:35)
tu peux déclarer


html, body {
 height:100%;
 width:100%;
}


ça ne coute rien et comme ça tu es sur de prendre toute la page Smiley smile
C'est bien ce qu'il me semblait.

Merci beaucoup pour toutes vos révélations _laurent et pchlj !
Cela montre bien que j'ai besoin d'une bonne session de mise à jours en HTML/CSS/JS.
D'ailleurs j'y retourne, merci encore !