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

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

Marsh Posté le 20-09-2004 à 16:25:10    

(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
Reply

Marsh Posté le 20-09-2004 à 16:25:10   

Reply

Marsh Posté le 20-09-2004 à 21:13:15    

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
Reply

Marsh Posté le 21-09-2004 à 00:06:19    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed