Page web longue: créer des boutons "développer" et "réduire"

Développement, conception de sites web, PHP, (X)HTML, ASP, Ajax, CSS, Javascript, Flash, MySQL, et autres ont leurs entrées dans cette section. On peut aussi parler d'hébergement, de maintenance, de sécurité...

Modérateur: Modérateurs

Page web longue: créer des boutons "développer" et "réduire"

Messagepar irontree » 18 Oct 2008 20:11

Salut,
J'aimerais créer des boutons "tout réduire" et "tout développer" dans une page web qui est très longue. Ces boutons seraient en vue à côté de titres de chapitres. Quand on cliquerait dessus, le chapitre se développerait ou se réduirait.
J'ai déjà vu ça de nombreuses fois, comme par exemple sur cette page : http://javascript.developpez.com/faq/ , mais comment faire? Du code html suffit-il?
Merci de me lancer sur une piste!
irontree
 
Messages: 2
Inscription: 18 Oct 2008 20:04

Re: Page web longue: créer des boutons "développer" et "réduire"

Messagepar Dell » 18 Oct 2008 21:16

Bonsoir irontree

et bienvenu sur Libellules

pour voir le code utilisé, il te suffit une fois sur la page d'accueil du site donné en lien

de faire un clique droit et de sélectionner dans la fenêtre qui s'ouvre code source de la page et de repérer la ligne qui correspond à :arrow: Image et tu auras le code utilisé..

_DELL_
Windows 10/ 64 Bits, FireFox, F-Secure,
Internet InOne M , SwisscomTv InOne M, Téléphonie IP InOne M, Mobile InOne S
Avatar de l’utilisateur
Dell
Modérateur
Modérateur
 
Messages: 9468
Inscription: 16 Oct 2002 16:57
Localisation: Aigle (Suisse)

Re: Page web longue: créer des boutons "développer" et "réduire"

Messagepar werewolf » 18 Oct 2008 22:20

Bonjour !

En fait, il ne s'agit pas de javascript (chose curieuse pour un site de javascript). La page est rechargée avec un argument «?filtre=» qui définit ce qui doit être caché «N» et ce qui doit être développé «O».

Il n'y a qu'à faire le test de changer un «O» en «N» et de valider l'url pour voir le résultat.

Donc, c'est un langage coté serveur qui est utilisé (surement du PHP).

Si jamais tu veux utiliser un tel système, et que tu ne peux/veux pas programmer en langage coté serveur, le javascript et les feuilles de style peuvent t'aider...

Sur le même site, tu peux utiliser ce script, adapté à tes besoins :
http://javascript.developpez.com/source ... ms#domhide

En espérant que cela t'aidera...
Avatar de l’utilisateur
werewolf
Libellulien Junior
Libellulien Junior
 
Messages: 196
Inscription: 25 Fév 2004 08:43
Localisation: Québec

Re: Page web longue: créer des boutons "développer" et "réduire"

Messagepar Falkra » 18 Oct 2008 22:28

Bonsoir bienvenue sur le forum,

En javascript aussi, j'aime bien celui-ci, qui affiche de façon douce :
http://www.editeurjavascript.com/script ... _3_812.php

Il est en démo sur la page, en cliquant sur le petit [+] tu as un aperçu.
Avatar de l’utilisateur
Falkra
Admin libellules.ch
Admin libellules.ch
 
Messages: 25882
Inscription: 30 Jan 2005 13:44
Localisation: 127.0.0.1

Re: Page web longue: créer des boutons "développer" et "réduire"

Messagepar irontree » 18 Oct 2008 22:40

Merci à vous trois!
Il me faut effectivement quelque chose en javascript, car ma page ne doit pas être rechargée côté serveur.
J'ai trouvé ce code qui est une bonne piste pour moi -- juste avant que Falkra envoie le sien beaucoup plus élégant... -->
Code: Tout sélectionner
<html>
   <head>
      <title>Enter the title of your HTML document here</title>
   </head>
<script type='text/javascript'>
function affCache(idpr)
{
var pr = document.getElementById(idpr);
if (pr.style.display == "") {
pr.style.display = "none";}
else {
pr.style.display = "";}

}
</script>
<body>
<input type="image" src="images/rp.gif" onclick="affCache('pr1');"
value="Afficher les Promotions"/><br><br>
<div id="pr1" style="display:none" style='border:1px double black'>c moi</div>   
 </body>
</html>

Grand merci encore!
irontree
 
Messages: 2
Inscription: 18 Oct 2008 20:04

Re: Page web longue: créer des boutons "développer" et "réduire"

Messagepar werewolf » 19 Oct 2008 02:57

En effet, il est beaucoup plus beau :supers: . Vais même me le mettre de coté pour plus tard, tiens... :lol:

Le seul «problème» que je peux y voir, c'est que si tu veux mettre autre chose que du simple texte, genre images ou lien, le code javascript risque d'être un brin... complexe, voire bordélique, 'scusez le terme ! Mais l'idée est très intéressante, einh !
Avatar de l’utilisateur
werewolf
Libellulien Junior
Libellulien Junior
 
Messages: 196
Inscription: 25 Fév 2004 08:43
Localisation: Québec


Retourner vers Développement, conception de sites web

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités