Déplacement de blocs selon qu'ils sont affichés ou masqués

Résolu
crizane Messages postés 15 Statut Membre -  
crizane Messages postés 15 Statut Membre -
Bonjour,

Voici mon problème:
J'ai un code html/php qui permet d'afficher différentes périodes d'une année lorsque l'on clique sur l'année en question: En gros sur la page, on peut voir:


2011:
Select all (2011)
2011/05/15 - 2011/06/10 2011/06/11 - 2011/07/07 2011/07/08 - 2011/08/03 2011/08/04 - 2011/08/30 2011/08/31 - 2011/09/26 2011/09/27 - 2011/10/23 2011/10/24 - 2011/11/19 2011/11/20 - 2011/12/16 2011/12/17 - 2012/01/12
2012:
Select all (2012)
2012/01/13 - 2012/02/08 2012/02/09 - 2012/03/06 2012/03/07 - 2012/04/02 2012/04/03 - 2012/04/29 2012/04/30 - 2012/05/26 2012/05/27 - 2012/06/22 2012/06/23 - 2012/07/19 2012/07/20 - 2012/08/15 2012/08/16 - 2012/09/11 2012/09/12 - 2012/10/08 2012/10/09 - 2012/11/04 2012/11/05 - 2012/12/01 2012/12/02 - 2012/12/28 2012/12/29 - 2013/01/24
etc..

J'ai reussi à faire une fonction javascript qui permet de cacher et d'afficher les périodes d'une année, mais lorsque les données d'une année sont cachés, il y a toujours l'espace entre. Cela me donne:

2011



2012



2013

J'aimerai effacer cette espace entre les années lorsque les périodes sont cachées, et avoir les dates collées les unes en dessous des autres:
2011
2012
2013

j'espere que je me fais comprendre! Si quelqu'un à une solution.. merci
A voir également:

1 réponse

Réponse 1 / 1
crizane Messages postés 15 Statut Membre
 
la partie de mon code est la suivante:

php: (même div pour chaque annéee): 
 <!-- All periods: affiche toutes les périodes à cocher  -->
 
   <div id ="quotidien" class="quotidien" style="display:none">
 
	    <?php
		//connection à la bdd pour récuperer toutes les périodes
		 $bdd = new PDO("mysql:host=localhost;dbname=test_1;charset=utf8","root","");
		 $requete = $bdd->query("SELECT * FROM periods");
	 ?>
		
	
	<!-- création d'un formulaire avec les cases à cocher, dont les resultats s'ouvriront dans la page pagecheckbox, et les cases cochées ont pour valeur Particles ID  -->
	<form method="GET" action="pagecheckbox.php">
	   <label class="Periodtitle">Periods:</label><br>
	 
	 <span class="bouton" id="bouton_texte2011" onclick="javascript:afficher_cacher2011('texte2011');">2011</span>
    <div id="texte2011" class="texte">
	
	 Select all (2011) <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
	  <?php for($i = 0; $i<9; $i++) {
			 $resultat = $requete->fetch();
			 $part = $resultat['Begin_date'];
		     $date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $part = $date->format('Y/m/d');
             $endpart = $resultat['End_date'];
			 $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $endpart = $enddate->format('Y/m/d');?>
			  <input type="checkbox" id="Choix[]" name="lenom[<?php echo $resultat['Particles_ID']; ?>]" value="<?php echo "From " . $resultat['Begin_date']." " . "to " . $resultat['End_date'] ?>" /><?php echo $part ?> - <?php echo $endpart ?>        
			 <?php
		 }?>
		
	 </div>	 
	 
		 <span class="bouton" id="bouton_texte2012" onclick="javascript:afficher_cacher2012('texte2012');">2012</span>
    <div id="texte2012" class="texte" style="visibility:block">
	  
	 Select all (2012) <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
		<?php for($i = 0; $i<14; $i++) {
			 $resultat = $requete->fetch();
			 $part = $resultat['Begin_date'];
		     $date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $part = $date->format('Y/m/d');
             $endpart = $resultat['End_date'];
			 $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $endpart = $enddate->format('Y/m/d');?>
			  <input type="checkbox" id="Choix[]" name="lenom[<?php echo $resultat['Particles_ID']; ?>]" value="<?php echo "From " . $resultat['Begin_date']." " . "to " . $resultat['End_date'] ?>" /><?php echo $part ?> - <?php echo $endpart ?>        
			 <?php
		 }?>
		
	  </div>
	  
	  
	  		 <span class="bouton" id="bouton_texte2013" onclick="javascript:afficher_cacher2013('texte2013');">2013</span>
    <div id="texte2013" class="texte" style="visibility:block">
	
	 Select all (2013) <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
	  	 <?php for($i = 0; $i<13; $i++) {
			 $resultat = $requete->fetch();
			 $part = $resultat['Begin_date'];
		     $date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $part = $date->format('Y/m/d');
             $endpart = $resultat['End_date'];
			 $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $endpart = $enddate->format('Y/m/d');?>
			  <input type="checkbox" id="Choix[]" name="lenom[<?php echo $resultat['Particles_ID']; ?>]" value="<?php echo "From " . $resultat['Begin_date']." " . "to " . $resultat['End_date'] ?>" /><?php echo $part ?> - <?php echo $endpart ?>         
			 <?php
		 }?>
		 
	  </div>
	  
	  
	  
	  		 <span class="bouton" id="bouton_texte2014" onclick="javascript:afficher_cacher2014('texte2014');">2014</span>
    <div id="texte2014" class="texte" style="visibility:block">
	
	 Select all (2014) <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
		<?php for($i = 0; $i<14; $i++) {
			 $resultat = $requete->fetch();
			 $part = $resultat['Begin_date'];
		     $date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $part = $date->format('Y/m/d');
             $endpart = $resultat['End_date'];
			 $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $endpart = $enddate->format('Y/m/d');?>
			  <input type="checkbox" id="Choix[]" name="lenom[<?php echo $resultat['Particles_ID']; ?>]" value="<?php echo "From " . $resultat['Begin_date']." " . "to " . $resultat['End_date'] ?>" /><?php echo $part ?> - <?php echo $endpart ?>         
			 <?php
		 }?>
		
	  </div>
	  
	  
	    		 <span class="bouton" id="bouton_texte2015" onclick="javascript:afficher_cacher2015('texte2015');">2015</span>
    <div id="texte2015" class="texte" style="visibility:block">
	
	 Select all (2015)  <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
		<?php for($i = 0; $i<5; $i++) {
			 $resultat = $requete->fetch();
			 $part = $resultat['Begin_date'];
		     $date = DateTime::createFromFormat('Y-m-d', $part); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $part = $date->format('Y/m/d');
             $endpart = $resultat['End_date'];
			 $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //Les deux lignes servent à convertir la date du format Y-m-d au format Y/m/d
             $endpart = $enddate->format('Y/m/d');?>
			  <input type="checkbox" id="Choix[]" name="lenom[<?php echo $resultat['Particles_ID']; ?>]" value="<?php echo "From " . $resultat['Begin_date']." " . "to " . $resultat['End_date'] ?>" /><?php echo $part ?> - <?php echo $endpart ?>       
			 <?php
		 }?>
		
	  </div>



javascript: (même fonction répétée 5 fois) 



function afficher_cacher2011(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById("bouton_texte2011").innerHTML='2011(cacher)';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById("bouton_texte2011").innerHTML='2011(afficher)';
    }
    return true;
}

function afficher_cacher2012(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById("bouton_texte2012").innerHTML='2012(cacher)';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById("bouton_texte2012").innerHTML='2012(afficher)';
    }
    return true;
}

function afficher_cacher2013(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById("bouton_texte2013").innerHTML='2013(cacher)';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById("bouton_texte2013").innerHTML='2013(afficher)';
    }
    return true;
}

function afficher_cacher2014(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById("bouton_texte2014").innerHTML='2014(cacher)';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById("bouton_texte2014").innerHTML='2014(afficher)';
    }
    return true;
}

function afficher_cacher2015(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById("bouton_texte2015").innerHTML='2015(cacher)';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById("bouton_texte2015").innerHTML='2015(afficher)';
    }
    return true;
}
0
crizane Messages postés 15 Statut Membre
 
Vous embetez pas, j'ai trouver la solution par moi même, en remplacant la fonction javascript et en faisant uniquement avec les mode display:block et display:none du css :)
0

Discussions similaires

couche de destination masquée
on dira petite pomme -
Freg -

27 réponses
Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
Impossible de supprimer photo galaxy s4
Thomas36000 -
birgit -

17 réponses
probleme sommet
urgent -
Raymond PENTIER -

2 réponses
Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses