Display:none sur IE

Version imprimable

Display:none sur IE

Bonjour à tous,

voilà le morceau de code que j'utilise sur Firefox et qui fonctionne parfaitement.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <body> <style type="text/css">#dialog\:cancel-button { display:none; } </style> <br/> bla bla bla <br/> <input id="dialog:ok-button" name="dialog:ok-button" type="button" OnClick="javascript:history.back();" value="Ok"/> <input id="dialog:cancel-button" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/> </body> </html>
Je souhaite donc cacher le second bouton. Le problème est que je ne peux pas changer son nom (qui contient un caractère ':'), car il s'agit d'un bouton dans une application web complète dont je ne peux pas modifier les sources, j'y ajoute donc du contenu et je voudrais seulement cacher le bouton en "trichant" un peu.

Merci de votre aide.

Cordialement,

Nathan

Salut,

je te conseille de rajouter une classe à ton input id="dialog:cancel-button" et donc d'utiliser cette classe pour appliquer le "display:none"

Par exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <body> <style type="text/css">.cancelButton { display:none; } </style> <br/> bla bla bla <br/> <input id="dialog:ok-button" name="dialog:ok-button" type="button" OnClick="javascript:history.back();" value="Ok"/> <input id="dialog:cancel-button" class="cancelButton" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/> </body> </html>
Au passage, mettre des ":cancel-button" dans un "id" ou une "class" n'est pas une très bonne idée. En effet les ":" sont réservés pour les pseudo-éléments et les pseudo-classes en CSS.

voila j'espere que cela t'aidera

++

04/08/2010, 16h00
chantren

Hello,

merci pour ta réponse mais je savais déjà tout ça :)

Mon souci ici est que j'applique du code supplémentaire à un code déjà existant, je ne peux donc pas modifier la déclaration du bouton que je veux cacher (que ce soit le nom ou même rajouter une classe). En fait, je souhaite juste avoir le même comportement que j'ai avec Firefox sur IE (avec le code mentionné en haut mais qui n'est bien sûr pas exhaustif).

Cordialement,

Nathan.

Bon et bien, j'ai bien une solution mais elle ne fonctionnera que sur les navigateurs acceptant le CSS2 (ça devrait aller)
utilise le pseudo-element :last-child.

Exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
    <body>
        <style type="text/css">
	    input:last-child{ display:none; } 
        </style>
        <br/>
            bla bla bla
        <br/>
        <input id="dialog:ok-button" name="dialog:ok-button" type="button" OnClick="javascript:history.back();" value="Ok"/>
        <input id="dialog:cancel-button" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/>
    </body>
</html>

et ainsi le dernier input (donc le "cancel") sera en "display:none"

04/08/2010, 16h29
Bisûnûrs

Au pire tu peux affecter ta valeur en Javascript.
04/08/2010, 16h59
chantren

Même constat en utilisant "last-child", cela fonctionne sur Firefox mais pas IE (version 7).

Sinon, je ne suis pas expert en Javascript, comment puis-je procéder ? En général j'utilise le javascript pour réaliser un event lors d'un clic, dans mon cas il faut que l'input soit cachée directement sans intervention de l'utilisateur.

Cordialement,

Nathan.

Code:

1
2
3
4
<input id="dialog:cancel-button" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/>
<script type="text/javascript">
document.getElementById('dialog:cancel-button').style.display = 'none';
</script>

04/08/2010, 17h58
chantren

Alors ça fonctionne bien en théorie, le problème c'est qu'il faut déclarer ce morceau de code APRES que le button ait été déclaré, pas avant. Et le seul endroit ou je peux "injecter" du code c'est au-dessus. En gros j'ai plus qu'à me tirer une balle :)

Alors pour au-dessus :

Code:

1
2
3
4
5
<script type="text/javascript">
window.onload = function() {
   document.getElementById('dialog:cancel-button').style.display = 'none';
}
</script>

05/08/2010, 11h24
chantren

Ca fonctionne.

Merci beaucoup !

Nathan