Question sur le dispaly:none
Fermé
Theophile76
Messages postés
1791
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
16 avril 2021
-
16 nov. 2010 à 12:15
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 18 nov. 2010 à 15:28
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 18 nov. 2010 à 15:28
7 réponses
jalalnet
Messages postés
293
Date d'inscription
mardi 20 octobre 2009
Statut
Membre
Dernière intervention
17 février 2016
10
16 nov. 2010 à 13:04
16 nov. 2010 à 13:04
tu peut mettre le bout du code HTML du balise que tu essaye de la rend invisible
est sa partie CSS aussi
est sa partie CSS aussi
biboo_
Messages postés
1249
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
14 mars 2012
105
16 nov. 2010 à 13:30
16 nov. 2010 à 13:30
Salut,
Quel est code que tu as mis dans ta CSS?
(Puis un petit effort sur l'orthographe, ça serait sympa ;-))
A+,
Quel est code que tu as mis dans ta CSS?
(Puis un petit effort sur l'orthographe, ça serait sympa ;-))
A+,
Theophile76
Messages postés
1791
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
16 avril 2021
386
Modifié par Theophile76 le 16/11/2010 à 14:14
Modifié par Theophile76 le 16/11/2010 à 14:14
Merci.
HTML
Y'a pas de CSS car ça marche pas mais j'ai essayé en mettant ce code dans ma feuille de style et rien. :
PS : on est pas tous bon en orthographe x) et en plus j'en ai pas fait tant que ça oO
On s'ennuie pas avec l'informatique :)
HTML
<script language="javascript" type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
...
<td style="background-image:url(icon/modifier.png)" id="modifier" OnClick="javascript:visibilite('entre');">Modifier</td>
...
<tr id="entre" style="display:none"><td>blablabla</td></tr>
Y'a pas de CSS car ça marche pas mais j'ai essayé en mettant ce code dans ma feuille de style et rien. :
tr#entre
{
display:none;
}
PS : on est pas tous bon en orthographe x) et en plus j'en ai pas fait tant que ça oO
On s'ennuie pas avec l'informatique :)
Eastchild
Messages postés
318
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
28 mars 2012
31
16 nov. 2010 à 14:52
16 nov. 2010 à 14:52
bonjour,
Mets plutôt :
dans ton javascript pour que ce soit plus compatible.
Pour le CSS essaye en mettant juste :
Mets plutôt :
if (targetElement.style.display == "none")
{
targetElement.style.display = "block" ;
dans ton javascript pour que ce soit plus compatible.
Pour le CSS essaye en mettant juste :
#entre{
display:none;
}
Theophile76
Messages postés
1791
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
16 avril 2021
386
Modifié par Theophile76 le 16/11/2010 à 15:12
Modifié par Theophile76 le 16/11/2010 à 15:12
Ok merci.
Donc j'ai essayé ce que tu m'a proposé :
Pour le CSS ça ne fonctionne toujours pas. De plus j'ai vue dans de nombreux code source ce le "display:none" directement dans la page html, c'est peut être car ils ont le même problème que moi.
Pour le javascript je l'ai fait mais du coup ça deviens plus large et ça se décale un peu, ça ne faisait pas ça avant.
Et puisque tu me parle du code javascript, serais tu comment faire pour que la ligne "tr" se déroule progressivement et non pas "d'un coup" ?
Et aussi, est-il possible de changer le contenu de ma case "Modifier" pour qu'au moment où con clique dessus, un "fermer" apparaisse ?
Donc j'ai essayé ce que tu m'a proposé :
Pour le CSS ça ne fonctionne toujours pas. De plus j'ai vue dans de nombreux code source ce le "display:none" directement dans la page html, c'est peut être car ils ont le même problème que moi.
Pour le javascript je l'ai fait mais du coup ça deviens plus large et ça se décale un peu, ça ne faisait pas ça avant.
Et puisque tu me parle du code javascript, serais tu comment faire pour que la ligne "tr" se déroule progressivement et non pas "d'un coup" ?
Et aussi, est-il possible de changer le contenu de ma case "Modifier" pour qu'au moment où con clique dessus, un "fermer" apparaisse ?
Eastchild
Messages postés
318
Date d'inscription
lundi 23 juillet 2007
Statut
Membre
Dernière intervention
28 mars 2012
31
Modifié par Eastchild le 16/11/2010 à 15:29
Modifié par Eastchild le 16/11/2010 à 15:29
Alors pour le déroulement progressif je ne sais pas du tout, par contre pour le changement de modifier en ferme il faut faire :
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "block" ;
document.getElementById('modifier).innerHTML = "fermer";
} else {
targetElement.style.display = "none" ;
document.getElementById('modifier).innerHTML = "modifier";
}
}
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
16 nov. 2010 à 15:26
16 nov. 2010 à 15:26
Ouais bizarre tout ça...
J'assume que tu as mis ton CSS directement sur ta page HTML pour faire tes tests ? Sinon c'est sûr que ça pourrait être une erreur d'appel de la feuille de style externe... Mais je lis ta dernière question, et je ne vois pas comment le CSS peut être "moins bon" parce qu'il est mis directement sur une page HTML. Je le fais couramment pour des pages uniques, et je n'ai jamais de problème. Tant que tu as ta balise
Pour répondre à tes dernières questions :
Pour faire en sorte que le tr se déroule, je te recommande d'utiliser des bibliothèques Javascript telles que YUI. Ils ont des fonctions pour ça qui sont assez assurées de bien fonctionner ;)
Et pour changer le bouton modifier, je te conseille de mettre deux boutons, un Modifier, un Fermer, dont l'un est à display:none; et pas l'autre. Tu alternes les display quand on appuie sur un bouton ou l'autre.
Et aussi, tu ne devrais pas mettre ton tr à display:block; pour le rendre visible. Mets-le plutôt à display:table-row; qui est son display par défaut, sinon il ne se comportera pas comme un tr mais comme un div et ta table va planter.
J'assume que tu as mis ton CSS directement sur ta page HTML pour faire tes tests ? Sinon c'est sûr que ça pourrait être une erreur d'appel de la feuille de style externe... Mais je lis ta dernière question, et je ne vois pas comment le CSS peut être "moins bon" parce qu'il est mis directement sur une page HTML. Je le fais couramment pour des pages uniques, et je n'ai jamais de problème. Tant que tu as ta balise
<style type="text/css">...</style>dans on <head>, il ne peut rien se passer de si bizarre...
Pour répondre à tes dernières questions :
Pour faire en sorte que le tr se déroule, je te recommande d'utiliser des bibliothèques Javascript telles que YUI. Ils ont des fonctions pour ça qui sont assez assurées de bien fonctionner ;)
Et pour changer le bouton modifier, je te conseille de mettre deux boutons, un Modifier, un Fermer, dont l'un est à display:none; et pas l'autre. Tu alternes les display quand on appuie sur un bouton ou l'autre.
Et aussi, tu ne devrais pas mettre ton tr à display:block; pour le rendre visible. Mets-le plutôt à display:table-row; qui est son display par défaut, sinon il ne se comportera pas comme un tr mais comme un div et ta table va planter.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
16 nov. 2010 à 15:29
16 nov. 2010 à 15:29
Je pense à ça...
Essaie de préciser ton CSS autant que possible.
Au lieu de pointer à tr#entre, supposons que tu as le code suivant :
Mets :
C'est peut-être juste un conflit dans la hiérarchie de ton CSS. Ce serait bizarre vu que d'habitude les ID ont priorité, mais ça peut arriver...
Essaie de préciser ton CSS autant que possible.
Au lieu de pointer à tr#entre, supposons que tu as le code suivant :
<div id="contenu"> <div class="cadre"> <table> <tr id="entre"></tr> </table> </div> </div>
Mets :
#contenu .cadre table tr#entre { display:none; }
C'est peut-être juste un conflit dans la hiérarchie de ton CSS. Ce serait bizarre vu que d'habitude les ID ont priorité, mais ça peut arriver...
Theophile76
Messages postés
1791
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
16 avril 2021
386
18 nov. 2010 à 04:50
18 nov. 2010 à 04:50
Merci pour vos réponse, donc pour le bouton modifier, j'ai fait comme proposé et ça fonctionne : DIV qui s'intervertissent en DISPLAY:NONE.
Par contre j'ai une petite question sur ça, y-a t-il un moyen de raccourcir ceci :
En quelle que chose de ce genre (bien sur ça ne fonctionne pas mon code hein ^^) :
Pour le problème du CSS DISPLAY:NONE j'ai laissé tombé, ça me prend de temps finalement tant que ça fonctionne, c'est l'important.
Même si ta solution est peut être viable Coeus, je suis encore novis en la matière et j'ai pas envie de trop bidouiller mon code lol
Pour le déroulement TR, je vais chercher grâce à vos piste :)
merci.
Par contre j'ai une petite question sur ça, y-a t-il un moyen de raccourcir ceci :
<div OnClick="javascript:visibilite('ligne'); javascript:visibilite('annuler'); javascript:visibilite('modifier');" id="valider">Valider</div>
En quelle que chose de ce genre (bien sur ça ne fonctionne pas mon code hein ^^) :
<div OnClick="javascript:visibilite('ligne, annuler, modifier'');id="valider">Valider</div>
Pour le problème du CSS DISPLAY:NONE j'ai laissé tombé, ça me prend de temps finalement tant que ça fonctionne, c'est l'important.
Même si ta solution est peut être viable Coeus, je suis encore novis en la matière et j'ai pas envie de trop bidouiller mon code lol
Pour le déroulement TR, je vais chercher grâce à vos piste :)
merci.
coeus
Messages postés
3019
Date d'inscription
samedi 13 janvier 2007
Statut
Membre
Dernière intervention
19 juin 2013
121
18 nov. 2010 à 15:26
18 nov. 2010 à 15:26
Pour simplifier ton code, tu peux simplement faire :
Ou alors, faire :
Ou encore mieux, je ne sais pas à quoi ressemble ta fonction visibilite, mais dedans, tu peux faire :
Un petit lien pour t'aider à visualiser la bouclew for in :
www.w3schools.com/js/js_loop_for_in.asp
Et pour le déroulement de tes TR, si tu emploies des bibliothèques genre YUI, je veux juste t'avertir que ça peut être compliqué pour quelqu'un qui se prétend "novice". Loin de moi l'idée de te décourager, mais aie dans l'idée de passer du temps là-dessus, sinon tu risques d'être déçu. Et n'hésite pas à redemander de l'aide ! ;)
<div onclick="visibilite('ligne'); visibilite('annuler'); visibilite('modifier');" id="valider">Valider</div>
Ou alors, faire :
<div onclick="visibilite_tout();" id="valider">Valider</div>
<script>
function visibilite_tout() {
visibilite('ligne');
visibilite('annuler');
visibilite('modifier');
}
</script>
Ou encore mieux, je ne sais pas à quoi ressemble ta fonction visibilite, mais dedans, tu peux faire :
function visibilite() {
var liste = ["ligne","annuler","modifier"];
for (x in liste) {
// le reste de ta fonction, tu remplaces "ligne","annuler" ou "modifier" par liste[x].
}
}
Un petit lien pour t'aider à visualiser la bouclew for in :
www.w3schools.com/js/js_loop_for_in.asp
Et pour le déroulement de tes TR, si tu emploies des bibliothèques genre YUI, je veux juste t'avertir que ça peut être compliqué pour quelqu'un qui se prétend "novice". Loin de moi l'idée de te décourager, mais aie dans l'idée de passer du temps là-dessus, sinon tu risques d'être déçu. Et n'hésite pas à redemander de l'aide ! ;)
Theophile76
Messages postés
1791
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
16 avril 2021
386
18 nov. 2010 à 15:28
18 nov. 2010 à 15:28
merci beaucoup je vais tester tout ça :)