Discussion :

[Saoua83]

bonjour,

Toute nouvelle en développement web, je viens vous demander un coup de pouce, car je bloque un peu sur ce point.

Mon problème est: J'ai une page en perl/cgi (peu importe) et j'utilise un peu de javascript pour montrer ou cacher certaine partie de la page. Ce que j'aimerais faire c'est que lorsque: je clique sur le bouton "show" d'une des partie, la page se recharge au niveau de cette partie. J'ai évidemment pensé à faire cela avec une ancre, mais je ne sais pas où la placer, pour que le refresh sur celle-ci se fasse uniquement quand on appuie sur le bouton show correspondant.

Voici quelques bouts de codes:
La petite fonction JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
<SCRIPT language=\"JavaScript\" type=\"text/javascript\">
			function showDiv(divname) {
				document.getElementById(divname).style.visibility = \"visible\";
				document.getElementById(divname).style.display = \"block\";
			}
			function hideDiv(divname) {
				document.getElementById(divname).style.visibility = \"hidden\";
				document.getElementById(divname).style.display = \"none\";
			} 
	</SCRIPT>

et un petit bout de mon html/perl/cgi :

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
 
	print "<p><span class=\"but\"><b>&nbsp &nbsp General Information &nbsp &nbsp </b></span>&nbsp &nbsp
	<input type=\"submit\" onclick=\"javascript:showDiv('ginf');\" value=\"Show\" />
	<input type=\"submit\" onclick=\"javascript:hideDiv('ginf');\" value=\"Hide\" />
	<div id=\"ginf\"style=\"display:active\">
	<p><b> HGNC Identifier : </b><a href=\"$HGNCurl$hgnc_id\">$hgnc_id</a> <br /><b> HGNC Approaved Name : </b> $AppN <br /> 
	<b> HGNC Approaved Symbol :</b> $AppS <br /><b> HGNC Alias Symbol : </b>";
	foreach my $e(@alias){if ($e ne $alias[$#alias]){print $e.", ";}else{print $e;}}
	print "<br /><b> HGNC Previous Symbol : </b>";
	foreach my $e(@previous){if ($e ne $previous[$#previous]){print $e.", ";}else{print $e;}}
	print "<br /> <b>Chromosome Band :</b> $ChrBand <br /><b> Locus Type :</b> $LocusType <br />
	<b> Entrez Gene Identifier : </b><a href=\"$EGurl$EntrezGeneId\">$EntrezGeneId</a><br />
	</p></div>";
 
	# Expression Tissue
	print "<hr /><p><span class=\"but\"><b>&nbsp &nbsp Expression Information &nbsp &nbsp</b></span>&nbsp &nbsp
	<input type=\"submit\" onclick=\"javascript:showDiv('expr');\" value=\"Show\" />
	<input type=\"submit\" onclick=\"javascript:hideDiv('expr');\" value=\"Hide\" />
	<div id=\"expr\" style=\"display:none\"><span class=\"align_right\"><a href=\"#toppage\"> top return </a></span><br />
	<p><b>Tissue(s) (Place(s) of expression) : </b><br />";
         ### mettre ancre ici mais quand et ou l'appeler ??? print "<a name='Ancref'></a>";
	foreach my $e(@tissue){if ($e ne $tissue[$#tissue]){print $e.", ";}else{print $e;}}
	print "</p></div>";

J'espère avoir été relativement clair. Merci d'avance de votre aide.

[SpaceFrog]

Code :

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

self.location.href="#"+divname;

[andry.aime]

Salut,
document.getElementById(divname).style.visibility n'est plus utile car tu as déjà document.getElementById(divname).style.display.

[Saoua83]

Merci à vous 2, par contre, est-ce qu'il serait possible de savoir où faut-il rajouter

Code :

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

self.location.href="#"+divname;

?

[SpaceFrog]

juste après la ligne ou tu le rend visible ?

[andry.aime]

Tu le mets à la place de

Code :

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

1
2
<input type=\"submit\" onclick=\"javascript:showDiv('expr');\" value=\"Show\" />
	<input type=\"submit\" onclick=\"javascript:hideDiv('expr');\" value=\"Hide\" />

[SpaceFrog]

je l'aurais mis dans la focntion ...

[Saoua83]

Je l'ai mis dans la fonction, et ça fonctionne nickel.

Ce qui donne:

Code :

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

1
2
3
4
5
6
7
8
9
<SCRIPT language=\"JavaScript\" type=\"text/javascript\">
			function showDiv(divname) {
				document.getElementById(divname).style.display = \"block\";
				self.location.href=\"#\"+divname;
			}
			function hideDiv(divname) {
				document.getElementById(divname).style.display = \"none\";
			} 
	</SCRIPT>

Avec mon ancre, là où je veux:

Code :

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

1
2
3
4
print "<div id=\"ref\"style=\"display:none\">";
    print "<a name='ref'></a>";
    print "<p>texte à cacher/afficher</p>";
print "</div>";

Merci à vous, rapide et efficace.

__EDIT__

même pas besoin de la ligne:

Code :

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

 print "<a name='ref'></a>";

apparemment c'est la déclaration du div qui sert directement de point d'ancrage (si j'ai bien tout compris )