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.

[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é.