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

Résolu

crizane Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
crizane Messages postés 15 Date d'inscription Statut Membre Dernière intervention - 7 juin 2016 à 04:42

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

Afficher la suite

A voir également:

Déplacement de blocs selon qu'ils sont affichés ou masqués
Historique déplacement google - Guide
Appels masqués - Guide
Code blocs - Télécharger - Langages
Le clavier de mon telephone ne s'affiche plus - Guide
Deplacer barre de tache windows 11 - Guide

1 réponse

Réponse 1 / 1

crizane Messages postés 15 Date d'inscription Statut Membre Dernière intervention

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;
}

crizane Messages postés 15 Date d'inscription Statut Membre Dernière intervention

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 :)

Discussions similaires

couche de destination masquée

Durée d'une diapositive animée

Impossible de supprimer photo galaxy s4

probleme sommet

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Votre réponse

Discussions similaires