Partage

Un élément caché qui réapparait

... et un élément affiché qui disparait.

Sujet résolu

22 février 2010 à 19:15:39

Bonsoir,

Après tant d'années passées dans l'ombre à suivre les tutos et cours, je viens vers vous avec un problème bizarre.

Sur une page de mon site, j'ai 2 blocs :

<div id="page1">
	<div class="page">
		..blabla..
	</div>
	<div class="page">
		..blabla..
	</div>
	<div class="bandeau">
		<button>...</button>
		<small> Page 1/2 </small>
		<button onclick="hide(1);appear(2);">&gt;&gt;</button>
	</div>
</div>
<div id="page2" class="hidden">
	<div class="page">
		..blabla..
	</div>
	<div class="page">
		..blabla..
	</div>
	<div class="bandeau">
		<button onclick="hide(2);appear(1);">&lt;&lt;</button>
		<small> Page 2/2 </small>
		<button>...</button>
	</div>
</div>

Le javascript correspondant est ici :

function hide(page)
	{
		document.getElementById('page'+page).style.display = 'none';
		document.getElementById('page'+page).style.visibility = 'hidden';
	}

	function appear(page)
	{
		document.getElementById('page'+page).style.display = 'block';
		document.getElementById('page'+page).style.visibility = 'visible';
	}

Le code est censé switcher entre les deux pages à l'aide des boutons (il cache une page et affiche l'autre).

Le souci est que quand on clique, le div caché réapparait tout de suite et le div apparu disparait de même.

Je pense que la solution est toute bête, mais ça fait déjà 2 jours que je suis là-dessus.

Pouvez-vous m'aider à trouver le problème svp ?

Cordialement.

PS : Je précise que la page est valide W3C et que Firebug ne détecte aucune erreur Javascript.

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

22 février 2010 à 19:22:29

On peut voir ta page entière / online ? Car à priori le code est bon.

Ps: Il n'est d'aucune utilité de modifier la valeur de visibility si tu changes le display

Darkodam

22 février 2010 à 19:23:11

je viens de tester, ça marche très bien, ça doit venir d'ailleurs

Heru-Luin

22 février 2010 à 19:32:04

Malheureusement le site n'est pas en ligne et il est privé, donc je n'ai pas l'autorisation de coller le contenu du code.

Citation : Darkodam

je viens de tester, ça marche très bien, ça doit venir d'ailleurs

Le CSS ?
Est-ce que le fait d'avoir mis ceci pourrait influer sur le problème ?

.page
{
	width: 343px;
	float: left;
	padding-left: 7px;
	padding-right: 7px;
	height: 296px;
}
.hidden
{
	visibility: hidden;
	display: none;
}
.bandeau
{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 684px;
}

En enlevant le visibility, la deuxième page n'apparait même pas (peut-être est-ce parce que je changement est trop rapide ? Je suis en local.).

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

22 février 2010 à 19:36:11

En gros tu veux qu'on t'aide sans voir le code, si je résume c'est ça ?

Darkodam

22 février 2010 à 19:42:04

page en ligne

Voilà le code que tu nous as donné. Il marche parfaitement.

Sans le code complet, on ne pourra rien faire. Si tu tiens tant à ce que cela reste confidentiel, enlève tout les textes à problèmes. le html/css/javascript ne peut pas être caché sur le web donc ya aucun mal à ce que tu mettes tout ça ici

Heru-Luin

22 février 2010 à 19:48:15

Citation : Tiller

En gros tu veux qu'on t'aide sans voir le code, si je résume c'est ça ?

J'ai déjà fourni le HTML, CSS et le Javascript. Ce qui est à l'intérieur des div est confidentiel (et ça n'est que du texte, donc aucune raison pour que ça fasse buger la page).

Voilà le reste :

<?php
	if (!isset($_GET['page']))
		$page = 'accueil';
	else if ($_GET['page'] == 'index')
		$page = 'accueil';
	else if (file_exists($_GET['page'].'.php'))
		$page = $_GET['page'];
	else
		header('location:./');
?>
<!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" >
	<head>
		<title>Titre du site</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link rel="stylesheet" media="screen" type="text/css" title="design" href="css/style.css" />
		<script type="text/javascript" src="./scripts/scripts.js"></script>
	</head>
	<body>
		<div id="banner"></div>
		<div id="menu"><a href="./">Accueil</a> ~ <a href="./page_bugee.php">Page bugée</a> ~ <a href="./autre.php">Page qui marche</a> ~ <a href="./contact.php">Contact</a></div>
		<div id="content"><?php include('./'.$page.'.php');?></div>
   </body>
</html>

EDIT : Dans le lien que tu as fourni, aucune page ne se cache/n'apparait, elles sont là toutes les deux, tout le temps.

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

22 février 2010 à 19:55:39

Bah si, son code marche très bien chez moi, puisque le bandeau change, et si tu surlignes du texte, et changes deux fois de page, tu vois que ça marche.

Et donnes nous le code généré, sans le php.

Darkodam

22 février 2010 à 21:05:35

j'ai un peu modifié le fichier pour qu'on voit mieux le changement de page, mais ça marche quand même. Je pense que le problème vient d'ailleurs

Heru-Luin

22 février 2010 à 23:44:26

Citation : Tiller

Et donnes nous le code généré, sans le php.

Le php insère exactement le code que j'ai donné dans mon premier post, j'ai testé en enlevant tout le texte et autres trucs non essentiels et ça ne marche toujours pas ...

Citation : Darkodam

Je pense que le problème vient d'ailleurs

Il peut venir du CSS ?
Par exemple si le fait de définir certains attributs empêche que d'autres soient appliqués ?

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

22 février 2010 à 23:47:54

Personnellement j'abandonne, je te passe le relais Darkodam.

Ces histoires à-la-con de confidentialité m'ont toujours énervé, comme si on était là pour voler des codes ou des sites, on a autre chose à faire -_-

M'enfin bref, bonne chance.

Darkodam

22 février 2010 à 23:48:35

Franchement je sais pas, mais si tu veux qu'on t'aide il nous faut tout le code html généré sur ta page (ctrl-u sous firefox, affichage -> source sous IE daube). Tu n'as qu'à enlever tout les textes superflues, il ne serviront pas.

Heru-Luin

22 février 2010 à 23:57:51

Citation : Tiller

Personnellement j'abandonne, je te passe le relais Darkodam.

Ces histoires à-la-con de confidentialité m'ont toujours énervé, comme si on était là pour voler des codes ou des sites, on a autre chose à faire -_-

M'enfin bref, bonne chance.

On sent légèrement ta réticence depuis ta première réponse.
C'est pas parce que tu as foiré tes SGES qu'il faut reprocher aux autres d'être sous contrat de confidentialité.

Je cherche juste des réponses, pas des énervements ...

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

23 février 2010 à 0:00:37

Mdr, quel est le rapport avec Supinfo là dedans ?

Et pour ta gouverne je ne les ai pas foiré -_-

1. On te demande ton code, tu dis non, et tu nous donnes un morceau
2. On te redemande ton code, tu nous donnes un autre morceau
3. On te REREdemande ton code GENERE et tu réponds un truc à la con en rapport avec supinfo plutot que le code.

Si ça se sent dès ma première réponse ma réticence, nous on sent depuis le début ta réticence à vouloir être aider.

On est pas la pour tirer les vers du nez aux personnes qui viennent demander de l'aide, si elles ne fournissent pas ce qu'on veut, elles se démerdent, tout simple.

Heru-Luin

23 février 2010 à 0:02:53

<!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" >
	<head>
		<title>xxx</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link rel="stylesheet" media="screen" type="text/css" title="design" href="css/style.css" />
		<script type="text/javascript" src="./scripts/scripts.js"></script>
	</head>
	<body>
		<div id="content"><script type="text/javascript">
	function hide(page)
	{
		document.getElementById('page'+page).style.display = 'none';
		document.getElementById('page'+page).style.visibility = 'hidden';
	}

	function appear(page)
	{
		document.getElementById('page'+page).style.display = 'block';
		document.getElementById('page'+page).style.visibility = 'visible';
	}

	function precedent(page)
	{
		if (document.getElementById('page'+page) && document.getElementById('page'+(page-1)))
		{
			hide(page);
			appear(page-1);
		}
	}

	function suivant(page)
	{
		if (document.getElementById('page'+page) && document.getElementById('page'+(page+1)))
		{
			hide(page);
			appear(page+1);
		}
	}
</script>
<form method="post" action="./page.html">
	<div id="page1">
		<div class="page">
xxx
		</div>
		<div class="page">
xxx
		</div>
		<div class="bandeau">
			<button>...</button>
			<small> Page 1/3 </small>
			<button onclick="suivant(1);">&gt;&gt;</button>
		</div>
	</div>
	<div id="page2" class="hidden">
		<div class="page">
xxx
		</div>
		<div class="page">
xxx
		</div>
		<div class="bandeau">
			<button onclick="precedent(2);">&lt;&lt;</button>
			<small> Page 2/3 </small>
			<button onclick="suivant(2);">&gt;&gt;</button>
		</div>
	</div>
	<div id="page3" class="hidden">
		<div class="page">
xxx
		</div>
		<div class="page">
xxx
		</div>
		<div class="bandeau">
			<button onclick="precedent(3);">&lt;&lt;</button>
			<small> Page 3/3 </small>
			<button>Envoyer</button>
		</div>
	</div>
</form></div>
   </body>
</html>

Citation : Tiller

Mdr, quel est le rapport avec Supinfo là dedans ?

Et pour ta gouverne je ne les ai pas foiré -_-

1. On te demande ton code, tu dis non, et tu nous donnes un morceau
2. On te redemande ton code, tu nous donnes un autre morceau
3. On te REREdemande ton code GENERE et tu réponds un truc à la con en rapport avec supinfo plutot que le code.

Si ça se sent dès ma première réponse ma réticence, nous on sent depuis le début ta réticence à vouloir être aider.

On est pas la pour tirer les vers du nez aux personnes qui viennent demander de l'aide, si elles ne fournissent pas ce qu'on veut, elles se démerdent, tout simple.

Je donne ce que je peux donner, c'est pas moi qui décide de ça.
J'ai répondu un truc à la con parce que tu as répondu un truc à la con.

Perso j'aimerai bien un peu d'aide, si je ne suis pas autorisé à donner du code, ça n'est pas ma faute (j'ai apposé ma signature sur un tit bout de papier qui m'obligeait à ne rien dévoiler).

J'ai bien essayé de poser quelques questions histoire d'orienter ma recherche du problème mais pas de réponse (au final, le CSS peut faire planter ça ou non ?).

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

23 février 2010 à 0:07:11

Tu as mis id="page" au lieu de id="page1", donc le script ne passe pas la vérification du if(document.getElementById('page' + page)

Heru-Luin

23 février 2010 à 0:10:39

Citation : Tiller

Tu as mis id="page" au lieu de id="page1", donc le script ne passe pas la vérification du if(document.getElementById('page' + page)

page = 1;
"page"+page = "page1", non ?

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

23 février 2010 à 0:11:48

ouais, mais tu as mis id="page", t'as pas le 1.

<div id="page">

Heru-Luin

23 février 2010 à 0:13:28

Citation : Tiller

ouais, mais tu as mis id="page", t'as pas le 1.

<div id="page">

Erreur de copier coller. Je corrige.

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

23 février 2010 à 0:15:37

Citation : Tiller

Erreur de copier coller.

Je dois comprendre par là que c'est encore une fois pas le vrai code ?

Edit: Ajoutes type="button" à tes buttons.

Heru-Luin

23 février 2010 à 0:22:01

Citation : Tiller

Citation : Tiller

Erreur de copier coller.

Je dois comprendre par là que c'est encore une fois pas le vrai code ?

Edit: Ajoutes type="button" à tes buttons.

J'ai viré les infos confidentielles.

En mettant type="button" ça marche, merci

Mais heu ... quand il n'y avait pas type="button" ça lançait quand même les scripts ... je veux dire que je voyais bien le div disparaitre et l'autre réapparaitre (sauf qu'après ça revenait à la situation de départ).

Elle est ou la nuance ?

Concepteur Développeur - Vie Artificielle & Optimisation

Tillertan

23 février 2010 à 0:23:04

Tes bouttons sont considérés comme des type submit du fait qu'ils n'ont pas de type. Donc quand tu cliques ça exécute le javascript, mais ça recharge la page après, donc retour à Zéro.

Mets le sujet en résolu.

Heru-Luin

23 février 2010 à 0:25:03

D'accord ... et le chargement était trop rapide pour que je m'en rende compte ...
Pfiou ... j'aurais jamais trouvé

Merci

Concepteur Développeur - Vie Artificielle & Optimisation