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

Il y a 250 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici

Voir les posts : Par défaut Tous Les bonnes notes Les notes insuffisantes

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Paramètres height/width variables + limite de la fenêtre sous Mozilla

Ludwig von 97

Plus d'informations

20-09-2004 à 16:24:20

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

voir plus bas

Message édité par Ludwig von 97 le 21-09-2004 à 00:06:55

---------------
http://www.webisdead.net/ - http://videos.webisdead.net/
Equipe webisdead.net de Folding@Home

Ludwig von 97

Plus d'informations

20-09-2004 à 21:13:39

Masquer

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 ) :

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;

Reste problème 1°

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

---------------
http://www.webisdead.net/ - http://videos.webisdead.net/
Equipe webisdead.net de Folding@Home

Ludwig von 97

Plus d'informations

21-09-2004 à 00:07:06

Masquer

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 :

<div id="dot9" style="width:384; height:204; position:absolute; top:0; left:0;"><img src="megaptere/megaptere.gif"alt="Baleine" /></div>
<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>
<div id="dot7" style="width:1; height:1; position:absolute; top:0; left:0; visibility: hidden;"><img src="images/penguin01.gif"alt="Pingouin" /></div>
<div id="dot6" style="width:1; height:1; position:absolute; top:0; left:0; visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
<div id="dot5" style="width:51; height:52; position:absolute; top:0; left:0; "><img src="images/penguin05.gif" alt="Pingouin" /></div>
<div id="dot4" style="width:35; height:60; position:absolute; top:0; left:0; "><img src="images/penguin04.gif" alt="Pingouin" /></div>
<div id="dot3" style="width:28; height:60; position:absolute; top:0; left:0; "><img src="images/penguin03.gif" alt="Pingouin" /></div>
<div id="dot2" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin02.gif" alt="Pingouin" /></div>
<div id="dot1" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin01.gif" alt="Pingouin" /></div>
<div id="dot0" style="width:1; height:1; position:absolute; top:0; left:0; visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
<script language="JavaScript" type="text/javascript">
<!--
var nDots = 10; // must be equal to the number of elements (including "dot0" )
var Xpos = 0;
var Ypos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 5;
var SPRINGK = 6;
var MASS = 2;
var GRAVITY = 0;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var BOUNCE = 0.60;
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)
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)
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init();
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
if (!isNetscape) {
// I only know how to read the locations of the
// <LI> items in IE
// skip this for now
// setInitPositions(dots)
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
}
if (isNetscape) {startanimate();}
else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 3000);}}
function dot(i) {this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0;
this.obj = eval("document.getElementById('dot'+" + i + " ).style" );} // previously "if (isNetscape) {this.obj = eval("document.dot" + i);}" (GhislainLavoie)
// previously "else {this.obj = eval("dot" + i + ".style" );}}" (GhislainLavoie)
function startanimate() {setInterval("animate()", 20);}
function setInitPositions(dots) {
var startloc = document.all.tags("LI" );
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZEWIDTH[i]; // two dimension dotsize + adaptable width (LV97)
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZEHEIGHT[i]; // two dimension dotsize + adaptable height (LV97)
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.documentElement.scrollLeft; // previously "documentElement" --> "body" (LV97)
Ypos = window.event.y + document.documentElement.scrollTop; // previously "documentElement" --> "body" (LV97)
}
if (isNetscape) {
// "document.captureEvents(Event.MOUSEMOVE);" <-- removed by GhislainLavoie
document.onmousemove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{this.X = X;
this.Y = Y;}
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}}
function animate(){
var start = 0;
if (followmouse){
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
height = document.documentElement.clientHeight + document.documentElement.scrollTop;
width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
// 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)
if (dots[i].Y >= height - DOTSIZEHEIGHT[i] - 1) { // two dimensions dotsize adapted + adaptable height (LV97)
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZEHEIGHT[i] - 1; // two dimensions dotsize adapted + adaptable height (LV97)
}
if (dots[i].X >= width - DOTSIZEWIDTH[i] - 1) { // two dimensions dotsize adapted + adaptable width (LV97)
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZEWIDTH[i] - 1; // two dimensions dotsize adapted + adaptable width (LV97)
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
}}
--></script>

---------------
http://www.webisdead.net/ - http://videos.webisdead.net/
Equipe webisdead.net de Folding@Home

Aller à :

FORUM Tom's Hardware » Programmation » HTML / Javascript » Paramètres height/width variables + limite de la fenêtre sous Mozilla

Page générée en 0.335 secondes

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

Mozilla 1.6 Alpha

Navigateur Mozilla 1.7.6 : l'ultime version

Mozilla Firefox 0.8 et Thunderbird 0.5 en français

Mozilla Thunderbird version 0.5 disponible

Charts cartes graphiques Q3 2008 : 101 cartes testées

Upgrader son portable en 9 leçons

Que choisir ? Home Cinema 5.1 ou projecteur de son ?

Intel Core i7 (Nehalem) : une architecture signée AMD ?