18008 sujets

Questions générales et questions de débutants

Afficher des infos complémentaires en dehors de la boucle BDD

Bonjour,
c'est assez simple, pour ne pas dire basique. Mais ça fait des mois que je cherche des solutions propres.

J'ai sur ma page une série de miniatures affichées grâce à une requête SQL dans une boucle While.
Au clique sur l'une d'elles s'affichent l'agrandissement et ses commentaires.

Mon but est d'afficher l'agrandissement et ses commentaires dans un conteneur unique donc placé en dehors de la boucle, conteneur commun au contenu de plusieurs tables, tantôt l'une ou l'autre, au choix du visiteur.

Certes je pourrais me débrouiller pour tout placer dans la boucle et rendre visible uniquement le contenu de la miniature cliquée mais j'ai l'impression de bricoler.

Pour ne plus bricoler, et pouvoir évoluer, je pense être obligé d'utiliser javascript, peut-être même dans du Ajax.

Les informations trouvées ça et là sur la toile m'ont semblé pour le moins confuses, surtout dans la réelle utilité des tutos présentés. Côté bibliothèques, confus est un euphémisme.

Mais vous, comment faites vous ?
Sauriez vous me conseiller ?


Bref, un peu d'aide et des conseils me seraient salutaires.

D'avance Merci Smiley confused
Modifié par kaspar (02 Sep 2015 - 19:04)
Bonjour Kaspar,
j'utilise ce bout de script sur mon propre site exactement comme tu l'envisagerais pour le tien : un conteneur qui recevra alternativement l'agrandissement et la légende de miniatures :
	function Bid(id)
{
return document.getElementById(id);
}

	function Alterner(id)
{
this.id=id;
if (typeof this.elem=='undefined' || elem=='')
	{
Bid(this.id).className='vu'; //Apparition d'un élément
this.elem=this.id;
	}
else
	{
if (this.id!=this.elem)
		{
Bid(this.id).className='vu'; //Apparition d'un nouvel élément
Bid(this.elem).className='disparu'; //Disparition de l'ancien élément
this.elem=this.id;
		}
else if(this.elem=this.elem)	//Alternance sur le même élément
		{
Bid(elem).className='disparu'; //Disparition de l'élément sollicité 2 fois à la suite
this.elem="";
		}
	}
}
Le html comprendra un div id="conteneur" qui contiendra tous les agrandissements et leurs légendes en class="disparu" {display:none;position:absolute}. Au clic sur une miniature on fait basculer un id en class="vu" {display:inline-block;position:absolute} imposant au précédant de disparaître simultanément.

Certes, un autre script peut être envisagé qui soit plus compact, mais celui-ci fonctionne parfaitement. Tu pourrais utiliser des effets de transition de css3, mais c'est un plus complexe à mettre en oeuvre à cause de la simultanéité des 2 alternances (inscrites dans une durée) (devoir jouer sur les z-index non compris dans les transitions) (devoir jouer sur 3 className successives : 'avant' 'pendant' 'après').
Modifié par pictural (03 Sep 2015 - 01:50)
Quand on sait qu'on peut changer le classname, ça ouvre des perspectives Smiley smile
Mille mercis Pictural, je vais tester ton script dès demain.
Un sujet peut-être bientôt marqué comme résolu Smiley biggrin Smiley biggrin
kaspar a écrit :
Quand on sait qu'on peut changer le className, ça ouvre des perspectives
En effet, et là tu devines que par un simple jeu de conditions 'if()' 'else if()' de className sur un élément, on pourrait gérer beaucoup de 'choses annexes' aux conditions d'une méthode, mais en réalité des 'choses essentielles' dans le dynamisme ou l'interactivité d'une page ...

Je me souviens avoir jadis procédé de la sorte, notamment en guise de play/stop de 'videos' .swf : un seul bouton à cliquer comme interrupteur 'jour/nuit', et en 'va-et-vient' c-a-d depuis n'importe où dans la page ... Et ce qui semblait n'être qu'une astuce (!) devenait en fait la seule solution raisonnable.
	function PlayStop()
{
var bouton= document.getElementById("bouton");
if(bouton.className=='play' || !bouton.className)
	{
bouton.className='stop';
PlayMovie("video"); //Exécuter la fonction PlayMovie(id) décrite dans un autre fichier .js
	}
else if(bouton.className=='stop')
	{
bouton.className='play';
StopMovie("video");
	}
}

Modifié par pictural (03 Sep 2015 - 02:12)
Bonjour Pictural,

Me revoila, aprés une grosse grippe.

J'ai tenté d'utiliser ton script.
A la lecture ça semble simple, mais à l'application j'ai sans doute quelques problèmes de compréhension, et de syntaxe.

Puis-je te demander ou je me suis trompé, et ce que je n'ai pas compris ? Si jamais j'ai compris qq chose Smiley smile

MERCI


<!DOCTYPE html PUBLIC>
<html>
    <head>
	<meta name="viewport" content="width=device-width" />
	<meta charset="utf-8" />
	<meta http-equiv="Content-Language" content="fr" />
	<title>rien</title>
	<meta name="description" content="" />
	<meta name="keywords" content="nib" />

<script>
function Bid(id)
{
return document.getElementById(id);
}

function Alterner(id)
{
this.id=id;
if (typeof this.elem=='undefined' || elem=='')
	{
Bid(this.id).className='vu'; //Apparition d'un élément
this.elem=this.id;
	}
else
	{
if (this.id!=this.elem)
		{
Bid(this.id).className='vu'; //Apparition d'un nouvel élément
Bid(this.elem).className='disparu'; //Disparition de l'ancien élément
this.elem=this.id;
		}
else if (this.elem=this.elem)	//Alternance sur le même élément
		{
Bid(elem).className='disparu'; //Disparition de l'élément sollicité 2 fois à la suite
this.elem="";
		}
	}
}
</script>
    </head>
	<body>
<?php
$db = mysql_connect('');
mysql_select_db('',$db);
$sql = 'SELECT DISTINCT id, type, thumb, image, legende, descr, mat, num  FROM sm WHERE type= "truc" ORDER BY num ASC';
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

	while($data = mysql_fetch_array($req))
	{
	
$image=$data['image'];
$thumb=$data['thumb'];
$legende=htmlspecialchars(mysql_real_escape_string($data['legende']));
$descr=htmlspecialchars(mysql_real_escape_string($data['descr']));
$mat=htmlspecialchars(mysql_real_escape_string($data['mat']));
	
echo '<img src=" '.$data['thumb'].' " width="50px" class="thumb" onclick="Alterner();">

<div id="conteneur">
	<img class="disparu" src=" '.$data['image'].' " width="200px">
	<h4 class="disparu">'.$data['legende'].'</h4>
	<h4 class="disparu">'.$data['descr'].'</h4>
	<h4 class="disparu">'.$data['mat'].'</h4>
	<a class="disparu"> href="mail.php" class="infcomp"><h4>Informations complémentaires.</h4></a>
</div>';

	}
mysql_close();
		?>


</body>
<style>
.disparu{
display:none;
position:absolute;
}
.vu{
display:inline-block;
position:absolute;
}
</style>
</html>
Sujet clos
Aller à