Redimensionnement d'un élément

page 1 page 2
Répondre
i M@N
le 30/12/2005 à 10:34
i M@N
Déconnecté
One Love, One Heart, One Unity.
Hello !

Merci pour l'explication mais j'ai demandé :
Quelqu'un sait comment on s'en sert?

smiley

@+...
Bzh
le 30/12/2005 à 12:26
Bzh
Déconnecté
Bin comme n'importe quel script js !

Tu le met dans ta page et tu appels la fonction souhaité en passant les parametres demandés !!

Je ne vois pas où est la difficulté ???? smiley
i M@N
le 30/12/2005 à 19:15
i M@N
Déconnecté
One Love, One Heart, One Unity.
Hello !

Bon alors j'ai testé pour vous ... smiley

La feuille de style style.css :
  1. BODY {
  2. background-color: #88BB77;
  3. margin: 0px;
  4. padding: 0px;
  5. font: 10px tahoma;
  6. color: #FFFFFF;
  7. }
  8.  
  9. #test {
  10. position: absolute;
  11. width: 50px;
  12. height: 50px;
  13. top: 0px;
  14. left: 0px;
  15. display: block;
  16. border-style: solid;
  17. border-width: 1px;
  18. border-color: #FFFFFF;
  19. background-color: #000000;
  20. }
  21.  
  22. #content {
  23. position: absolute;
  24. width: 100px;
  25. height: 50px;
  26. top: 100px;
  27. left: 0px;
  28. border-style: solid;
  29. border-width: 1px;
  30. border-color: #000000;
  31. background-color: #FFFFFF;
  32. } 

Le fichier fonctions.js :
  1. /*
  2. Cette fonction retourne l'object direct de la balise souhaité à partir de son nom (name)
  3. */
  4. function getElt (eltID) {
  5. if (document.layers) return document.layers[eltID+'C'].document.layers[eltID];
  6. if (document.getElementById) return document.getElementById(eltID);
  7. if (document.all) return document.all[eltID];
  8. if (document[eltID+'C']) return document[eltID+'C'].document[eltID]; 
  9. alert('Rien ne marche avec ce navigateur');
  10. return false;
  11. }
  12.  
  13. /*
  14. Cette fonction permet de cacher une balise grace à un parametre => le nom de la balise.
  15. Elle fait appel à la première fonction pour récupérer l'object de la balise.
  16. */
  17.  
  18. function hideElt (eltID) {
  19. var myelt = getElt(eltID);
  20. if (myelt.style) myelt = myelt.style;
  21. myelt.display = 'none';
  22. }
  23.  
  24. /*
  25. Idem maispour faire apparaitre la balise.
  26. deux paramètres :
  27. ->Le "name" du div
  28. ->L'attribut du display (block par exemple)
  29. */
  30.  
  31. function showElt (eltID,disp) {
  32. var myelt = getElt(eltID);
  33. if (myelt.style) myelt = myelt.style;
  34. myelt.display = disp;
  35. }
  36.  
  37. /*
  38. Permet de tester si la balise est caché ou non.
  39. Elle utilise comme paramètre toujours le nom de la balise (name="le_nom")
  40. et fait appel aussi à la toute première fonction afin de récupérer l'object.
  41. */
  42.  
  43. function isHide (eltID) {
  44. var myelt = getElt(eltID);
  45. if (myelt.style) myelt = myelt.style;
  46. return myelt.display == 'none' ? true : false;
  47. }
  48.  
  49. /*
  50. Cette fonction réuni les trois dernières.
  51. A chaque appel, elle affiche ou bien cache à tour de role le div.
  52. Elle fait donc appel à toute les autres fonctions et ne demande qu'un seul paramètre le même (name).
  53. */
  54.  
  55. function switchElt (eltID,disp) {
  56. if (isHide(eltID)) showElt(eltID,disp);
  57. else hideElt(eltID);
  58. }
  59.  
  60. /*
  61. Cette fonction déplace le div. Elle à besoin de trois parametres: le "name" de la balise, et les coordonnées sur X et Y !!!
  62. Elle fait appel tjrs à la toute première fonction afin de de récupérer l'object du div
  63. */
  64.  
  65. function mvElt (eltID,mvX,mvY) {
  66. var myelt = getElt (eltID), noPx = document.childNodes ? 'px' : 0;
  67. if (myelt.style) myelt = myelt.style;
  68. myelt.left = mvX + noPx; myelt.top = mvY + noPx;
  69. }
  70.  
  71. /*
  72. Cette fonction change le z-index du div.
  73. Deux paramètres le nom et l'entier pour la profondeur.
  74. Elle fait appel à la toute première fonction.
  75. */
  76.  
  77. function chgZIndex (eltID,indx) {
  78. var myelt = getElt(eltID);
  79. if (myelt.style) myelt = myelt.style;
  80. myelt.zIndex = indx;
  81. }
  82.  
  83. /*
  84. Et cette dernière fonction redimentionne le div.
  85. Donc trois paramètres:
  86. ->Le "name" du div
  87. ->La nouvelle largeur
  88. ->La nouvelle hauteur
  89. */
  90.  
  91. function resizeElt(eltID,newWidth,newHeight) {
  92. var myelt = getElt(eltID), noPx = document.childNodes ? 'px' : 0;
  93. if (myelt.style) myelt =myelt.style;
  94. if (myelt.resizeTo) myelt.resizeTo(newWidth,newHeight);
  95. myelt.width = newWidth + noPx; myelt.pixelWidth = newWidth;
  96. myelt.height = newHeight + noPx; myelt.pixelHeight = newHeight;
  97. } 

Le fichier html :
  1. <head>
  2. <title>test</title>
  3. <link rel="stylesheet" type="text/css" href="style.css"></link>
  4. <script src="fonctions.js" type="text/javascript"></script>
  5. </head>
  6. <body>
  7.    
  8. <div id="test" name="test">
  9. test
  10. </div>
  11.  
  12. <div id="content" name="content">
  13. <a href="javascript:resizeElt('test','100','100')">resize</a>
  14.  
  15. <a href="javascript:hideElt ('test')">hide</a>
  16.  
  17. <a href="javascript:showElt ('test','block')">show</a>
  18.  
  19. <a href="javascript:mvElt ('test','150','150')">move</a>
  20.  
  21. <a href="javascript:chgZIndex ('test','3')">change z-index</a>
  22.  
  23.  
  24. </div>
  25.  
  26. </body>
  27. </html>
  28.  


Merci Bzh, t'avais juste fait une erreur sur la fonction showElt ('div','arg') qui requiert deux paramètres :
->Le "name" du div
->L'attribut du display (block par exemple)

En effet une fois rendu utile ce code donne des idées ...

@+...
Bzh
le 30/12/2005 à 20:28
Bzh
Déconnecté
Arf ! Oui... Le plus interressant reste tout de même la première fonction. Elle assure vraiment une bonne compatibilité...

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

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