Différence de comportement entre en direct ou via MAMP?

**dchiaramello** · 04/02/2011, 15h44

Bonjour.

Je suis en train de m'initier au monde du développement web, et je viens d'être confronté à une différence de comportement sur l'exécution d'un Javascript selon que le fichier est ouvert via MAMP (je suis sur Mac) ou bien en direct - et ce uniquement sur Firefox...

Je m'explique.

J'ai une page HTML, contenant une image, et un lien qui exécute un Javascript qui va changer cette image par une autre avec un effet de fading.

Tout fonctionne bien, quand j'ouvre ma page directement avec Firefox par Drag and Drop. Pareil, si j'uploade ma page sur ma page perso chez Free.

Mais quand j'ouvre ma page via MAMP (sur l'URL "http://localhost:8888/test.html"), la nouvelle image est décalée de 2 pixels vers la gauche pendant la transition!

Sans rentrer dans les détails de la fonction crossfade que j'utilise, comment se fait-il qu'il puisse y avoir une différence de comportement entre ouvrir un fichier directement (URL : "file:///Applications/MAMP/htdocs/test.html") et le même fichier ouvert via MAMP (URL : "http://localhost:8888/test.html")?

Pour info, voici le code de la page, mais mon souhait est plus de comprendre pourquoi il peut y avoir une différence, que de débugger ce problème spécifique...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
 
	<!-- Image transitions by Brothercake - http://www.brothercake.com/ -->
	<script type="text/javascript" src="http://www.brothercake.com/scripts/transitions/crossfade.js"></script>
	<link rel="stylesheet" type="text/css" href="http://www.brothercake.com/scripts/transitions/transitions.css" media="screen, projection" />
 
	<!-- styles unrelated to image cross-fade demo -->
	<style type="text/css" media="screen, projection">
 
		html, body {
			background:#fff;
			color:#000;
			}
 
		img { border:none; }
 
	</style>
 
</head>
 
<body>
	<center>
		<div><img id="diaporama_id" src="images/electricity1.jpg" /></div>
		<div><a href="javascript:crossfade(document.getElementById('diaporama_id'), 'images/electricity2.jpg', '2', '')">Cross Fade</a></div>
	</center>
</body>
</html>

Merci de votre attention!
Daniel

**sekaijin** · 04/02/2011, 16h46

oui il y a toujours des différence entre ouvrir une page en file://
ou en http://
cela n'est pas propre à MAMP
mais du au restrictions de sécurités pour éviter de hacker le poste du client

je te conseille si tu est en local d'éditer directement les fichier de ton serveur ?AMP et de toujours les tester en http://localhost/....

Pour info sur J'utilise XAMPP plutôt que MAMP (que j'ai abandonné avec mon G4 PPC)
la raison est simple XAMPP pour Cross (X) Platform Apache MySQL Perl and Php comme son nom l'indique est corss platform
il existe pour Windows Mac Linux à l'identique

A+JYT

**dchiaramello** · 05/02/2011, 11h10

Merci de la réponse.

J'ai compris la raison de cette différence... Et ça n'a (techniquement) rien à voir avec la différence de l'origine de la page HTML (file:/// ou http://), mais avec le "zoom" de la page (j'ignore le terme exact - ce que l'on modifie avec les Ctrl + et Ctrl -). En "localhost", le "zoom" par défaut de la page était plus important que celui du "file"...

Ce qui me pose désormais un autre problème... Comment puis-je gérer cette situation?

(Les exemples qui suivent sont dérivés de ceux présents sur le site http://www.brothercake.com/)

La fonction Javascript incriminée ressemble à la suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getRealPosition = function(object)
{
    pos_x = object.offsetLeft;
    pos_y = object.offsetTop;
 
    tmp = object.offsetParent;
    while (tmp != null)
    {
        pos_x += tmp.offsetLeft;
        pos_y += tmp.offsetTop;
        tmp = tmp.offsetParent;
    }
 
    // Note: ce qui suit n'est pas du Javascript, mais vous comprenez l'idée
    return pos_x, pos_y
};

Et la manière dont ces coordonnées sont utilisées est la suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
(...)
// On crée un nouvel élément de type <img> dans la page
newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));
 
// Note: le CSS pour img.idupe est défini comme suit: "position:absolute"
newimg.className = 'idupe';
 
// Note: ceci n'est pas du Javascript, mais vous comprenez l'idée
pos_x, pos_y = getRealPosition(original_image)
 
newimg.style.left = pos_x + 'px';
newimg.style.top = pos_y + 'px';

Le principe de base est donc de créer un objet de type <img> exactement à la même position qu'un <img> déjà existant - mais dans Firefox comme dans Safari, ceci ne fonctionne pas selon le niveau de Zoom...

Et merci également pour XAMPP, je vais aller regarder cela.

Daniel

**Watilin** · 05/02/2011, 11h21

Bonjour dchiaramello,
un décalage de quelques pixels, moi ça me fait penser à un problème de mode de rendu. Je suis sous WAMP et je n'arrive pas à reproduire le problème, mais vu qu'il y a un élément en position absolue (l’image idupe), dont la position est calculée en JS (fonction getRealPosition), peut être que le navigateur n'est pas dans le même mode de rendu suivant le protocole utilisé.

Par exemple, peut-être que dans un certain mode, le body a une marge implicite de 2px. Ça dépend du navigateur. Sinon, le problème vient peut-être de la balise <center>. Essaye en la retirant. Quel navigateur tu utilises ?

**dukej** · 05/02/2011, 13h28

Envoyé par dchiaramello

Merci de la réponse.

J'ai compris la raison de cette différence... Et ça n'a (techniquement) rien à voir avec la différence de l'origine de la page HTML (file:/// ou http://), mais avec le "zoom" de la page (j'ignore le terme exact - ce que l'on modifie avec les Ctrl + et Ctrl -). En "localhost", le "zoom" par défaut de la page était plus important que celui du "file"...

Ce qui me pose désormais un autre problème... Comment puis-je gérer cette situation?

(Les exemples qui suivent sont dérivés de ceux présents sur le site http://www.brothercake.com/)

La fonction Javascript incriminée ressemble à la suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getRealPosition = function(object)
{
    pos_x = object.offsetLeft;
    pos_y = object.offsetTop;
 
    tmp = object.offsetParent;
    while (tmp != null)
    {
        pos_x += tmp.offsetLeft;
        pos_y += tmp.offsetTop;
        tmp = tmp.offsetParent;
    }
 
    // Note: ce qui suit n'est pas du Javascript, mais vous comprenez l'idée
    return pos_x, pos_y
};

Et la manière dont ces coordonnées sont utilisées est la suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
(...)
// On crée un nouvel élément de type <img> dans la page
newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));
 
// Note: le CSS pour img.idupe est défini comme suit: "position:absolute"
newimg.className = 'idupe';
 
// Note: ceci n'est pas du Javascript, mais vous comprenez l'idée
pos_x, pos_y = getRealPosition(original_image)
 
newimg.style.left = pos_x + 'px';
newimg.style.top = pos_y + 'px';

Le principe de base est donc de créer un objet de type <img> exactement à la même position qu'un <img> déjà existant - mais dans Firefox comme dans Safari, ceci ne fonctionne pas selon le niveau de Zoom...

Et merci également pour XAMPP, je vais aller regarder cela.

Daniel

Lel zoom navigateur se reset via CTRL+0 ou CMD+O ou CMD+SHIFT+0 sous mac (je suis sous mac

)

Quand on dézoome au niveau du navigateur les dimensions ne sont pas changées, ton site s'il fait 1000px en zoom par défaut, il fera toujours 1000px. En gros si tu dézoome au max, c'est comme si tu avais un écran en 4000px X 2500px en gros hein

Donc s'il y a un problème c'est forcément la fonction getRealposition qui déconne

**dchiaramello** · 05/02/2011, 16h41

Tout d'abord, merci à tous pour vos réponses.

Envoyé par Watilin

(...) Sinon, le problème vient peut-être de la balise <center>. Essaye en la retirant. Quel navigateur tu utilises ?

En effet, j'utilise la balise <center>. Y a-t-il une raison qui ferait que cette balise-ci, spécifiquement, pourrait poser ce genre de problèmes?

J'ai ce souci sur Firefox et Safari (Mac), ainsi que sur Firefox et IE (Windows via VMWare). Donc partout, quoi...

Une page ayant mon problème se trouve ici:

http://daniel.chiaramello.free.fr/tr...sentation.html

(Quand on clique sur le lien "Cross Fade", le processus de "fading" est exécuté, remplaçant une image par une autre - sauf que pour cette page c'est la même image, pour bien voir le souci - on le voit à la fin du fading)

Ce qui est vraiment étrange, c'est que tout fonctionne bien, SAUF pour certains niveaux de zoom ET certaines largeurs de fenêtres du navigateur. Pour reproduire le problème, il faut trouver la bonne combinaison largeur fenêtre / niveau de zoom (essayer plusieurs niveaux de zoom sur une largeur de fenêtre, puis recommencer avec une autre largeur, jusqu'à trouver une paire posant souci).

A noter qu'après avoir remis à 0 le zoom (Cmd-shift-0, sur Firefox), je n'ai pas trouvé de largeur de fenêtre posant problème. Tout cela mène en effet à penser que c'est lié à un problème de rendu lié au zoom et à la largeur de la fenêtre - mais alors, comment régler ça...

Daniel

Différence de comportement entre en direct ou via MAMP?

JavaScript

Discussions similaires

Partager

Partager