darksam0000
Messages postés132Date d'inscriptionmardi 24 juin 2008StatutMembreDernière intervention27 septembre 2020
-
18 nov. 2014 à 11:28
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023
-
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.
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.
jordane45
Messages postés37734Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention 1 octobre 2023342 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....
darksam0000
Messages postés132Date d'inscriptionmardi 24 juin 2008StatutMembreDernière intervention27 septembre 20201 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.
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023148 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 !
Ç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 !
jordane45
Messages postés37734Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention 1 octobre 2023342 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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
darksam0000
Messages postés132Date d'inscriptionmardi 24 juin 2008StatutMembreDernière intervention27 septembre 20201 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
jordane45
Messages postés37734Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention 1 octobre 2023342 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..)
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023148 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 !
darksam0000
Messages postés132Date d'inscriptionmardi 24 juin 2008StatutMembreDernière intervention27 septembre 20201 20 nov. 2014 à 23:42
Ok je vais tester. Merci
darksam0000
Messages postés132Date d'inscriptionmardi 24 juin 2008StatutMembreDernière intervention27 septembre 20201 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 ?
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023148 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 ?
darksam0000
Messages postés132Date d'inscriptionmardi 24 juin 2008StatutMembreDernière intervention27 septembre 20201
>
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023 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.
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023148 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
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.
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"],
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 ?
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 ..
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.
@karamel
Messages postés1838Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention19 août 2023148 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
19 nov. 2014 à 23:00
Cependant je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?