Redimensionnement d'un élément

page 1 page 2
Répondre
LupusMic
le 21/12/2005 à 07:56
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Bonjour,

Je cherche depuis un petit moment comment redimensionner la largeur d'une div pour qu'elle s'aligne sur la largeur d'un autre div, qui est au-dessus d'elle à l'affichage.

L'affichage suivant :
  1.  
  2. +----+-----------------+
  3. +logo+ +
  4. +----+-----------------+
  5. + nav + +
  6. +------+---------------+
  7.  


doit devenir cela :
  1.  
  2. +------+---------------+
  3. + logo + +
  4. +------+---------------+
  5. + nav + +
  6. +------+---------------+
  7.  


Le code javascript est :
  1.  
  2. var postformatting = function()
  3. {
  4. var logo = document.getElementById('logo') ;
  5. var nav = document.getElementById('nav') ;
  6.  
  7. if(nav.offsetWidth > logo.offsetWidth)
  8. logo.style.width = nav.offsetWidth ;
  9. else if(nav.offsetWidth < logo.offsetWidth)
  10. nav.style.width = logo.offsetWidth ;
  11.  
  12. }
  13.  


J'ai déjà essayé d'assigner la valeur de l'offset à l'autre offset (mais la propriété est en lecture seule), et j'ai essayé d'affecter la valeur à l'attribut width de l'élément.

Merci !
LupusMic
le 21/12/2005 à 07:58
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Au fait, j'ai aussi essayé d'appliquer la méthode reSize sur l'élément, mais ce n'y est pas applicable.
LupusMic
le 21/12/2005 à 08:03
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Le précédent code fonctionnait sur Opera. Après quelques recherches, je me suis apperçu qu'il faut indiquer l'unité :

  1.  
  2. var postformatting = function()
  3. {
  4. var logo = document.getElementById('logo') ;
  5. var nav = document.getElementById('nav') ;
  6.  
  7. if(nav.offsetWidth > logo.offsetWidth)
  8. logo.style.width = nav.offsetWidth + 'px' ;
  9. else if(nav.offsetWidth < logo.offsetWidth)
  10. nav.style.width = logo.offsetWidth + 'px' ;
  11.  
  12. }
  13.  
LA GLOBULE
le 21/12/2005 à 11:53
LA GLOBULE
Déconnecté
111 111 111 x 111 111 111 = 12 345 678 987 654 321
Chapeau :)

Je n'aurais jamais trouvé.
LupusMic
le 21/12/2005 à 13:51
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Ça marche aussi avec les autres unités (ça devient puissant en utilisant les %).

Bref, voici mon sauveur.

Je ne sais pas où il a pêché ça, mais je l'en remercie grandement.
i M@N
le 21/12/2005 à 20:17
i M@N
Déconnecté
One Love, One Heart, One Unity.
Hello !

ça a l'air très intéressant mais impossible pour moi de le faire fonctionner !!

LupusMic > t'aurais pas un bout de code avec un div pour voir ce que donnent ses fonctions JavaScript pliz ?

@+...
LupusMic
le 22/12/2005 à 09:25
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Suffit de demander :
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml"
  5. lang="fr">
  6. <head>
  7. <title>Projet secret : test</title>
  8. <link rel="stylesheet" type="text/css" href="style.css"></link>
  9.  
  10.    <script src="postformat.js" type="text/javascript"></script>
  11. </head>
  12. <body onload="postformatting()">
  13. <div id="head">
  14. <div id="logo">
  15.  
  16. <img src="/logo.jpg" alt="Logo - "></img>
  17. </div>
  18. <div id="banner">
  19. <img src="/banner.jpg.php" alt="Banni&egrave;re publicitaire"></img>
  20. </div>
  21. </div>
  22.  
  23. <div id="boxes">
  24. <div id="nav">
  25.  
  26. <div id="main">Bo&icirc;te principal.</div>
  27. <div id="sub">Bo&icirc;te subsidiaire</div>
  28. </div>
  29. <div id="content">Contenu </div>
  30. </div>
  31. </body>
  32. </html>
  33.  


Et la CSS :
  1.  
  2. div
  3. {
  4.    background: #455059 ;
  5.    border: solid white 1px ;
  6.    margin: 2px ;
  7. }
  8.  
  9. #head
  10. {
  11.    width: 100% ;
  12. }
  13.  
  14. #boxes
  15. {
  16.    min-height: 250px ;
  17.    width: 100% ;
  18.    right: 102px ;
  19. }
  20.  
  21. #nav
  22. {
  23.    float: left ;
  24.    min-width: 102px ;
  25.    height: 100% ;
  26.  
  27.    min-height: 250px ;
  28.  
  29.    right: 150px ;
  30. }
  31.  
  32. #logo
  33. {
  34.    float: left ;
  35.    height: 102px ;
  36.    min-width: 102px ;
  37. }
  38.  
  39. #banner
  40. {
  41.    height: 102px ;
  42.  
  43.    right: 150px ;
  44. }
  45.  
  46. #content
  47. {
  48.    min-height: 250px ;
  49. }
  50.  
  51. #google
  52. {
  53.    position: absolute ;
  54.    right: 50px ;
  55.    top: 102px ;
  56. }
  57.  
  58. #foot
  59. {
  60.    font-size: 0.7em ;
  61.    text-align: center ;
  62.    width: 100% ;
  63. }
  64.  
  65.  
  66.  
i M@N
le 22/12/2005 à 11:33
i M@N
Déconnecté
One Love, One Heart, One Unity.
Hello !

Je parlais des fonctions JavaScript du gars :
  1. function getElt (eltID) {
  2. if (document.layers) return document.layers[eltID+'C'].document.layers[eltID];
  3. if (document.getElementById) return document.getElementById(eltID);
  4. if (document.all) return document.all[eltID];
  5. if (document[eltID+'C']) return document[eltID+'C'].document[eltID];
  6. alert('Rien ne marche avec ce navigateur');
  7. return false;
  8. }
  9.  
  10. function hideElt (eltID) {
  11. var myelt = getElt(eltID);
  12. if (myelt.style) myelt = myelt.style;
  13. myelt.display = 'none';
  14. }
  15.  
  16. function showElt (eltID,disp) {
  17. var myelt = getElt(eltID);
  18. if (myelt.style) myelt = myelt.style;
  19. myelt.display = disp;
  20. }
  21.  
  22. function isHide (eltID) {
  23. var myelt = getElt(eltID);
  24. if (myelt.style) myelt = myelt.style;
  25. return myelt.display == 'none' ? true : false;
  26. }
  27.  
  28. function switchElt (eltID,disp) {
  29. if (isHide(eltID)) showElt(eltID,disp);
  30. else hideElt(eltID);
  31. }
  32.  
  33. function mvElt (eltID,mvX,mvY) {
  34. var myelt = getElt (eltID), noPx = document.childNodes ? 'px' : 0;
  35. if (myelt.style) myelt = myelt.style;
  36. myelt.left = mvX + noPx; myelt.top = mvY + noPx;
  37. }
  38.  
  39. function chgZIndex (eltID,indx) {
  40. var myelt = getElt(eltID);
  41. if (myelt.style) myelt = myelt.style;
  42. myelt.zIndex = indx;
  43. }
  44.  
  45. function resizeElt(eltID,newWidth,newHeight) {
  46. var myelt = getElt(eltID), noPx = document.childNodes ? 'px' : 0;
  47. if (myelt.style) myelt = myelt.style;
  48. if (myelt.resizeTo) myelt.resizeTo(newWidth,newHeight);
  49. myelt.width = newWidth + noPx; myelt.pixelWidth = newWidth;
  50. myelt.height = newHeight + noPx; myelt.pixelHeight = newHeight;
  51. }
  52.  
smiley

Quelqu'un sait comment on s'en sert?

@+...
Bzh
le 23/12/2005 à 20:56
Bzh
Déconnecté
Heu ! Là, je ne trouve pas ça très raisonnable d'utiliser autant de Javascript !!!

En quoi, autant de javascript, peut il apporter quelque chose en plus au site ???

Enfin, je suppose que cela dépend de l'avis de chacun...
LupusMic
le 26/12/2005 à 14:22
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Cosmétique ? :) Si tu as d'autres solutions en CSS, je suis preneur. Je n'utilise le javascript que pour les aspect cosmétiques et l'ergonomie avancée.
Bzh
le 29/12/2005 à 01:14
Bzh
Déconnecté
Je dis juste ça comme cela ! Cela dépend de l'avi de chacun ! Mais je pense tout de même qu'il est préférable de faire en sorte qu'un visiteur refusant le javascript doit pouvoir naviguer sans aucun souci sur le site. Le js n'est là que pour le confort !

Par exemple, la vérification de formulaire ne se fait pas coté client mais coté serveur ! Vérifier les formulaires en javascript n'est pas terrible.

Et pourtant, on voit cela de plus en plus. Le fameu => formulaire.submit() ! Je trouve ça honteu !!! Le visiteur refusant le javascript ne peut même pas valider le formulaire !!!!

Ah! J'ai passé mon cou de gueulle ! Sa va mieu tout d'un cou !!!

Bonne année à tout le monde !!!! smiley
LupusMic
le 29/12/2005 à 18:40
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Mais on est entièrement d'accord. Tu remarqueras que le javascript que je proposais ne fait qu'améliorer la mise en page.

Jamais un javascript ne sera contraignant.

D'ailleurs, comme tu peux le voir dans mon petit doc sur les regex, j'ai fais en sorte que l'exemple de validation de courriel se fasse quoiqu'il arrive du côté serveur. Mais du côté client, on peut améliorer l'ergonomie en rajoutant quelque javascript. Ça ne mange pas de pain.
Bzh
le 29/12/2005 à 21:33
Bzh
Déconnecté
Heu !!! smiley

Je ne disais pas ça pour toi... Désolé...
i M@N
le 29/12/2005 à 22:19
i M@N
Déconnecté
One Love, One Heart, One Unity.
Hello !

Bon c'est p'tet passé inaperçu alors je répète :
  1. function getElt (eltID) {
  2. if (document.layers) return document.layers[eltID+'C'].document.layers[eltID];
  3. if (document.getElementById) return document.getElementById(eltID);
  4. if (document.all) return document.all[eltID];
  5. if (document[eltID+'C']) return document[eltID+'C'].document[eltID];
  6. alert('Rien ne marche avec ce navigateur');
  7. return false;
  8. }
  9.  
  10. function hideElt (eltID) {
  11. var myelt = getElt(eltID);
  12. if (myelt.style) myelt = myelt.style;
  13. myelt.display = 'none';
  14. }
  15.  
  16. function showElt (eltID,disp) {
  17. var myelt = getElt(eltID);
  18. if (myelt.style) myelt = myelt.style;
  19. myelt.display = disp;
  20. }
  21.  
  22. function isHide (eltID) {
  23. var myelt = getElt(eltID);
  24. if (myelt.style) myelt = myelt.style;
  25. return myelt.display == 'none' ? true : false;
  26. }
  27.  
  28. function switchElt (eltID,disp) {
  29. if (isHide(eltID)) showElt(eltID,disp);
  30. else hideElt(eltID);
  31. }
  32.  
  33. function mvElt (eltID,mvX,mvY) {
  34. var myelt = getElt (eltID), noPx = document.childNodes ? 'px' : 0;
  35. if (myelt.style) myelt = myelt.style;
  36. myelt.left = mvX + noPx; myelt.top = mvY + noPx;
  37. }
  38.  
  39. function chgZIndex (eltID,indx) {
  40. var myelt = getElt(eltID);
  41. if (myelt.style) myelt = myelt.style;
  42. myelt.zIndex = indx;
  43. }
  44.  
  45. function resizeElt(eltID,newWidth,newHeight) {
  46. var myelt = getElt(eltID), noPx = document.childNodes ? 'px' : 0;
  47. if (myelt.style) myelt = myelt.style;
  48. if (myelt.resizeTo) myelt.resizeTo(newWidth,newHeight);
  49. myelt.width = newWidth + noPx; myelt.pixelWidth = newWidth;
  50. myelt.height = newHeight + noPx; myelt.pixelHeight = newHeight;
  51. }
  52.  

Quelqu'un sait comment on s'en sert?

@+...
Bzh
le 30/12/2005 à 00:03
Bzh
Déconnecté
Et bien, c'est pas bien compliqué !!!

Cette fonction retourne l'object direct de la balise souhaité à partir de son nom (name)
  1. function getElt (eltID) {
  2. if (document.layers) return document.layers[eltID+'C'].document.layers[eltID];
  3. if (document.getElementById) return document.getElementById(eltID);
  4. if (document.all) return document.all[eltID];
  5. if (document[eltID+'C']) return document[eltID+'C'].document[eltID];
  6. alert('Rien ne marche avec ce navigateur');
  7. return false;
  8. } 


Cette fonction permet de cacher une balise grace à un parametre => le nom de la balise. Elle fait appel à la première fonction pour récupérer l'object de la balise.
  1. function hideElt (eltID) {
  2. var myelt = getElt(eltID);
  3. if (myelt.style) myelt = myelt.style;
  4. myelt.display = 'none';
  5. } 


Idem mais pour faire apparaitre la balise:
  1. function showElt (eltID,disp) {
  2. var myelt = getElt(eltID);
  3. if (myelt.style) myelt = myelt.style;
  4. myelt.display = disp;
  5. } 


Permet de tester si la balise est caché ou non. Elle utilise comme paramètre toujours le nom de la balise (name="le_nom") et fait appel aussi à la toute première fonction afin de récupérer l'object.
  1. function isHide (eltID) {
  2. var myelt = getElt(eltID);
  3. if (myelt.style) myelt = myelt.style;
  4. return myelt.display == 'none' ? true : false;
  5. } 


Cette fonction réuni les trois dernières. A chaque appel, elle affiche ou bien cache à tour de role le div. Elle fait donc appel à toute les autres fonctions et ne demande qu'un seul paramètre le même (name).
  1. function switchElt (eltID,disp) {
  2. if (isHide(eltID)) showElt(eltID,disp);
  3. else hideElt(eltID);
  4. } 


Cette fonction déplace le div. Elle à besoin de trois parametres: le "name" de la balise, et les coordonnées sur X et Y !!! Elle fait appel tjrs à la toute première fonction afin de de récupérer l'object du div
  1. function mvElt (eltID,mvX,mvY) {
  2. var myelt = getElt (eltID), noPx = document.childNodes ? 'px' : 0;
  3. if (myelt.style) myelt = myelt.style;
  4. myelt.left = mvX + noPx; myelt.top = mvY + noPx;
  5. } 


Cette fonction change le z-index du div. Deux paramètres le nom et l'entier pour la profondeur.Elle fait appel à la toute première fonction.
  1. function chgZIndex (eltID,indx) {
  2. var myelt = getElt(eltID);
  3. if (myelt.style) myelt = myelt.style;
  4. myelt.zIndex = indx;
  5. } 


Et cette dernière fonction redimentionne le div. Donc trois paramètres:
->Le "name" du div
->La nouvelle largeur
->La nouvelle hauteur
  1. function resizeElt(eltID,newWidth,newHeight) {
  2. var myelt = getElt(eltID), noPx = document.childNodes ? 'px' : 0;
  3. if (myelt.style) myelt = myelt.style;
  4. if (myelt.resizeTo) myelt.resizeTo(newWidth,newHeight);
  5. myelt.width = newWidth + noPx; myelt.pixelWidth = newWidth;
  6. myelt.height = newHeight + noPx; myelt.pixelHeight = newHeight;
  7. } 


Ses fonctions sont très pratique et très bien faites.

Sont script est basé sur une fonction importante qui est la première. Elle permet, en fonction du navigateur, de recupérer l'object de la balise.

C'est propre. Je l'ai pas essayé mais ça à l'air vraiment bien.

Bye...
page 1 page 2
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Breizh Blog