Ré-afficher une page

Bonjour,
Mon problème est le suivant :
Dans une page j'affiche l'heure (script javascript), quand je veux ré-affiché la page par F5, par exemple, l'affichage de l'heure disparaît momentanément et le reste de la page se décale.
Est-il possible d'éviter cela ?
Merci à tous
Modifié par Laurie-Anne (08 Oct 2012 - 15:09)

en faisant du CSS correct

PS: enlève ton mail si tu veut pas te faire matraquer par les robots spammeurs...

Bonjour,
Je pense que le CSS est correct, je ne vois pas le rapport. La seule choses qui disparaît
est l'heure, peut-être est-ce dû à "javascript" ?

Salut,

peut être la combinason d'un mauvais script JS et d'une mauvaise pratique CSS.

Tu as le résultat en ligne pour qu'on t'oriente vers qque chose qui marche ?

alecour a écrit :
Je pense que le CSS est correct, je ne vois pas le rapport. La seule choses qui disparaît est l'heure, peut-être est-ce dû à "javascript" ?

Si ta mise en page chasse quand l'heure n'est pas affiché, c'est que ton CSS est mal fait.

Le fait que l'affichage de l'heure disparaisse momentanément, ça c'est du au javascript. (plus précisément au fait que le script soit appelé a la fin du chargement de la page à mon avis)

Voilà le code html ou j'ai inséré le script "heure.js" :

<table border="0" width="100%" height="20" cellspacing="0" cellpadding="0" style="*background:url(images/paper2.jpg);">
			<tr>
				<th align=left valign=top width=100 height=100>
					<img class="arrondie" align="left" onmouseover="this.src='images/bibi2.png'" 
					onmouseout="this.src='anim/27.gif'" src="anim/27.gif" width="100" height="100" />
				</th>
				<th align=left valign=top style="color:green; font-weight:bold; font-family:verdana;"><i><?php echo datedujour(); ?></i></th>
				<th align=center valign=top width=900 height=100>
					<h1><i onMouseover="this.innerHTML='Le Site de Madiana Web'"
					onMouseout="this.innerHTML='Le Site de Madiana Web'">Le Site de Madiana Web</i></h1>
				</th>
				<th align=right valign=top style="color:green; font-weight:bold; font-family:verdana;"><i>[b]<script src=[#red]heure.js[/#]></script>[/b]</span></i></th>
				<th align=left valign=top width=100 height=100>
					<img class="arrondie" align="right" onmouseover="this.src='images/bernard.jpg'" 
					onmouseout="this.src='images/pipou.bmp'" src="images/pipou.bmp" width="75" height="100" />
				</th>
			</tr>
</table>

Ou se trouve le problème de ré-affichage ?

*Merci d'utiliser la colorisation syntaxique pour la présentation de vos codes.
Modifié par 6l20 (10 Oct 2012 - 09:53)

Le problème... par ou commencer?..

- La mise en page avec un tableau ( on est en 2012, plus en 1998 ... )

Tu va me dire "ça à rien a voir avec mon problème", mais lorsque tu utilise un tableau (sauf dispositions particulières) le navigateur doit parcourir l'intégralité du tableau avant d'afficher les données, donc, le script qu'il contient est exécuté a retardement.

- Les attributs sans guillemets

Là ça n'a probablement rien a voir mais c'est moche...


- Le span qui est fermé mais jamais ouvert

<script src=heure.js></script></span>

- Les styles embarqués et mixés aux attributs obsolétes

bref, désolé de le dire mais y a tout a refaire (encore qu je n'ai pas vu le script JS...)

Bonjour,
Merci pour la réponse, en effet, j'ai supprimé la balise de fermeture </span>. En HTML5, les guillemets sont facultatifs.
Voici le code du script :

<script type="text/javascript">
			function rafraichir()
		{
			var text = '';
			var dn = '';
			var date = new Date();
 
		/* Fonction ' HEURES ' */
			var heure = date.getHours();
			var hour = date.getHours();
			if (heure>12)
		{
		heure=heure-12;
		}
		/* Fonction ' MINUTES ' */
			var minutes = date.getMinutes();
		/* Fonction ' SECONDES ' */
			var secondes = date.getSeconds();
		  
				heure=checkTime(heure);
				minutes=checkTime(minutes);
				secondes=checkTime(secondes);
				dn=checkAmPm(hour);
  
		/* On pr?pare l'affichage de la date et de l'heure */

			text += '<b><font style="font-size: 10pt; font-style: italic; color: #006400;">';
			text +=  heure+':'+minutes+':'+secondes;
			text += ' '+dn;
			text += '</font></b>'; 
 
		/* On indique que cette date sera affich?e dans une balise dont l'"id" est "affiche_date" */
			document.getElementById('heure').innerHTML = text;
	}

		function checkTime(i)
		{
		if (i<10)
		  {
		  i="0" + i;
		  }
		return i;
		}

		function checkAmPm(j)
		{
		if (j<12)
		  {
		  dn='am';
		  }
		else
		  {
		  dn='pm';
		  }
		return dn;
		}

		/* On écrit la balise dons l'id est "heure" */
		/* On peut aussi choisir une autre balise HTML ! */
		document.write('<p id="heure"></p>');
		 
		// Enfin, on rafraichît la fonction "rafraichir" toutes les secondes.
		setInterval('rafraichir()',1000);

	</script>

Effectivement, je vais remplacer le tableau par autre chose. Que pouvez-vous me conseiller?

*Merci d'utiliser la colorisation syntaxique pour la présentation de vos codes.
Modifié par 6l20 (10 Oct 2012 - 09:52)

alecour a écrit :
En HTML5, les guillemets sont facultatifs.

Je ne parle pas d'obligation mais de bonnes pratiques.

alecour a écrit :
Effectivement, je vais remplacer le tableau par autre chose. Que pouvez-vous me conseiller?

HTML + CSS

J'ai remplacé le tableau par ceci :

<div style="float:left;">
<img class="arrondie" align="left" onmouseover="this.src='images/bibi2.png'" 
onmouseout="this.src='anim/27.gif'" src="anim/27.gif" width="100" height="100" />
</div>
<div style="float:left; color:green; font-weight:bold; font-size:10pt; font-family:verdana;"><i><?php echo datedujour(); ?></i></div>
<div style="float:left; margin-left:250px; position:relative; top:-20px;">
<h1><i>Le Site de Madiana Web</i></h1>
</div>
<div style="float:right;">
<img class="arrondie" align="right" onmouseover="this.src='images/bernard.jpg'" 
onmouseout="this.src='images/pipou.bmp'" src="images/pipou.bmp" width="75" height="100" />
</div>
[b][#red]<div style="float:right; position:relative; top:-16px; color:green; font-weight:bold; font-family:verdana;"><i><script src=heure.js></script></i></div> [/#][/b]

Le problème reste entier, la <div> en rouge ou il y a le script disparaît lorsque la page se réaffiche et c'est cela que je ne souhaite pas.

*Merci d'utiliser la colorisation syntaxique pour la présentation de vos codes.
Modifié par 6l20 (10 Oct 2012 - 09:51)