1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Ouverture d'un pop-up personnalisable en cliquant sur une image

Résolu
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 - 18 nov. 2014 à 11:28
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 - 22 nov. 2014 à 20:35
Bonjour,

Voilà, j'essaye désespérément de créé un pop-up personnalisable en JavaScript/CSS. Je vous explique mon procéder !

Voici le menu que j'ai créé en HTML/CSS :


Ce menu sera composé des photos des membres d'une guilde.

Moi, j'aimerais voir afficher un pop-up lorsqu'on clique sur une de ces photos en utilisant JavaScript et CSS pour le personnaliser, et cela pour chaque photo. Et c'est là que je suis coincé, d'autant plus que je ne suis pas fortiche en JS !

En résumé, je clique sur la photo "membre1" et un pop-up s'ouvre avec ses coordonnées etc... (sans quitter au préalable ma page "membres.html"). Egalement la possibilité de fermer le pop-up à l'aide d'un bouton intégré au pop-up.

Voici mes codes sources pour le HTML et le CSS :

CODE HTML "membres.html" : 
<div class="aside">
	<h3>~ Membres ~</h3>
	<ul>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 1</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 2</a></span>
	</li>
	<li><a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
         <span><a href="#">Membre 3</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 4</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 5</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 6</a></span>
	</li>
         <li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 7</a></span>
	</li>
	<li>
	<a href="#" class="figure"><img src="membres/autre.png" alt=""></a>
	<span><a href="#">Membre 8</a></span>
	</li>
	</ul>
</div>



CODE CSS "style.css" : 
#body .games .aside {
	background: url(../images/border.gif) repeat-x top left;
	float: left;
	margin: 0 0 0 30px;
	padding: 3px 0 0;
	width: 420px;
}
#body .games .aside ul {
 *min-height: 568px;
	overflow: hidden;
	padding: 5px 8px 11px;
}
#body .games .aside ul li {
	float: left;
	margin: 11px 10px;
	width: 178px;
}
#body .games .aside ul li span a {
	font-size: 21px;
	height: 38px;
	line-height: 38px;
	text-align: center;
}



Pouvez-vous m'aider svp ?

Cordialement
Darksam

15 réponses

Réponse 1 / 15
kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Statut
Membre
Dernière intervention
4 octobre 2016
 3
18 nov. 2014 à 16:27
voici un exemple de code pour Popup en Javascript 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html>
	<head>
		<style>
		  #popupcontent{
   position: absolute;
   visibility: hidden;
   overflow: hidden;
   border:1px solid #CCC;
   background-color:#F9F9F9;
   border:1px solid #333;
   padding:5px;
}
		</style>
	</head>
	<body>
	<div id="popupcontent">This is a popup window!</div>
	
	<script>
	  var popUp = document.getElementById("popupcontent");
	   popUp.style.top = "30%";
	   popUp.style.left = "50%";
	   popUp.style.width = w + "px";
	   popUp.style.height = h + "px";
	   
	     if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
 
 var baseText = null;
 
function showPopup(w,h){
   var popUp = document.getElementById("popupcontent");
 
   popUp.style.top = "200px";
   popUp.style.left = "200px";
   popUp.style.width = w + "px";
   popUp.style.height = h + "px";
 
   if (baseText == null) baseText = popUp.innerHTML;
   popUp.innerHTML = baseText + 
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
 
   var sbar = document.getElementById("statusbar");
   sbar.style.marginTop = (parseInt(h)-40) + "px";
   popUp.style.visibility = "visible";
}

function hidePopup(){
   var popUp = document.getElementById("popupcontent");
   popUp.style.visibility = "hidden";
}
	</script>
	
	<a href="#" onclick="showPopup(300,200);" >Open popup</a>
	</body>
</html>
si tu n'est pas satisfait tu pourra tapez ceci sur google 
jQuery Modal Dialog Boxes
bonne chance.
2
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
19 nov. 2014 à 23:00
Ton code fonctionne parfaitement et cela pour chaque image du menu ! Le pop-up a été modifier de toute beauté grâce au CSS. Un grand merci.

Cependant je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?
0
Réponse 2 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
Modifié par darksam0000 le 22/11/2014 à 10:10
Vous avez toujours pas saisis, pas besoin que les membres se connectent sur le site pour cela. L'affichage des membres sur le site permet juste de voir de quoi est composée la guilde. Un affichage simple avec les photos des membres a titre indicatif. Moi ce que je voulais c'est juste :

Je clique sur la photo d'un membre et voir apparaître un pop up avec un petit texte stipulant : ce membre s'appelle membre X, il est le fondateur etc. Rien de plus.

Le code ici fonctionne bien mais le texte marqué dans le JS s'affiche le meme sur tous les pop-up.

Regardez plutôt :
Je me trouve sur la page "membre.html". Là ou sont affichés les photos des membres d'une guilde.


Je clique sur la photo du "membre 1". Et apparaît un pop-up reprenant un texte récapitulatif (max 2 voir 3 lignes) de son parcourt dans la guilde.


En résumé, quand je clique sur membre 1 ou 2 ou 3 ou 4, le texte marqué dans le pop-up est identique ... Je peux pas vous l'expliquez autrement ! Je sais que c'est possible mais je ne peux pas le faire tout seul.


Pour ce qui est de la BDD, elle est terminée. Tout ce qui touche à la connexion d'une session sur le site a été cloturer hier dans l'après midi.
1
jordane45
Messages postés
35830
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2022
 358
22 nov. 2014 à 14:31
Vous avez toujours pas saisis, pas besoin que les membres se connectent sur le site pour cela.

Mais je n'ai jamais parlé du fait que les membres se connectent...
Je t'ai juste dit : Si tu as une Base de données.... comment compte tu la faire interagir avec ton site... vu que tu ne fais aucun lien entre elle et tes pages web.... que pour le faire il te faut utiliser autre chose que simplement du HTML ....

En gros.. ce que tu es en train de faire .. c'est d'écrire en DUR dans ton code les informations relatives à tes membres.... donc... aucun lien avec la BDD .. et donc.. à chaque fois que tu auras un nouveau membre (ou qu'un membre partira).. tu devras éditer le code source de tes pages pour y modifier les informations que tu souhaites y afficher....
Je pense que tu n'as pas compris comment fonctionne un site web "dynamique" .



Et je vais quand même te résoudre ton souci....
lorsque tu utilises klog.logdial(0) ....
Il faut mettre dans les parenthèses le numéro de la personne correspondant au tableau.... 

klog.logdial(0)
klog.logdial(1)
klog.logdial(2)
// etc...
0
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
22 nov. 2014 à 15:50
Pourrais-tu adapter le code en reprenant celui de mon dernier commentaire du bas pour exemple stp car ici je suis sur mon iPhone au boulot.

Je viens de comprendre pour la bdd. La pièce est tombée. Oui en effet pas de liaisons avec ma page html. En tout cas sur la page membres.html c'est normale du moins. C est encore une page test qui n a pas encore été intégrer au site. Les autres pages sont bien liées. Enfin presque toute car certaines n en ont pas besoin. Beaucoup de contenu statique sans php.

En créant ce tableau de membres nous voulions alléger le code en utilisant du JS. Finalement je constate que je resterais une loque en JS LOL.
0
Réponse 3 / 15
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 22/11/2014 à 11:27
recopie et teste le code complet que j'avais mis plus haut j'ai fait des modif qui son l'ajout d'un array comprenant un descriptif different pour chaque menbre et j'ai modifier le html au niveau du onclick en ajoutant un parametre qui est une valeur numerique corespondant au texte a afficher.

rien ne sert de courir il faut partir a point.
cours Forest cours !
1
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
Modifié par darksam0000 le 22/11/2014 à 13:35
Ça fonctionne parfaitement ! Un grand merci à toi !

Pour info : la BDD permettra uniquement aux membres d'avoir accès à un autre contenu. Dans aucun cas, les membres pourront modifier quoi que se soit sur la page "membres.html". J'aurais du le spécifier plus haut ^^

Maintenant comment dois-je faire si je veux rajouter des membres supplémentaire ?

Car l'image 9 et 10, c'est le texte 1 qui apparaît. Par contre les 8 premières images, c'est bien tous les textes différents que tu m'as mis !

Bonne journée et encore merci. ;)
0
Réponse 4 / 15
jordane45
Messages postés
35830
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2022
 358
18 nov. 2014 à 11:58
Bonjour,

As tu regardé du côté de Jquery ?
Des exemples de fenêtres modal existent en pagaille....
Le tout..; couplé avec de l'AJAX pour récupérer les informations que tu souhaites afficher.

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
Modifié par darksam0000 le 18/11/2014 à 12:59
Merci pour ta réponse,

Je ne connait pas bien Jquery non plus. J'ai du mal a fusionner ses fichiers avec mon code source.

Peu être pourrais-tu m'aider a modifier mon code source ?
0
Réponse 6 / 15
jordane45
Messages postés
35830
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2022
 358
18 nov. 2014 à 13:17
J'ai du mal a fusionner ses fichiers avec mon code source

Il suffit de télécharger JQUERY : http://code.jquery.com/jquery-1.11.1.js
De mettre le fichier dans le répèrtoire de ton site.
De l'inclure dans ta page : 
<script type="text/javascript" src="chemin_du_fichier/jquery-1.11.1.js"></script>


De suivre un des tutos expliquant comment mettre en place un popup :
http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Si tu veux un affichage dynamique, il te faudra utiliser de l' AJAX.
Pour ce qui est de AJAX... regarder, là aussi, des exemples sur le net :
Par exemple :
http://openclassrooms.com/courses/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax





0
Réponse 7 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
18 nov. 2014 à 13:32
Ok je vais tester de nouveaux ce fameux "jquery" je te tiens au courant après avoir effectuer des tests.

Dans le pire des cas, je reviendrais vers toi te montrant mes avancées.

Merci
0
Réponse 8 / 15
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
18 nov. 2014 à 20:41
ce qui serait bien pour commencer serait de definir le contenu + le html css de la popup
0
Réponse 9 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
18 nov. 2014 à 23:48
kuetedonald : je ne vois pas comment je pourrais intégrer ton code source dans mes images "membres" que j'ai montré ci-dessus. Cela me semble énorme, surtout si je dois adapter ces lignes pour chaque lien "img" ! Au pire des cas, pourrais-tu essayer d'intégrer ton idée par rapport à mon code source stp ?

Peti rappel : un pop up différent doit etre ouvert sur ma page pour chaque image des membres (voir photo au dessus).

Soit, je vais tester tout cela dés que j'ai le temps et je vous tiens au courant.

Sam
0
jordane45
Messages postés
35830
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2022
 358
19 nov. 2014 à 00:01
Dis toi que quelle que soit la méthode que tu choisiras. ..tu n'auras qu'un seul popup...mais que tu rempliras en fonction de tes besoins (d'où l'Ajax..)
0
Réponse 10 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
Modifié par darksam0000 le 19/11/2014 à 23:06
Kuetedonald : Ton code fonctionne parfaitement et cela pour chaque image du menu ! Le pop-up a été modifier de toute beauté grâce au CSS.

J'ai juste ranger le code proprement dans leur "scripts respectifs" comme ceci : 
<div id="popupcontent">Affichage des coordonnées du membre</div>
      <script type="text/javascript" src="script.js"></script>
         <a href="#" onclick="showPopup(300,200);"><img src="autre.png"></a>


Dans le Javascript, tu avais également oublier les "/" à la balise "button" qui affichait un bug dans le bouton "retour" situé dans le pop up.

Dernière chose, je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?
0
kuetedonald
Messages postés
49
Date d'inscription
vendredi 30 mai 2014
Statut
Membre
Dernière intervention
4 octobre 2016
 3
21 nov. 2014 à 11:42
essaie de jouer juste avec les margins du popup et le tour es jouer
0
Réponse 11 / 15
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 22/11/2014 à 12:23
evite de poster plusieurs postes c'est inutile

essai comme ceci 

<!DOCTYPE html>
<html>
<head>

<style>

#divco{
position:fixed;
left:0px;
top:0px;
height:100%;
width:100%;
background:black;
filter:alpha(opacity=00);
opacity:0;
cursor:pointer;
}

#cadre{
position:fixed;
background-color:#eef2f7;
border:10px ridge #999;
font-family:"Agency FB";
font-size:18px;
color:#fff;
text-align:center;
height:280px;
width:420px;
border:10px ridge #999;
border-radius:10px;
box-shadow:0 0 15px #aaa;

}

.aside {
 background: url(../images/border.gif) repeat-x top left;
 float: left;
 margin: 0 0 0 30px;
 padding: 3px 0 0;
 width: 420px;
 background-color:#222222;
 color:white;
}
.aside ul {
 *min-height: 568px;
 overflow: hidden;
 padding: 5px 8px 11px;
}
.aside li {
 float: left;
 margin: 11px 10px;
 width: 178px;
 height:150px;
 background-color:black;
 list-style-type:none; 
}
.aside span {
 display:block;
 font-size: 14px;
 height: 38px;
 line-height: 24px;
 text-align: center;
}

.aside li:hover{
 color:red;
}

.im3{

height:20px;
width:20px;
display:block;
float:right;
background:#bbb;
border:2px solid #555;
margin:5px 5px 0px 0px;
cursor:pointer;
border-radius:11px;
color:#555;
}

.im3:hover{
border:2px solid #222;
color:#222;
}
</style>
<script>

var klog={

tb_texte:["voici le premier texte","et la c'est un deuxieme texte ","et un troisieme texte pour bien voir la difference","bon la je sai plus vraiment quoi dire","bateau sur l'eau la riviere au bord de l'eau","aaaaaaajklhj jkijljlkj hjkhlkh hjhjoiyuiy cgb","bloup bloup","et enfin le dernier membre en esperant qui tu as compris"],

num:'',

quit:function(){

  document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
  document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
  typeof window.addEventListener == 'undefined' ? window.dettachEvent("onresize",klog.centrer) : window.removeEventListener('resize',klog.centrer,false);
 },

logdial:function(numero){

  var el=document.createElement('div');
  el.id='divco';
  el.onclick=klog.quit;
  document.body.appendChild(el)
  this.num=numero
  this.fad(0); 
 },
 
fad:function(){
  
  var hou=arguments[0];
  var dic=document.getElementById('divco');
  
  if(hou<=0.5){
   hou+=0.15;
   typeof window.addEventListener == 'undefined' ? dic.style.filter = 'alpha(opacity='+(hou*100)+')' : dic.style.opacity=hou;
  }
  
  else{
   klog.boite();
   return false
  }
  setTimeout('klog.fad('+hou+')',30);
 },

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('X')
  el2.appendChild(txt)
  
  var le_html='<br><br><span style="color:black">'+klog.tb_texte[this.num]+'</span>'
  el.innerHTML=el.innerHTML+le_html
  
  el.insertBefore(el2, el.firstChild)
  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);
 },
 
centrer:function(){

  var el=document.getElementById('cadre');
  el.style.top=(document.documentElement.clientHeight-el.offsetHeight)/2+"px";
  el.style.left=((document.documentElement.clientWidth-el.offsetWidth)/2)+'px'; 
 }

}
</script>
</head>
<body>

<div class="aside">

 <h3>~ Membres ~</h3>
 <ul>
 <li>
 <div onclick='klog.logdial(0)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 1</span>
 </li>
 <li>
 <div onclick='klog.logdial(1)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 2</span>
 </li>
 <li>
 <div onclick='klog.logdial(2)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 3</span>
 </li>
 <li>
 <div onclick='klog.logdial(3)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 4</span>
 </li>
 <li>
 <div onclick='klog.logdial(4)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 5</span>
 </li>
 <li>
 <div onclick='klog.logdial(5)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 6</span>
 </li>
         <li>
 <div onclick='klog.logdial(6)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 7</span>
 </li>
 <li>
 <div onclick='klog.logdial(7)' class="figure"><img src="membres/autre.png" alt=""/></div>
 <span>Membre 8</span>
 </li>
 </ul>
</div>
</body></HTML>



rien ne sert de courir il faut partir a point.
cours Forest cours !
0
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
20 nov. 2014 à 23:42
Ok je vais tester. Merci
0
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
21 nov. 2014 à 15:12
Ca fonctionne vraiment bien. j'ai un beau pop up sur fond blanc cadré de noir qui s'affiche au centre de mon écran et cela pour chacun des membres mais ou dois-je taper le texte de présentation du pop up ?
0
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 21/11/2014 à 20:55
c'est dans la fonction boit que la fenetre est cree apres sa tu a deux solution soit tu cree le html texte compris en passant par les methodes du dom soit tu insere du html avec innerHTML

exemple avec innerHtml 

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('X')
  el2.appendChild(txt)


// ici commence l'exemple



var le_html='<br><br><span style="color:black">text_a_inserer</span><br><span style="color:black">text_a_inserer2</span>'
  el.innerHTML+=le_html


/////////////////////
  
  
  el.insertBefore(el2, el.firstChild)
  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);

 },




exemple avec le dom 

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('X')
  el2.appendChild(txt )

               el.appendChild(el2)



// ici commence l'exemple

var span_a_cree=document.createElement('span');
span_a_cree.style.color='black'; 

var text_a_inserer=document.createTextNode('voici du texte a inserer')
  span_a_cree.appendChild(text_a_inserer)

                el.appendChild(span_a_cree)

var saut=document.createElement('br');
                el.appendChild(saut)

var span_a_cree2=document.createElement('span');
span_a_cree2.style.color='black';

var text_a_inserer2=document.createTextNode('voici encore du texte a inserer')
  span_a_cree2.appendChild(text_a_inserer2)

                el.appendChild(span_a_cree2)
                el.appendChild(span_a_cree2)

//////////////////////////////////////////  

  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);

 },





le plus simple quand on a pas l'habitude est d'utiliser innerHtml

ensuite pour ce qui est des donné pour chaques utilisateurs elles son ou dans une base de donné ? un fichier php ? un fichier js ?
0
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1 > @karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
Modifié par darksam0000 le 21/11/2014 à 22:34
Non en faite, quand ma liste des membres est affichées, je souhaiterais que les gens visionnent un résumé du membre (petit texte de 2/3 lignes dans chaque pop up).

En clair, quand je clique sur l'image correspondant au membre 1, un pop-up apparaît avec un texte basique récitant le parcours du membre 1. Rien de complexe.

Peu être par la suite, ajouté une image de 32x32 pour lui attribuer un grade.

Ma base de donnée est déjà faite ;) Je te l'ai dis ... il y a vraiment que le JavaScript ou je galère encore quelque peu.

Ton aide m'est vraiment précieuse. Merci

EDIT : j'ai essayé les 2 façons mais ça affiche en doublon le même texte dans tous les popup de chaque image.
0
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 21/11/2014 à 23:54
mais la base de donnée est bien stoké sur un serveur car comme jordane45 te l'a expliquer il faut recupere les donné en utilisant ajax ensuite c'est une question de remplissage des donné dans la fenetre en fonction du format des donné recu (json ou xml) il faudra ajouter quelles ligne de code mais si on ne connais pas le format de reception des donné on ne peut pas créer la fonction qui modifiera la fenetre,

on ne vas pas cree une fenetre pour chaques profiles mais on a une unique fenetre dans laquel on modifie les donné en fonction du profile c'est plus simple de faire comme ca que de creer x fenetre pour x profile
0
Réponse 12 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
Modifié par darksam0000 le 22/11/2014 à 13:45
Ca a marcher au debut et maintenant ca marche plus :((((( les textes sont tous pareils dans chaque pop up ... j'ai juste changer la photo et changer les nom des membres .... je comprend plus rien. 

<div class="aside2">
                        <h3>~ Membres ~</h3>                         
                         <ul>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/mrjulio.jpg" alt=""/></div>
                            <span>MrJulio</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/2 athoy.jpg" alt=""/></div>
                            <span>Athoy</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/3 Falrage.jpg" alt=""/></div>
                            <span>Falrage</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/sambotte.jpg" alt=""/></div>
                            <span>Sambotte</span>
                          </li>        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/5 pix_fmr.jpg" alt=""/></div>
                            <span>Pix_fmr</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/6 Ben_Elendil.jpg" alt=""/></div>
                            <span>Ben_Elendil</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/7 Razor.jpg" alt=""/></div>
                            <span>Razor</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/skirlyx.jpg" alt=""/></div>
                            <span>Skirlyx</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/9 Exhumus.jpg" alt=""/></div>
                            <span>Exhumus</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/zok_59.jpg" alt=""/></div>
                            <span>Zok_59</span>
                          </li>
                        </ul>
                       </div>



var klog={

tb_texte:["Texte du membre 1","Texte du membre 2","Texte du membre 3","Texte du membre 4","Texte du membre 5","Texte du membre 6","Texte du membre 7","Texte du membre 8","Texte du membre 9","Texte du membre 10"],

num:'',

quit:function(){

  document.getElementById('divco').parentNode.removeChild(document.getElementById('divco'));
  document.getElementById('cadre').parentNode.removeChild(document.getElementById('cadre'));
  typeof window.addEventListener == 'undefined' ? window.dettachEvent("onresize",klog.centrer) : window.removeEventListener('resize',klog.centrer,false);
 },

logdial:function(numero){

  var el=document.createElement('div');
  el.id='divco';
  el.onclick=klog.quit;
  document.body.appendChild(el)
  this.num=numero
  this.fad(0); 
 },
 
fad:function(){
  
  var hou=arguments[0];
  var dic=document.getElementById('divco');
  
  if(hou<=0.5){
   hou+=0.15;
   typeof window.addEventListener == 'undefined' ? dic.style.filter = 'alpha(opacity='+(hou*100)+')' : dic.style.opacity=hou;
  }
  
  else{
   klog.boite();
   return false
  }
  setTimeout('klog.fad('+hou+')',30);
 },

boite:function(){

  var el=document.createElement('div');
  el.id='cadre';
  
  var el2=document.createElement('div');
  el2.className='im3';
  el2.onclick=klog.quit
  
  var txt=document.createTextNode('-->')
  el2.appendChild(txt)
  
  var le_html='<br><br><span style="color:white">'+klog.tb_texte[this.num]+'</span>'
  el.innerHTML=el.innerHTML+le_html
  
  el.insertBefore(el2, el.firstChild)
  document.body.appendChild(el)
  this.centrer(el)
  typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);
 },
 
centrer:function(){

  var el=document.getElementById('cadre');
  el.style.top=(document.documentElement.clientHeight-el.offsetHeight)/2+"px";
  el.style.left=((document.documentElement.clientWidth-el.offsetWidth)/2)+'px'; 
 }

}



Au debut ca m'affichait bien les texte différentes dans chaque pop up mais maintenant plus :(. Ou es l'erreur ?
0
Réponse 13 / 15
jordane45
Messages postés
35830
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 juillet 2022
 358
22 nov. 2014 à 16:07
</code>


Pourrais-tu adapter le code en reprenant celui de mon dernier commentaire du bas pour exemple stp car ici je suis sur mon iPhone au boulot.

Et de ce fait.. ma réponse ne suffit pas à comprendre où tu as fais l'erreur ????

Et bien c'est pourtant simple...
Tu as écris : 
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/mrjulio.jpg" alt=""/></div>
                            <span>MrJulio</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/2 athoy.jpg" alt=""/></div>
                            <span>Athoy</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/3 Falrage.jpg" alt=""/></div>
                            <span>Falrage</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/sambotte.jpg" alt=""/></div>
                            <span>Sambotte</span>
                          </li>


Hors... tu n'as pas repris le code donné précédement dans lequel le paramètre passé à la fonction logdial était incrémenté pour correspondre à l'indice du talbeau Javascript contenant le détail des membres ..

ce qui donne normalement !: 
                          <li>
                           <div onclick='klog.logdial(0)' class="figure"><img src="membres/mrjulio.jpg" alt=""/></div>
                            <span>MrJulio</span>
                          </li>
                          <li>
                           <div onclick='klog.logdial(1)' class="figure"><img src="membres/2 athoy.jpg" alt=""/></div>
                            <span>Athoy</span>
                          </li>                        
                          <li>
                           <div onclick='klog.logdial(2)' class="figure"><img src="membres/3 Falrage.jpg" alt=""/></div>
                            <span>Falrage</span>
                          </li>                         
                          <li>
                           <div onclick='klog.logdial(3)' class="figure"><img src="membres/sambotte.jpg" alt=""/></div>
                            <span>Sambotte</span>
                          </li>


Il ne suffit pas de prendre des bouts de code et de les assembler.... il faut les comprendre...
et de ce que j'en vois.. tu en es loin....

Me dire que vu que ta page n'est pas encore intégrée dans ton site... tu la code en dur... argghhh......
Je ne vois pas le rapport.... Surtout si tu comptes la lier à ta BDD plus tard ... autant la coder en PHP directement non ???
Cela n'empeche pas d'y mettre du javascript (bien au contraire)...
Mais répeter à la main.. la création des DIV ( de tes membres) alors qu'une boucle PHP ferait tout aussi bien ( mieux) l'affait ... me laisse perplexe.




0
Réponse 14 / 15
darksam0000
Messages postés
132
Date d'inscription
mardi 24 juin 2008
Statut
Membre
Dernière intervention
27 septembre 2020
 1
22 nov. 2014 à 16:11
Oui je viens de le voir. J ai pas pensé a regarder ma page html.

Encore une fois, ceci est une page html test. Rien de bien officieux. J essaye de m en sortir au mieux.

En tout cas merci pour ton aide précieuse.

En te souhaitant une bonne journée.

Darksam
0
Réponse 15 / 15
@karamel
Messages postés
1808
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 juillet 2022
 144
Modifié par kazma le 22/11/2014 à 20:44
les evenement peuvent etre cree dynamiquement


rajoute ce code avant la fonction centrer 

init:function(){

var all=document.getElementById('aside').getElementsByTagName('div')

for (var i=0; i<all.length; i++)

all[i].setAttribute('onclick','klog.logdial('+i+')')

 },


puis tout a la fin du script apres la derniere acolade rajoute cette ligne 

typeof window.addEventListener == 'undefined' ? window.attachEvent("onload",klog.init) : window.addEventListener('load',klog.init,false);


et enfin dans le html

donne un id au div principale 

<div id='aside'class="aside">


et supprimes tous les 

onclick='klog.logdial(x)'


rien ne sert de courir il faut partir a point.
cours Forest cours !
0