IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

probleme style peek a boo avec JS et CSS


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2006
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Février 2006
    Messages : 5
    Points : 3
    Points
    3
    Par défaut probleme style peek a boo avec JS et CSS
    Bon j'ai hesite a le mettre dans la section html/css, mais aparemment c'est lié à mon javascript quand meme alors le voila!
    J'ai une liste d'images reparties dans des categories. quand on clique sur le titre de la catagorie les images apparaissent ou disparaissent. Ca marche tres bien sous firefox mais pas avec IE (version 6) : quand je clique il ne se passe rien, sauf quand si je redimensionne la fenetre apres, la mes images apparaissent! en revanche elles disparaissent bien quand je reclique...
    (je poste ca ici car j'ai essaye en mettant les images d'abord 'cachee' par defaut, puis 'pasCachee' par défaut et les images s'affichaient bien...)

    voila un bout du html (tous les bloc sont contenu dans une div tableau):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
    <div class='bloc'>
    <div id='separateur' class='ligne' onclick='changer(this)'>Ma catégorie</div>
     
    <div class='ligne' id='pasCachee'>
    <div class='petiteCase'>6</div><!--fin de case-->
     
    	  <div class='case'><img src='../images/petites/im6.jpg'/></div><!--fin de case-->
     
    	  <div class='case'>im2.jpg</div><!--fin de case-->
     
    	  <div class='case'>2006-08-30</div><!--fin de case-->
     
    	  <div class='case'>0000-00-00</div><!--fin de case-->
     
    	  <div class='petiteCase'>oui</div><!--fin de case-->
     
    	  <div class='clearer'></div>
     
    	 </div><!--fin de ligne-->
    <div class='ligne' id='pasCachee'>
    <div class='petiteCase'>7</div><!--fin de case-->
     
    	  <div class='case'><img src='../images/petites/im7.jpg'/></div><!--fin de case-->
     
    	  <div class='case'>im3.jpg</div><!--fin de case-->
     
    	  <div class='case'>2006-08-30</div><!--fin de case-->
     
    	  <div class='case'>0000-00-00</div><!--fin de case-->
     
    	  <div class='petiteCase'>oui</div><!--fin de case-->
     
    	  <div class='clearer'></div>
     
    	 </div><!--fin de ligne-->
    </div><!--fin de bloc-->
    un bout de la css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
     
    .tableau{
    display:block;
    margin:1em;
    }
     
    #lignetitre{
    background-color:#eeeeee;
    font-weight:bold;
    }
     
    .bloc{
    display:block;
    position:relative;
    }
     
    .ligne{
    width:100%;
    border-bottom-width:1px;
    border-bottom-style:solid;
    padding:0.2em;
    }
     
    #cachee{
    display:none;
    }
     
    #pasCachee{
    display:inline-block;
    }
     
    #highlight{
    background-color:#ffff00;
    }
     
    /*separateur dans la liste d'images*/
    #separateur{
    background-color:#002277;
    color:#eeeeee;
    font-weight:bold;
    text-indent:0.3em;
    }
    et le javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    function changer(maLigneTitre){
    	monBloc=maLigneTitre.parentNode;
    	mesLignes=monBloc.childNodes;
    	nbLignes=mesLignes.length;
     
    	for(i=0; i<nbLignes; i++){
    		//je verifie que la ligne est un noeud element
    		if(mesLignes[i].nodeType==1){
    				//je verifie que ce n'est pas le separateur que je ne veux pas faire disparaitre
    				if(mesLignes[i].getAttribute('id')!="separateur"){
    						if(mesLignes[i].getAttribute('id')=="cachee"){
    							mesLignes[i].setAttribute('id', 'pasCachee');
    						}else{
    							mesLignes[i].setAttribute('id', 'cachee');
    						}
    				}
    		}
    	}
    }
    merci!

  2. #2
    Candidat au Club
    Profil pro
    Inscrit en
    Février 2006
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Février 2006
    Messages : 5
    Points : 3
    Points
    3
    Par défaut
    bon j'ai resolu ca en abandonnant les id cachee / pasCachee et en faisant 2 classes ligneCachee / ligneVisible tout simplement...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Probleme de mise en page avec feuille de style
    Par Clydys dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 02/01/2009, 18h42
  2. Probleme de mise en page avec ma feuille de style
    Par tinoudu01 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/11/2008, 11h52
  3. Probleme de mise en forme avec DIV et CSS
    Par freesurfer dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/02/2007, 15h26
  4. [CSS] Probleme style avec IE
    Par rivierem dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 02/11/2005, 14h35
  5. probleme de gestion de clients avec des sockets....
    Par ludvo dans le forum Réseau
    Réponses: 6
    Dernier message: 25/09/2003, 12h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo