Redimensionnement de div en javascript

hybrid59 Messages postés 38 Date d'inscription   Statut Membre Dernière intervention   -  
 ban -
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   Statut Membre Dernière intervention   25
 
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 698 Date d'inscription   Statut Membre Dernière intervention   80
 
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   Statut Membre Dernière intervention  
 
merci, mais je ne connais strictement rien en jquery, existe t'il un plugins qui fait cela ?

encore merci
0
maka54 Messages postés 698 Date d'inscription   Statut Membre Dernière intervention   80
 
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 4315 Date d'inscription   Statut Contributeur Dernière intervention   846
 
Hello,

Utilises des tailles relatives (de préférence en %) ça sera beaucoup moins galère !!
0
ban
 
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