Tracer un trait à l'event 'load' par-dessus un contenu HTML.

Sephiroth66 · 31/01/2012, 18h35

Bonjour à tous, et merci à ceux qui voudront bien me lire.

Je vous expose la situation que je rencontre :

1) j'ai une page web avec un contenu HTML / JavaScript
2) je veux tracer un trait sur le tout, dans une fonction de l'évènement load
3) j'ai une fonction drawLine() qui permet de tracer un trait

Voici la façon dont je m'y suis pris jusqu'à présent :

Code html :

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

1
2
3
4
5
6
7
8
<body>	
	<div id="trait">
	         <!-- trait tracé dynamiquement par une fonction JavaScript -->
	<div />
        <div id="conteneurPrincipal">
                 <!-- éléments HTML contenu -->
        </div>
</body>

La balise d'id trait est placée en position absolute dans le CSS. L'idée générale, était de générer une page HTML par les voix traditionnelles, avec un div absolute (trait) sorti du flux et placé en position (0,0). Immédiatement après chargement, l'évènement 'load' devait déclencher un appel à la fonction drawLine(paramètres), et le trait être tracé par-dessus les autres éléments de la page, par : document.getElementById("trait").innerHTML= leTrait; où leTrait contient un ensemble de div qui forment un trait.

Que se passe-t-il sur ma page? Le trait est bien tracé et au bon endroit, mais il vient écraser l'ensemble des éléments de la page, il se trace donc à la place des éléments HTML de la page, qui ne sont même pas décalés vers le bas mais qui tout simplement disparaissent.

Lorsque je fais le test de supprimer le innerHTML de la fonction drawLine, bien sûr la charge est chargée normalement (sans le trait), et lorsqu'en plus, je place du texte dans le div d'id trait, le texte s'affiche sur la page en décalant les éléments HTML vers le bas, ce qui me laisse penser que le div trait n'est pas considéré comme absolute, pourtant pour m'en assurer, j'ai directement mis l'attribut :

Code html :

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

1
2
3
        <div id="trait" style="position: absolute">		
 
	<div />

Quelqu'un a-t-il une idée qui pourrait m'aider à résoudre mon problème? Quelqu'un a-t-il déjà rencontré ce cas de figure?

D'avance merci, et si vous avez besoin de précisions, n'hésitez pas à les demander.

PS : la fonction drawLine() est une fonction répandue, j'utilise cette version :

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
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId)
{
	if(espacementPointille<1) { espacementPointille=1; }
        var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
 
	var nbPointCentraux=Math.ceil(lg/espacementPointille)-1;
        var stepX=(x2-x1)/(nbPointCentraux+0);
	var stepY=(y2-y1)/(nbPointCentraux+0);
 
        var strNewPoints='';
	for(var i=1 ; i<nbPointCentraux ; i++)
	{
		strNewPoints+='<div style="font-size:1px; width:1px; heigth:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; ">&nbsp;</div>';
	}
 
	var myContainer=document.getElementById(divId);
	myContainer.innerHTML = strNewPoints;
}

mais comme le trait se trace bien, je pense que le problème est situé en amont

Voici également la fonction évènement 'load' :

Code :

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

1
2
3
4
5
6
7
8
9
 
var barreLogo = document.getElementById("barreLogo");
var partSignature = document.getElementById("partSignature");
 
window.addEventListener('load', function() {					
 
drawLine(barreLogo.offsetWidth,partSignature.offsetTop,barreLogo.offsetWidth+100,partSignature.offsetTop-100,"red",1,"trait");
 
}, true);

où barreLogo et partSignature font parti du contenu (écrasé par le innerHTML) de la page web,

SpaceFrog · 01/02/2012, 08h37

le document.ready ne te convient pas ?

NoSmoking · 03/02/2012, 20h00

Bonjour,
erreur de code HTML

<body>	
  <div id="trait">
    <!-- trait tracé dynamiquement par une fonction JavaScript -->
  <div /> <!-- DIV NON FERMEE -->
  <div id="conteneurPrincipal">
    <!-- éléments HTML contenu -->
  </div>
</body>

01/02/2012, 08h37	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 075 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 075 Points : 45 211 Points : 45 211	le document.ready ne te convient pas ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

03/02/2012, 20h00	#3
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, erreur de code HTML <body> <div id="trait"> <!-- trait tracé dynamiquement par une fonction JavaScript --> <div /> <!-- DIV NON FERMEE --> <div id="conteneurPrincipal"> <!-- éléments HTML contenu --> </div> </body>
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email