Cacher une partie d'une page Web

Résolu

engel_aurelien

Messages postés: 8
Date d'inscription: samedi 24 janvier 2004
Statut: Membre
Dernière intervention: 11 mars 2006

- 24 mai 2005 à 11:50
JacquesDW

Messages postés: 4
Date d'inscription: samedi 19 février 2005
Statut: Membre
Dernière intervention: 10 août 2005

- 10 août 2005 à 17:35

Bonjour,

j'ai un formulaire affichant diverse infos mais je souhaiterai en
cacher une partie afin de n'afficher que les infos essentielles.

merci.

A voir également:

Cacher une partie d'une page Web
Caché des zone dans une page web,div,case,ligne de tableau... - Codes sources - Javascript (Divers)
Générer un PDF à partir d'une page web avec C# ✓ - Forum - C# / .NET
Ouvrir un document Excel à partir d'une page web ✓ - Forum - Javascript / DHTML
Ouvrir page web à partir d'une application ✓ - Forum - Delphi / Pascal
Ouvrir une page WEB à partir d'un bouton ✓ - Forum - VB.NET

8 réponses

Réponse 1 / 8

la_pin

Messages postés: 275
Date d'inscription: mercredi 11 août 2004
Statut: Membre
Dernière intervention: 15 décembre 2005

26 mai 2005 à 12:50

Dans le HEAD

<style type="text/css" media="all">

/* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */

.cachediv {

visibility: hidden;

overflow: hidden;

height: 1px;

margin-top: -1px;

position: absolute;

}

</style>

<script type="text/javascript">

/*

* Montre / Cache un div

*/

function DivStatus( nom, numero )

{

var divID = nom + numero;

if (
document.getElementById && document.getElementById( divID ) )
// Pour les navigateurs récents

{

Pdiv = document.getElementById(
divID );

PcH = true;

}

else if (
document.all && document.all[ divID ] ) // Pour les veilles
versions

{

Pdiv = document.all[ divID ];

PcH = true;

}

else if (
document.layers && document.layers[ divID ] ) // Pour les très
veilles versions

{

Pdiv = document.layers[ divID ];

PcH = true;

}

else

{

PcH = false;

}

if ( PcH )

{

Pdiv.className ( Pdiv.className
'cachediv' ) ? '' : 'cachediv';

}

}

/*

* Cache tous les divs ayant le même préfixe

*/

function CacheTout( nom )

{

var NumDiv = 1;

if ( document.getElementById ) // Pour les navigateurs récents

{

while ( document.getElementById(
nom + NumDiv) )

{

SetDiv = document.getElementById( nom + NumDiv );

if ( SetDiv && SetDiv.className !=
'cachediv' )

{

DivStatus(
nom, NumDiv );

}

NumDiv++;

}

}

else if ( document.all ) // Pour les veilles versions

{

while ( document.all[ nom +
NumDiv ] )

{

SetDiv = document.all[ nom + NumDiv ];

if ( SetDiv && SetDiv.className !=
'cachediv' )

{

DivStatus(
nom, NumDiv );

}

NumDiv++;

}

}

else if ( document.layers ) // Pour les très veilles versions

{

while ( document.layers[ nom +
NumDiv ] )

{

SetDiv = document.layers[ nom + NumDiv ];

if ( SetDiv && SetDiv.className !=
'cachediv' )

{

DivStatus(
nom, NumDiv );

}

NumDiv++;

}

}

}

/*

* Montre tous les divs ayant le même préfixe

*/

function MontreTout( nom )

{

var NumDiv = 1;

if ( document.getElementById ) // Pour les navigateurs récents

{

while ( document.getElementById(
nom + NumDiv) )

{

SetDiv = document.getElementById( nom + NumDiv );

if ( SetDiv && SetDiv.className != '' )

{

DivStatus(
nom, NumDiv );

}

NumDiv++;

}

}

else if ( document.all ) // Pour les veilles versions

{

while ( document.all[ nom +
NumDiv ] )

{

SetDiv = document.all[ nom + NumDiv ];

if ( SetDiv && SetDiv.className != '' )

{

DivStatus(
nom, NumDiv );

}

NumDiv++;

}

}

else if ( document.layers ) // Pour les très veilles versions

{

while ( document.layers[ nom +
NumDiv ] )

{

SetDiv = document.layers[ nom + NumDiv ];

if ( SetDiv && SetDiv.className != '' )

{

DivStatus(
nom, NumDiv );

}

NumDiv++;

}

}

}

/*

* Inverse les divs: Cache les divs visible et montre le divs cachés :)

*/

function InverseTout( nom )

{

var NumDiv = 1;

if ( document.getElementById ) // Pour les navigateurs récents

{

while ( document.getElementById(
nom + NumDiv ) )

{

SetDiv = document.getElementById( nom + NumDiv );

DivStatus( nom, NumDiv );

NumDiv++;

}

}

else if ( document.all ) // Pour les veilles versions

{

while ( document.all[ nom +
NumDiv ] )

{

SetDiv = document.all[ nom + NumDiv ];

DivStatus( nom, NumDiv );

NumDiv++;

}

}

else if ( document.layers ) // Pour les très veilles versions

{

while ( document.layers[ nom +
NumDiv ] )

{

SetDiv = document.layers[ nom + NumDiv ];

DivStatus( nom, NumDiv );

NumDiv++;

}

}

}

</script>

Dans le BODY

- [javascript:DivStatus( 'mondiv', '1' ) Ouvrir/Fermer le Bloc 1]

- [javascript:DivStatus( 'mondiv', '2' ) Ouvrir/Fermer le Bloc 2]

- [javascript:DivStatus( 'mondiv', '3' ) Ouvrir/Fermer le Bloc 3]

- [javascript:DivStatus( 'mondiv', '4' ) Ouvrir/Fermer le Bloc 4]

- [javascript:MontreTout( 'mondiv' ) Ouvrir tous les Blocs]

- [javascript:CacheTout( 'mondiv' ) Fermer tous les Blocs]

- [javascript:InverseTout( 'mondiv' ) Inverser les Blocs]

Bloc
1

Bloc
2

Bloc
3

Bloc
4

Voila, tu as des exemples de divs qui peuvent d'ouvrir, se cacher et se fermer.

Pour modifier le tout à ta guise, je te laisse le faire toi-même !

Merci d'accepter ma réponse si elle te convient !

L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire

Réponse 2 / 8

la_pin

Messages postés: 275
Date d'inscription: mercredi 11 août 2004
Statut: Membre
Dernière intervention: 15 décembre 2005

24 mai 2005 à 17:45

suffit de mettre la partie de ton form dans les balises

ton form caché

Merci d'accepter ma réponse si elle te convient !

L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire

Réponse 3 / 8

engel_aurelien

Messages postés: 8
Date d'inscription: samedi 24 janvier 2004
Statut: Membre
Dernière intervention: 11 mars 2006

25 mai 2005 à 09:29

ce qui veut dire que je suis obligé d'avoir 2 formulaires différents?

Réponse 4 / 8

la_pin

Messages postés: 275
Date d'inscription: mercredi 11 août 2004
Statut: Membre
Dernière intervention: 15 décembre 2005

25 mai 2005 à 12:36

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Document sans titre</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<form action="" method="post">

Champ 1

Champ 2

Champ 3

Champ 4(caché)

</form>

</html>

Tu n'as qu'un seul formulaire mais un champ est caché.

Tu n'est pas obligé d'avoir 2 formulaires !

Si ma réponse te convient, merci de l'accepter !

L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

engel_aurelien

Messages postés: 8
Date d'inscription: samedi 24 janvier 2004
Statut: Membre
Dernière intervention: 11 mars 2006

26 mai 2005 à 09:41

oui c'est pas mal mais saurais-tu comment faire pour par exemple en
cliquant sur un lien ou un bouton ça cache ou affiche le reste du
formulaire?

merci beaucoup

Réponse 6 / 8

engel_aurelien

Messages postés: 8
Date d'inscription: samedi 24 janvier 2004
Statut: Membre
Dernière intervention: 11 mars 2006

27 mai 2005 à 09:32

merci !

Réponse 7 / 8

abouelfareh1

Messages postés: 1
Date d'inscription: dimanche 30 mai 2004
Statut: Membre
Dernière intervention: 7 juin 2005

7 juin 2005 à 17:25

excelant idée merci

Réponse 8 / 8

JacquesDW

Messages postés: 4
Date d'inscription: samedi 19 février 2005
Statut: Membre
Dernière intervention: 10 août 2005

10 août 2005 à 17:35

Bonjour,
ce code marche parfaitement, beau boulot.
Petite question: comment faire pour qu'à l'ouverture d'une page, une DIV soit fermée (cachée) et qu'en cliquent sur le lien "ouvrir/fermer le bloc", la DIV apparaisse ? Je voudrais créer une page de recherche avec un bouton "recherche avancée" qui ouvrirait la DIV contenant des options de recherche plus pointues.

Si vous avez une astuce, je prends :) !

Votre réponse