Discussion :

[psgman80]

Bonjour à tous,

J'ai créé un script où quand je choisi livraison Mondial Relay le Div s'affiche et quand je choisi l'une des 2 autres livraisons cela ne s'affiche pas.

Cela fonctionne en parti, j'arrive a afficher ou non en cliquant sur les radio mais le problème est quand on affiche la page pour la première fois, le DIV s'affiche automatiquement. Moi je voudrais qu'il soit cacher dès que l'on charge pour la première fois la page.

Code :

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

1
2
3
4
5
6
<script type="text/javascript">
function afficher(etat)
{  
    document.getElementById("champ").style.visibility=etat;  
}
</script>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="formulaire" id="formulaire" action="" method="">
    <div id="haut_menu_grand"><h3>Adresse de livraison</h3></div>
    <div id="milieu_menu_grand">
        <p class="corps_milieu_grand">
            <input type="radio" name="livraison" value="adresse_principale" id="adresse_principale" checked="checked" onclick="afficher('hidden');" /> <label for="adresse_principale">Adresse de livraison principale (6,80 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_relais" id="adresse_relais" onclick="afficher('visible');" /> <label for="adresse_relais">Mondial Relais (5,95 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_mainpropre" id="adresse_mainpropre" onclick="afficher('hidden');" /> <label for="adresse_mainpropre">Livraison en main propre sur rendez-vous (Gratuit) - Attention : Sur Albert (80), Amiens (80), Méaulte (80).</label><br /><br />                
        </p>
 
        <div id="champ">Affichage du div</div>
 
    </div>
 
    <div id="bas_menu_grand"></div>
</form>

Merci pour votre aide

[ProgElecT]

Salut

Ligne 10

Code html :

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

        <div id="champ" style="visibility:hidden;">Affichage du div</div>

[ABCIWEB]

Bah oui, basiquement si on veut cacher un élément au chargement de la page on le fait en css ou dans un style incorporé comme l'a montré ProgElecT.

[psgman80]

Salut

Ligne 10

Code html :

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

        <div id="champ" style="visibility:hidden;">Affichage du div</div>

Merci cela règle en partie mon problème

"visibility" cache mais garde un grand espace vide

J'ai essayé

Code html :

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

<div id="champ" style="display:none;">

ça cache bien mais quand je coche les Radio plus rien ne s'affiche.

Une idée ??

[Michel]

Code :

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

document.getElementById("champ").style.display=etat;

avec etat qui vaut none ou all

[ProgElecT]

Salut

Code :

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

document.getElementById("champ").style.display=etat;

avec etat qui vaut none ou all

Moi je pense plutôt à block

Code html :

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

1
2
3
4
5
6
        <p class="corps_milieu_grand">
            <input type="radio" name="livraison" value="adresse_principale" id="adresse_principale" checked="checked" onclick="afficher('none');" /> <label for="adresse_principale">Adresse de livraison principale (6,80 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_relais" id="adresse_relais" onclick="afficher('block');" /> <label for="adresse_relais">Mondial Relais (5,95 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_mainpropre" id="adresse_mainpropre" onclick="afficher('none');" /> <label for="adresse_mainpropre">Livraison en main propre sur rendez-vous (Gratuit) - Attention : Sur Albert (80), Amiens (80), Méaulte (80).</label><br /><br />                
        </p>  
            <div id="champ" style="display:none;">Affichage du div</div>

Code :

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

1
2
3
4
function afficher(etat)
{  
    document.getElementById("champ").style.display=etat;  
}

[ABCIWEB]

Tu fais du javascript mais tu ne connais pas assez les bases du css/html et c'est essentiel. C'est ça qu'il faut commencer par maîtriser pour avancer car côté visiteur, javascript (ou même les langages serveur) ne font finalement qu'afficher du html. Donc toujours commencer par avoir de bonnes bases en html/css.

visibility affiche ou cache le bloc mais préserve son espace d'affichage dans la page contrairement à display. Attention toutefois à l'usage d'un display:none à l'intérieur d'un formulaire car les éléments contenus ne seront pas envoyés. Par ailleurs javascript n'aura pas la possibilité de trouver les dimensions d'un bloc en display:none. Pour dire que le fait que l'élément ne soit plus dans le flux (contrairement à un visibility:hidden) a des conséquences qu'il vaut mieux connaitre à l'avance. Mais bon dans ton cas cela ne gêne apparemment en rien.

[NoSmoking]

Bonjour,
@ABCIWEB : correctif

Par ailleurs javascript n'aura pas la possibilité de trouver les positions ou les dimensions d'un bloc en display:none. Pour dire que le fait que l'élément ne soit plus dans le DOM (contrairement à un visibility:hidden) a des conséquences qu'il vaut mieux connaitre à l'avance.en rien.

Les éléments en display:none ne sont pas retirés du DOM, seulement du flux et la récupération de la position est réalisable mais ces dimensions sont misent à 0.

Par contre

Attention toutefois à l'usage d'un display:none à l'intérieur d'un formulaire car les éléments contenus ne seront pas envoyés.

+1, ce point est très souvent négligé.

[ABCIWEB]

Oui effectivement il est toujours dans le DOM sinon on ne pourrait plus y avoir accès C'est corrigé.

[Loralina]

Bonsoir,

Moi je pense plutôt à block

Oui, mais pourquoi, plus généralement, ne pas mettre une chaîne vide ?
Ainsi c'est la valeur par défaut de la balise ou le css qu'on a défini qui est appliqué.

[ProgElecT]

Salut

Ainsi c'est la valeur par défaut de la balise ou le css qu'on a défini qui est appliqué.

Oui mais passer

Code :

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

.style.display="";

ne change pas l’état du display, s'il était visible il le reste et il ne devient pas "none", sa valeur par defaut mais "" (rien), sans provoquer pour autant une erreur.

[Loralina]

Bonjour,

ne change pas l’état du display, s'il était visible il le reste et il ne devient pas "none", sa valeur par defaut mais "" (rien), sans provoquer pour autant une erreur.

Je ne parle pas de mettre "" pour cacher, mais pour afficher au contraire.
Dans le code actuel, si on met une chaîne vide '', à la place de 'Block', dans l'appel du deuxième bouton radio, alors cela va fonctionner comme prévu.

L'affichage par défaut est certes caché, mais quand je parlais de valeur par défaut, je ne me référais pas en fait à ce qui est écrit dans l'attribut "style".
Je considère que dans cet attribut on a redéfini l'affichage par défaut de la balise qui est "block".

Maintenant, si on définit "none" dans une classe dont dépend la balise, alors mettre vide sur la propriété "display" de la propriété "style" ne va pas afficher l'élément.
Il faut inverser, la chaîne vide permettra de remettre à "none", si on vient d'afficher l'élément.
Il faut savoir ce qu'on fait.

L'idée c'est : on a un comportement par défaut défini ailleurs que sur la propriété "style", on crée un cas paticulier sur la propriété "style", puis on l'annule.

Exemple :
On a une balise dépendant d'une classe, directement ou non.
Dans cette classe, on a une couleur.
A un moment, on crée un cas particulier en définissant la couleur directement depuis la propriété/l'attribut "style" de l'élément.
Pour revenir à l'état précédent/par défaut, on remet cette propriété à vide et c'est de nouveau la couleur de la classe qui s'applique.