Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3041 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Paramètres height/width variables + limite de la fenêtre sous Mozilla

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Paramètres height/width variables + limite de la fenêtre sous Mozilla

n°854205
Ludwig von​ 97
Posté le 20-09-2004 à 16:25:10  profilanswer
 

(Le problème actuel s'est tellement écarté du sujet de départ que j'en crée un nouveau.)
 
J'essaie d'améliorer le javascript suivant sur deux points:
1°- J'aimerais que les paramètres DOTSIZEHEIGTH et DOTSIZEWIDTH puissent varier en fonction des dimensions des différents objet qu'on traite indiquées dans le <div>.
 
J'avais pensé à quelque chose du genre "DOTSIZEHEIGTH = dots[i].obj.height;"à placer dans le for{} concerné ... mais cela ne marche pas ... (éventuellement en faisant de DOTSIZEHEIGTH et DOTSIZEWIDTH)...  enfin, je suis sur qu'il doit y avoir une solution à ce problème.
 
2°-Sous Mozilla/Netscape et compagnie, les images ne rebondissent pas sur le côté droit ni sur le bas de la fenêtre (ni sur le haut mais là c'est normal)
 
Vous pouvez voir fonctionner ce javascript ici:
http://www.webisdead.net/xhtml-index-test.html
(page d'acceuil en reconstruction
 
et là (objets volontairement mal dimensionné, peut provoquer des étirements de la fenêtre ...):
 
http://www.webisdead.net/megaptere
 

Code :
  1. voir plus bas


Message édité par Ludwig von 97 le 20-09-2004 à 23:47:00

---------------
http://www.webisdead.net http://videos.webisdead.net http://folding.webisdead.net
mood
Publicité
Posté le 20-09-2004 à 16:25:10  profilanswer
 

n°854395
Ludwig von​ 97
Posté le 20-09-2004 à 21:13:15  profilanswer
 

Citation :

2°-Sous Mozilla/Netscape et compagnie, les images ne rebondissent pas sur le côté droit ni sur le bas de la fenêtre (ni sur le haut mais là c'est normal)


 
Résolu en remplacant (Sauf que maintenant ça ne rebondit plus sur le bas de Opera :o ) :  
 
if (isNetscape) {  
height = window.innerHeight + document.scrollTop;  
width = window.innerWidth + document.scrollLeft;  
} else {  
height = document.documentElement.clientHeight + document.documentElement.scrollTop;  
width = document.documentElement.clientWidth + document.documentElement.scrollLeft;  
}  
 
par
 
height = document.documentElement.clientHeight + document.documentElement.scrollTop;  
width = document.documentElement.clientWidth + document.documentElement.scrollLeft;  
 
:D
 
Reste problème 1°


Message édité par Ludwig von 97 le 20-09-2004 à 21:15:44

---------------
http://www.webisdead.net http://videos.webisdead.net http://folding.webisdead.net
n°854484
Ludwig von​ 97
Posté le 21-09-2004 à 00:06:19  profilanswer
 

Version finale actuelle de ce javascript pour le moment en ce qui me concerne:
 
demo: http://www.webisdead.net/xhtml-index-test.html
(index.html en reconstruction lente et pas définitive du tout)
 
nouveautés par rapport au début:
 
- compatible XHTML (re-compatible HTML en remplaçant un "documentElement" par "body" )
- compatible avec Netscape/Mozilla/FireFox ... (défaut restant: les éléments ne rebondissent pas sur le bord en bas d'Opera)
- définition de tailles différentes, séparément pour chaque élément
 
 

Code :
  1. <div id="dot9" style="width:384; height:204; position:absolute; top:0; left:0;"><img src="megaptere/megaptere.gif"alt="Baleine" /></div>
  2. <div id="dot8" style="width:1; height:1; position:absolute; top:0; left:0; text-align:left; font-weight:bold"><a href="http://folding.webisdead.net">Folding@Home</a></div>
  3. <div id="dot7" style="width:1; height:1; position:absolute; top:0; left:0;  visibility: hidden;"><img src="images/penguin01.gif"alt="Pingouin" /></div>
  4. <div id="dot6" style="width:1; height:1; position:absolute; top:0; left:0;  visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
  5. <div id="dot5" style="width:51; height:52; position:absolute; top:0; left:0; "><img src="images/penguin05.gif" alt="Pingouin" /></div>
  6. <div id="dot4" style="width:35; height:60; position:absolute; top:0; left:0; "><img src="images/penguin04.gif" alt="Pingouin" /></div>
  7. <div id="dot3" style="width:28; height:60; position:absolute; top:0; left:0; "><img src="images/penguin03.gif" alt="Pingouin" /></div>
  8. <div id="dot2" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin02.gif" alt="Pingouin" /></div>
  9. <div id="dot1" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin01.gif" alt="Pingouin" /></div>
  10. <div id="dot0" style="width:1; height:1; position:absolute; top:0; left:0; visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
  11. <script language="JavaScript" type="text/javascript">
  12. <!-- Original: Philip Winston (pwinston@yahoo.com) Web Site: <http://members.xoom.com/ebullets> -->
  13. <!-- 'Scrolling Fix' by Troels Jakobsen <tjak@get2net.dk> -->
  14. <!-- 'Two dimensions DOTSIZE adaptable element by element' by Ludwig von 97 (http://www.webisdead.net) (!!! DOTSIZEHEIGHT and DOTSIZEWIDTH arrays must be filled manually for now.)  -->
  15. <!-- Adapted for XTHML + Netscape/Mozilla/FireFox/... by GhislainLavoie on <http://www.editeurjavascript.com/forum>, vwphillips on <http://js-x.com/forum> and Ludwig von 97 (http://www.webisdead.net) , thanks to Willy Duitt too -->
  16. <!-- To use in HTML instead of XHTML, replace "documentElements" by "body". Last update 21st September 2004 by Ludwig von 97 (http://www.webisdead.net) -->
  17. <!--
  18. var nDots = 10; // must be equal to the number of elements (including "dot0" )
  19. var Xpos = 0;
  20. var Ypos = 0;
  21. var Ypos = 0;
  23. var DELTAT = .01;
  24. var SEGLEN = 5;
  25. var SPRINGK = 6;
  26. var MASS = 2;
  27. var GRAVITY = 0;
  28. var RESISTANCE = 10;
  29. var STOPVEL = 0.1;
  30. var STOPACC = 0.1;
  31. var BOUNCE = 0.60;
  32. var DOTSIZEHEIGHT = new Array(1,60,60,60,60,52,1,1,10,204); // two dimensions dotsize, must be equal to respective elements height (LV97)
  33. var DOTSIZEWIDTH = new Array(1,32,32,28,35,51,1,1,1,384); // two dimensions dotsize, must be equal to respective elements width (LV97)
  34. var isNetscape = navigator.appName=="Netscape";
  35. var followmouse = true;
  36. var dots = new Array();
  37. init();
  39. function init() {
  40. var i = 0;
  41. for (i = 0; i < nDots; i++) {
  42. dots[i] = new dot(i);
  43. }
  44. if (!isNetscape) {
  45. // I only know how to read the locations of the  
  46. // <LI> items in IE
  47. // skip this for now
  48. // setInitPositions(dots)
  49. }
  50. for (i = 0; i < nDots; i++) {
  51. dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
  52. dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
  53. }
  54. if (isNetscape) {startanimate();}
  55. else {
  56. // let dots sit there for a few seconds
  57. // since they're hiding on the real bullets
  58. setTimeout("startanimate()", 3000);}}
  60. function dot(i) {this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0;
  61. this.obj = eval("document.getElementById('dot'+" + i + " ).style" );} // previously "if (isNetscape) {this.obj = eval("document.dot" + i);}" (GhislainLavoie)
  62.                                                                     // previously "else {this.obj = eval("dot" + i + ".style" );}}" (GhislainLavoie)
  64. function startanimate() {setInterval("animate()", 20);}
  66. function setInitPositions(dots) {
  67. var startloc = document.all.tags("LI" );
  68. var i = 0;
  69. for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
  70. dots[i+1].X = startloc[i].offsetLeft
  71. startloc[i].offsetParent.offsetLeft - DOTSIZEWIDTH[i]; // two dimension dotsize + adaptable width (LV97)
  72. dots[i+1].Y = startloc[i].offsetTop +
  73. startloc[i].offsetParent.offsetTop + 2*DOTSIZEHEIGHT[i]; // two dimension dotsize + adaptable height (LV97)
  74. }
  75. dots[0].X = dots[1].X;
  76. dots[0].Y = dots[1].Y - SEGLEN;
  77. }
  79. function MoveHandler(e) {
  80. Xpos = e.pageX;
  81. Ypos = e.pageY;  
  82. return true;
  83. }
  85. function MoveHandlerIE() {
  86. Xpos = window.event.x + document.documentElement.scrollLeft; // previously "documentElement" --> "body" (LV97)
  87. Ypos = window.event.y + document.documentElement.scrollTop; // previously "documentElement" --> "body" (LV97)
  88. }
  89. if (isNetscape) {
  90. // "document.captureEvents(Event.MOUSEMOVE);" <-- removed by GhislainLavoie
  91. document.onmousemove = MoveHandler;
  92. } else {
  93. document.onmousemove = MoveHandlerIE;
  94. }
  96. function vec(X, Y)
  97. {this.X = X;
  98. this.Y = Y;}
  100. // adds force in X and Y to spring for dot[i] on dot[j]
  101. function springForce(i, j, spring)
  102. {
  103. var dx = (dots[i].X - dots[j].X);
  104. var dy = (dots[i].Y - dots[j].Y);
  105. var len = Math.sqrt(dx*dx + dy*dy);
  106. if (len > SEGLEN) {
  107. var springF = SPRINGK * (len - SEGLEN);
  108. spring.X += (dx / len) * springF;
  109. spring.Y += (dy / len) * springF;
  110. }}
  112. function animate(){
  113. var start = 0;
  114. if (followmouse){
  115. dots[0].X = Xpos;
  116. dots[0].Y = Ypos;
  117. start = 1;
  118. }
  119. for (i = start ; i < nDots; i++ ) {
  120. var spring = new vec(0, 0);
  121. if (i > 0) {
  122. springForce(i-1, i, spring);
  123. }
  124. if (i < (nDots - 1)) {
  125. springForce(i+1, i, spring);
  126. }
  127. var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
  128. var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
  129. dots[i].dx += (DELTAT * accel.X);
  130. dots[i].dy += (DELTAT * accel.Y);
  131. if (Math.abs(dots[i].dx) < STOPVEL &&
  132. Math.abs(dots[i].dy) < STOPVEL &&
  133. Math.abs(accel.X) < STOPACC &&
  134. Math.abs(accel.Y) < STOPACC) {
  135. dots[i].dx = 0;
  136. dots[i].dy = 0;
  137. }
  138. dots[i].X += dots[i].dx;
  139. dots[i].Y += dots[i].dy;
  140. var height, width;
  141. height = document.documentElement.clientHeight + document.documentElement.scrollTop;
  142. width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
  143. // the two above lines: previously "if (isNetscape) {height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft;} else {height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft;}" (LV97 & vwphillips)
  144. if (dots[i].Y >=  height - DOTSIZEHEIGHT[i] - 1) { // two dimensions dotsize adapted + adaptable height (LV97)
  145. if (dots[i].dy > 0) {
  146. dots[i].dy = BOUNCE * -dots[i].dy;
  147. }
  148. dots[i].Y = height - DOTSIZEHEIGHT[i] - 1; // two dimensions dotsize adapted + adaptable height (LV97)
  149. }
  150. if (dots[i].X >= width - DOTSIZEWIDTH[i] - 1) { // two dimensions dotsize adapted + adaptable width (LV97)
  151. if (dots[i].dx > 0) {
  152. dots[i].dx = BOUNCE * -dots[i].dx;
  153. }
  154. dots[i].X = width - DOTSIZEWIDTH[i] - 1; // two dimensions dotsize adapted + adaptable width (LV97)
  155. }
  156. if (dots[i].X < 0) {
  157. if (dots[i].dx < 0) {
  158. dots[i].dx = BOUNCE * -dots[i].dx;
  159. }
  160. dots[i].X = 0;
  161. }
  162. dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie    
  163. dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
  164. }}
  165. --></script>


---------------
http://www.webisdead.net http://videos.webisdead.net http://folding.webisdead.net

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Paramètres height/width variables + limite de la fenêtre sous Mozilla

 

Sujets relatifs
femer 2 fenetre depuis 1 PopupModifier fenetre rechercher de ie
[CSS] Alternative à min-heightConversion site IE>Mozilla, PLZ help!
Décalage des variables?XHTML + CSS valid : décalage aléatoire avec Firefox et Mozilla
fenetre d'attente sous VBAProbleme Mozilla/IE
[C#] "Geler" la fenêtre lors de la modification de contrôles ?OK sous IE et Opéra mais pas sous mozilla [résolu]
Plus de sujets relatifs à : Paramètres height/width variables + limite de la fenêtre sous Mozilla

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.097 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR