Liste déroulante

01/05/2008, 15h59

Guy Gruais wrote:

> Bonjour,
>
> Question peut-être simpliste pour vous mais que je n'arrive pas à
> résoudre.
>
> Soit une page avec une cinquantaine de rubriques assez courtes.
> Je voudrais en début de page faire une liste déroulante qui permettrait
> d'aller directement à la rubrique concernée sans afficher une fenêtre
> supplémentaire comme on en obtient avec
> <form action ...
> <select ....
> <option.....
> </select
> </form
>
> Merci
>
Bonjour

Peut-être quelque chose comme ça :
http://www.thelin.net/laurent/labo/j...eroulante.html

01/05/2008, 17h03

Guy Gruais a écrit :
> Bonjour,
>
> Question peut-être simpliste pour vous mais que je n'arrive pas à résoudre.

avoir chaque paragraphe avec un ID
(par exemple truc_0, truc_1, etc )

> Je voudrais en début de page faire une liste déroulante qui permettrait
> d'aller directement à la rubrique concernée sans afficher une fenêtre

<form action="#" onsubmit="return false">
<select onchange="location = '#truc_'+this.selectedIndex;">
<option>rubrique 1</option>
<option>rubrique 2</option>
<option>rubrique 3</option>
<option>rubrique 4</option>

<option>rubrique 50</option>
</select></form>

> Merci

et mieux ?

<script type="text/javascript>
function cachetout() {
var R = document.getElementsByTagName('DIV');
for(var i=0; i< R.length; i++)
if(R[i].id.indexOf('truc')==0) R[i].style.display='none';
}
window.onload = cachetout;
</script>

<form action="#" onsubmit="return false">
<select onchange="cachetout();
document.getElementById('truc_'+this.selectedIndex ).style.display='';">
<option>rubrique 1</option>
<option>rubrique 2</option>
<option>rubrique 3</option>
<option>rubrique 4</option>

<option>rubrique 50</option>
</select></form>

<div id="truc_0">
<h2>rubrique 1</h2>
<p> bla bla 1</p>
</div>
<div id="truc_1">
<h2>rubrique 2</h2>
<p> bla bla 2</p>
</div>

<div id="truc_50">
<h2>rubrique 51</h2>
<p> bla bla 51</p>
</div>

Voili voilou

--
sm

01/05/2008, 17h13

Bonjour,

Question peut-être simpliste pour vous mais que je n'arrive pas à résoudre.

Soit une page avec une cinquantaine de rubriques assez courtes.
Je voudrais en début de page faire une liste déroulante qui permettrait
d'aller directement à la rubrique concernée sans afficher une fenêtre
supplémentaire comme on en obtient avec
<form action ...
<select ....
<option.....
</select
</form

Merci

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

01/05/2008, 17h39

SAM a écrit :
>
> et mieux ?

<html>
<script type="text/javascript">
var R;
function cachetout() {
for(var i=0; i<R.length; i++) R[i].style.display='none';
}
function show(quoi) {
quoi = quoi.href.split('#')[1];
cachetout();
document.getElementById(quoi).style.display='';
return false;
}
window.onload = function() {
R = document.getElementById('rubriques');
R = R.getElementsByTagName('DIV');
cachetout();
var L=document.getElementById('menu').getElementsByTag Name('A');
for(var i=0; i<L.length; i++)
L[i].onclick=function(){return show(this);};
document.getElementById('truc_1').style.display='' ;
}
</script>
<style type="text/css">
#menu { list-style: none; width: 140px; float:left;
height: 90%; overflow: auto;}
#rubriques { margin-left: 170px;
height: 90%; overflow: auto;}
</style>

<ul id="menu">
<li><a href="#truc_1">rubrique 1</a></li>
<li><a href="#truc_2">rubrique 2</a></li>
<li><a href="#truc_3">rubrique 3</a></li>

<li><a href="#truc_50">rubrique 50</a></li>
</ul>
<div id="rubriques">
<div id="truc_1">
<h2>rubrique 1</h2>
<p> bla bla 1</p>
</div>
<div id="truc_2">
<h2>rubrique 2</h2>
<p> bla bla 2</p>
</div>
<div id="truc_3">
<h2>rubrique 3</h2>
<p> bla bla 3</p>
</div>

<div id="truc_50">
<h2>rubrique 50</h2>
<p> bla bla 50/p>
</div>
</div>
</html>

devrait fonctionner avec et sans JS
--
sm

01/05/2008, 18h31

Bonjour,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :

> <form action="#" onsubmit="return false">
..... ...
> </select></form>

J'ai réussi à faire fonctionner ce script après plusieurs tâtonnements (je
n'avais rien compris au début pfffffffiiiiiioooouu)
Il devrait me convenir parfaitement. (sous réserve que je puisse disposer
d'une "scrollbar" verticale pour pouvoir faire défiler les rubriques).

Je ne retiens pas le 3ème car l'apparition du "menu" sur la gauche de
l'écran est beaucoup trop importante en hauteur.

Merci pour l'aide

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

01/05/2008, 18h43

Bonjour,

Vous allez être infiniment heureux d'apprendre que dric-li vient d'écrire :

> Peut-être quelque chose comme ça :
> http://www.thelin.net/laurent/labo/j...eroulante.html

Bbbbbbbbbbbbbbeeeeeeeeeeeeeeeennnnnnnnnnnnnnnnn, non justement.
La liste en question ouvre une *autre* page, ce que je ne veux pas. :-)

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

01/05/2008, 19h25

Guy Gruais a écrit :
> Bonjour,

dis-moi Guy :
n'y aurait-il aucune possibilité que tu mettes ta pendule à l'heure ?

> Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :
>
>> <form action="#" onsubmit="return false">

Je sais pas de quoi tu parles.

> .... ...
>> </select></form>
>
> J'ai réussi à faire fonctionner ce script après plusieurs tâtonnements
> (je n'avais rien compris au début pfffffffiiiiiioooouu)
> Il devrait me convenir parfaitement. (sous réserve que je puisse
> disposer d'une "scrollbar" verticale pour pouvoir faire défiler les
> rubriques).

Normalement c'est en place.
regarde :
<http://cjoint.com/?fbuoXLJOxk>

> Je ne retiens pas le 3ème car l'apparition du "menu" sur la gauche de
> l'écran est beaucoup trop importante en hauteur.

C'est quoi le 3ième ?
Me semble que c'est celui en démo (cJoint)
??? tu peux bien la régler toi-même ... height: 40%; par exemple

La démo avec JS : <http://cjoint.com/?fbuxJnt8oH>

--
sm

01/05/2008, 22h02

Bonjour,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :

> n'y aurait-il aucune possibilité que tu mettes ta pendule à l'heure ?

Désolé mais cet après-midi pour une raison que j'ignore ma pendule a avancé
très exactement (à la seconde près) de 2 heures.
Mes messages de 18 h 13 et 19 h 43 ont donc été expédiés à 16 h 13 et 17 h
43. Celui de 19 h 31 est correct.
Toutes mes excuses pour ne pas m'en être rendu compte de suite.

>>> <form action="#" onsubmit="return false">
>
> Je sais pas de quoi tu parles.

Ben, c'était le début du premier script de ton message de 18 h 03

> regarde :
> <http://cjoint.com/?fbuoXLJOxk>

ça a l'air effectivement de fonctionner.
Mes essais ont dû cafouiller, je n'obtenais pas cette présentation

> C'est quoi le 3ième ?

Ben, c'était celui du message de 18 h 39

> ??? tu peux bien la régler toi-même ... height: 40%; par exemple

Ok, j'avais vu.
Quand je parlais de hauteur, je parlais de la liste du premier script du
message de 18 h 03

> La démo avec JS : <http://cjoint.com/?fbuxJnt8oH>
Semble marcher également.

Faudra que je fasse attention.
Quand je quote, j'ai tendance à trop couper les messages de référence, ça a
l'air de rendre mes courriers parfois difficiles à comprendre.

Encore toutes mes excuses et merci pour l'aide.

--
Cordialement

guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais)
http://paysderetz.free.fr/

01/05/2008, 15h59	#1 (permalink)
dric-li Messages: n/a Hébergeur:	Re: Liste déroulante Guy Gruais wrote: > Bonjour, > > Question peut-être simpliste pour vous mais que je n'arrive pas à > résoudre. > > Soit une page avec une cinquantaine de rubriques assez courtes. > Je voudrais en début de page faire une liste déroulante qui permettrait > d'aller directement à la rubrique concernée sans afficher une fenêtre > supplémentaire comme on en obtient avec > <form action ... > <select .... > <option..... > </select > </form > > Merci > Bonjour Peut-être quelque chose comme ça : http://www.thelin.net/laurent/labo/j...eroulante.html

01/05/2008, 17h03	#2 (permalink)
SAM Messages: n/a Hébergeur:	Re: Liste déroulante Guy Gruais a écrit : > Bonjour, > > Question peut-être simpliste pour vous mais que je n'arrive pas à résoudre. avoir chaque paragraphe avec un ID (par exemple truc_0, truc_1, etc ) > Je voudrais en début de page faire une liste déroulante qui permettrait > d'aller directement à la rubrique concernée sans afficher une fenêtre <form action="#" onsubmit="return false"> <select onchange="location = '#truc_'+this.selectedIndex;"> <option>rubrique 1</option> <option>rubrique 2</option> <option>rubrique 3</option> <option>rubrique 4</option> <option>rubrique 50</option> </select></form> > Merci et mieux ? <script type="text/javascript> function cachetout() { var R = document.getElementsByTagName('DIV'); for(var i=0; i< R.length; i++) if(R[i].id.indexOf('truc')==0) R[i].style.display='none'; } window.onload = cachetout; </script> <form action="#" onsubmit="return false"> <select onchange="cachetout(); document.getElementById('truc_'+this.selectedIndex ).style.display='';"> <option>rubrique 1</option> <option>rubrique 2</option> <option>rubrique 3</option> <option>rubrique 4</option> <option>rubrique 50</option> </select></form> <div id="truc_0"> <h2>rubrique 1</h2> <p> bla bla 1</p> </div> <div id="truc_1"> <h2>rubrique 2</h2> <p> bla bla 2</p> </div> <div id="truc_50"> <h2>rubrique 51</h2> <p> bla bla 51</p> </div> Voili voilou -- sm

01/05/2008, 17h13	#3 (permalink)
Guy Gruais Messages: n/a Hébergeur:	Liste déroulante Bonjour, Question peut-être simpliste pour vous mais que je n'arrive pas à résoudre. Soit une page avec une cinquantaine de rubriques assez courtes. Je voudrais en début de page faire une liste déroulante qui permettrait d'aller directement à la rubrique concernée sans afficher une fenêtre supplémentaire comme on en obtient avec <form action ... <select .... <option..... </select </form Merci -- Cordialement guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais) http://paysderetz.free.fr/

01/05/2008, 17h39	#4 (permalink)
SAM Messages: n/a Hébergeur:	Re: Liste déroulante SAM a écrit : > > et mieux ? <html> <script type="text/javascript"> var R; function cachetout() { for(var i=0; i<R.length; i++) R[i].style.display='none'; } function show(quoi) { quoi = quoi.href.split('#')[1]; cachetout(); document.getElementById(quoi).style.display=''; return false; } window.onload = function() { R = document.getElementById('rubriques'); R = R.getElementsByTagName('DIV'); cachetout(); var L=document.getElementById('menu').getElementsByTag Name('A'); for(var i=0; i<L.length; i++) L[i].onclick=function(){return show(this);}; document.getElementById('truc_1').style.display='' ; } </script> <style type="text/css"> #menu { list-style: none; width: 140px; float:left; height: 90%; overflow: auto;} #rubriques { margin-left: 170px; height: 90%; overflow: auto;} </style> <ul id="menu"> <li><a href="#truc_1">rubrique 1</a></li> <li><a href="#truc_2">rubrique 2</a></li> <li><a href="#truc_3">rubrique 3</a></li> <li><a href="#truc_50">rubrique 50</a></li> </ul> <div id="rubriques"> <div id="truc_1"> <h2>rubrique 1</h2> <p> bla bla 1</p> </div> <div id="truc_2"> <h2>rubrique 2</h2> <p> bla bla 2</p> </div> <div id="truc_3"> <h2>rubrique 3</h2> <p> bla bla 3</p> </div> <div id="truc_50"> <h2>rubrique 50</h2> <p> bla bla 50/p> </div> </div> </html> devrait fonctionner avec et sans JS -- sm

01/05/2008, 18h31	#5 (permalink)
Guy Gruais Messages: n/a Hébergeur:	Re: Liste déroulante Bonjour, Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire : > <form action="#" onsubmit="return false"> ..... ... > </select></form> J'ai réussi à faire fonctionner ce script après plusieurs tâtonnements (je n'avais rien compris au début pfffffffiiiiiioooouu) Il devrait me convenir parfaitement. (sous réserve que je puisse disposer d'une "scrollbar" verticale pour pouvoir faire défiler les rubriques). Je ne retiens pas le 3ème car l'apparition du "menu" sur la gauche de l'écran est beaucoup trop importante en hauteur. Merci pour l'aide -- Cordialement guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais) http://paysderetz.free.fr/

01/05/2008, 18h43	#6 (permalink)
Guy Gruais Messages: n/a Hébergeur:	Re: Liste déroulante Bonjour, Vous allez être infiniment heureux d'apprendre que dric-li vient d'écrire : > Peut-être quelque chose comme ça : > http://www.thelin.net/laurent/labo/j...eroulante.html Bbbbbbbbbbbbbbeeeeeeeeeeeeeeeennnnnnnnnnnnnnnnn, non justement. La liste en question ouvre une autre page, ce que je ne veux pas. :-) -- Cordialement guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais) http://paysderetz.free.fr/

01/05/2008, 19h25	#7 (permalink)
SAM Messages: n/a Hébergeur:	Re: Liste déroulante Guy Gruais a écrit : > Bonjour, dis-moi Guy : n'y aurait-il aucune possibilité que tu mettes ta pendule à l'heure ? > Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire : > >> <form action="#" onsubmit="return false"> Je sais pas de quoi tu parles. > .... ... >> </select></form> > > J'ai réussi à faire fonctionner ce script après plusieurs tâtonnements > (je n'avais rien compris au début pfffffffiiiiiioooouu) > Il devrait me convenir parfaitement. (sous réserve que je puisse > disposer d'une "scrollbar" verticale pour pouvoir faire défiler les > rubriques). Normalement c'est en place. regarde : <http://cjoint.com/?fbuoXLJOxk> > Je ne retiens pas le 3ème car l'apparition du "menu" sur la gauche de > l'écran est beaucoup trop importante en hauteur. C'est quoi le 3ième ? Me semble que c'est celui en démo (cJoint) ??? tu peux bien la régler toi-même ... height: 40%; par exemple La démo avec JS : <http://cjoint.com/?fbuxJnt8oH> -- sm

01/05/2008, 22h02	#8 (permalink)
Guy Gruais Messages: n/a Hébergeur:	Re: Liste déroulante Bonjour, Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire : > n'y aurait-il aucune possibilité que tu mettes ta pendule à l'heure ? Désolé mais cet après-midi pour une raison que j'ignore ma pendule a avancé très exactement (à la seconde près) de 2 heures. Mes messages de 18 h 13 et 19 h 43 ont donc été expédiés à 16 h 13 et 17 h 43. Celui de 19 h 31 est correct. Toutes mes excuses pour ne pas m'en être rendu compte de suite. >>> <form action="#" onsubmit="return false"> > > Je sais pas de quoi tu parles. Ben, c'était le début du premier script de ton message de 18 h 03 > regarde : > <http://cjoint.com/?fbuoXLJOxk> ça a l'air effectivement de fonctionner. Mes essais ont dû cafouiller, je n'obtenais pas cette présentation > C'est quoi le 3ième ? Ben, c'était celui du message de 18 h 39 > ??? tu peux bien la régler toi-même ... height: 40%; par exemple Ok, j'avais vu. Quand je parlais de hauteur, je parlais de la liste du premier script du message de 18 h 03 > La démo avec JS : <http://cjoint.com/?fbuxJnt8oH> Semble marcher également. Faudra que je fasse attention. Quand je quote, j'ai tendance à trop couper les messages de référence, ça a l'air de rendre mes courriers parfois difficiles à comprendre. Encore toutes mes excuses et merci pour l'aide. -- Cordialement guy.siaurg@free.invalid (inverser siaurg pour retrouver gruais) http://paysderetz.free.fr/

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