Liste déroulante

13 réponses

Guy Gruais

01/05/2008 à 18:13

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/

10 réponses

1 2

dric-li

01/05/2008 à 16:59

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/js/listederoulante.html

SAM

01/05/2008 à 18:03

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

SAM

01/05/2008 à 18:39

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').getElementsByTagName('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

Guy Gruais

01/05/2008 à 19:31

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

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

Guy Gruais

01/05/2008 à 19:43

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/js/listederoulante.html

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

--
Cordialement

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

SAM

01/05/2008 à 20:25

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

Guy Gruais

01/05/2008 à 23:02

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

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

01/05/2008 à 23:22

Salut,
Le jeudi 1 mai 2008 à 23:02, Guy Gruais a écrit :

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.

Ton Windows ne serait-il pas voisin (en multiboot) avec un Linux ?
Parce qu'avec je ne sais plus trop quelle distribution (Fedora?), le
passage de Linux à Windows recalait systématiquement l'horloge en heure
TU/GMT.

Sinon, peut-être un utilitaire calendrier/horaire qui serait mal configuré
?

@+
--
rm

SAM

01/05/2008 à 23:47

Guy Gruais a écrit :

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.
Toutes mes excuses pour ne pas m'en être rendu compte de suite.

Bon, exceptionnellement, tu es excusé :-)

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

La démo est basée sur celui de 18h39 (le 3ième donc)

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

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

Avec le post de 18h39 ? tu avais dû oublier les css ou bien il y avait
une coquille ? (je ne me souviens pas si j'avais testé).
Pour la démo la hauteur a été réduite.

Quand je parlais de hauteur, je parlais de la liste du premier script du
message de 18 h 03

Oui, celui-là n'avait pas de mise en forme (css)
Inutile puisque un simple select et une seule rubrique à la fois à l'écran.

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.

Surtout quand en plus on est perdu dans les horaires :-)
(et qu'on n'a pas l'habitude d'afficher les posts par fils)

--
sm

Guy Gruais

02/05/2008 à 00:35

Bonjour,

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

Ton Windows ne serait-il pas voisin (en multiboot) avec un Linux ?
Parce qu'avec je ne sais plus trop quelle distribution (Fedora?), le
passage de Linux à Windows recalait systématiquement l'horloge en
heure TU/GMT.

GAGNE !!!!!!!!!!!!!!!!

Cet après-midi, j'ai tenté une nouvelle fois d'installer Ubuntu (version
avril 2008 cette fois-ci).
Et effectivement lors de l'installation, j'ai remarqué cette anomalie.
Puis pffffffffffffffttttttttt, envolée en revenant sous WP

Fallait y penser, Bravo :-)

--
Cordialement

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

1 2

Liste déroulante

10 réponses

Veuillez sélectionner un problème