Redimensionnement de div en javascript

Fermé
hybrid59 Messages postés 38 Date d'inscription mercredi 1 décembre 2010 Statut Membre Dernière intervention 4 avril 2014 - 14 déc. 2011 à 19:59
 ban - 3 juin 2012 à 17:04
Bonjour à tous,

J'essaie de créer un site plein écran qui s'adapte à la taille de l'écran.

Dans se but il me fallait un petit script pour adapter la taille des div concerné lorsque la taille du navigateur change.

J'ai trouvé se script :

function adpaterALaTailleDeLaFenetre(){
  var largeur = document.documentElement.clientWidth,
  hauteur = document.documentElement.clientHeight;
  
  var source = document.getElementById('MonDiv'); // récupère l'id source 
  source.style.height = hauteur+'px'; // applique la hauteur de la page
  source.style.width = largeur+'px'; // la largeur
}

// Une fonction de compatibilité pour gérer les évènements
function addEvent(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
addEvent(window, "load", adpaterALaTailleDeLaFenetre);
// Puis à chaque fois que la fenêtre est redimensionnée
addEvent(window, "resize", adpaterALaTailleDeLaFenetre);




Il fonctionne parfaitement mais j'ai besoin de redimensionner plusieurs Div, il faut donc faire le redimensionnement selon une class et non pas une ID. Mais ne connaissant strictement rien au javascript je n'arrive pas à adapter ce bout de script, pouvez vous m'aider ?

Merci d'avance
A voir également:

5 réponses

Anoen Messages postés 196 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 11 septembre 2013 25
15 déc. 2011 à 15:14
Sinon plus rapide, t'oublie javascript et cette solution qui va ralentir tes pages à mort et tu passes toutes tes unités "px" dans ton css en "em" ou "%".
1
maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
14 déc. 2011 à 20:42
bonjour,

je te conseille d'utiliser une librairie comme jquery par exemple

tu pourras identifier tes éléments par id class voir des autres attribut ...
0
hybrid59 Messages postés 38 Date d'inscription mercredi 1 décembre 2010 Statut Membre Dernière intervention 4 avril 2014
15 déc. 2011 à 14:42
merci, mais je ne connais strictement rien en jquery, existe t'il un plugins qui fait cela ?

encore merci
0
maka54 Messages postés 699 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
15 déc. 2011 à 17:01
var div = document.getElementsByClassName('ta_classe');

for(var i=0;i<div.length;i++){
div[i].style.height = hauteur+'px'; // applique la hauteur de la page
div[i].style.width = largeur+'px'; // la largeur
}

essaye avec çà, je nai pas tester
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
15 déc. 2011 à 17:27
Hello,

Utilises des tailles relatives (de préférence en %) ça sera beaucoup moins galère !!
0
si on cherche du java script c'est quand les pourcentage ne marche pas! par ex quand on veut garder la proportion même si la fenêtre est très allongée...
please ne pas toujours penser que les question des autres sont idiotes !
0