La communauté ALL HTML c'est 58010 membres à ce jour dont 2 inscrits aujourd'hui et 31 depuis une semaine.

  • imprimer
  • aide

Forum de discussions « Javascript - DHTML - VBScript »

Retrouvez les publications relatives à ces discussions dans notre rubrique javascript.

Problème popup javascript

liste des forums liste des discussions Participer à la discussion

Photo de moebiusss Message publié le mardi 22 avril 2008 à 15 h 01 par moebiusss.
Bonjour a tous,
je débute en js, et je suis en train de faire une page html/javascript, où chaque lien ouvre un popup en javascript (environ 65 lien).
Jusqu'a 40 lien tout marchais bien, mais depuis, la page plante (enfin elle met un petit quart d'heure à s'ouvrir correctement, c'est un peu beaucoup je pense :p)

Le problème vien du fait qu'il y ai trop de javascript dans la page ou alors d'une erreur de ma part?

Voici le lien des éléments de ma page:

http://www.commerce-lille.fr/shopinlille/

Merci pour votre aide :)
Photo de elizabeth Message publié le mardi 22 avril 2008 à 19 h 28 par elizabeth. les pieds sur terre et la tête dans les étoiles
en effet j'ai planté mon nav...
la question, c'est pourquoi tant de javascript ?
pourquoi ne pas stoquer les données à afficher dans ton popup dans une base de donnée php/mysql et faire passer les variables dans ton url en cliquant ?
tu n'aurais besoin que d'une seule fenêtre popup et tes variables dedant...

à moins que je n'ai pas bien compris ta problématique..?
si c'est le cas, peux-tu préciser ?

@ +

Petite fée
Photo de moebiusss Message publié le mercredi 23 avril 2008 à 10 h 06 par moebiusss.
J'ai mis autant de javascript car je connais très peu le javascript et comme ça a marché pour un popup, j'ai pensé que ça pourrai marcher pour plus, mais c'est vrai que ça rend le code très lourd.
Mais c'est vrai que en faisant une base de donnée php/mysql ça simplifierai beaucoup les choses, mais a vrai dire je ne sais pas vraiment comment faire :/
Il faudrait récupérer le numéro du lien dans une variable et faire quelque chose comme ca:

document.popup"x" = new Message(10,10,200,150,'<?php echo $donnees['nom']; ?><br/> <?php echo $donnees['reduction']; ?> <br/> <?php echo $donnees['position']; ?>','#000000','#E84398','#00C0F3', false,true,true);

Mais je ne vois pas comment faire pour que les données changent en fonction du lien :/

Merci pour ton aide :)
Photo de inca roads Message publié le mercredi 23 avril 2008 à 10 h 51 par inca roads.
Bonjour ,

Je pense aussi qu'il y'a trop de javascript que tu charges d'un coup dans le load du <body>

Apparament tu construis dynamiquement tous tes popup javascript avant de les afficher d'ou le temps d'attente

Tu pourrais essayer de les construire au cas par cas c-a-d que quand tu cliques tu construis le popup

Essayer d'alléger le code de chaque popup

Si tes pop up auront tous la même dimension tu pourrais simplifier ta fonction message

Je n'ai pas regardé hyper attentivement mais il me semble qu'à chaque construction de pop up tu charges en mémoire une copie de ce bout de code ,c'est énorme , doit y avoir moyen d'alléger considérablement ces lignes

ocument.body.innerHTML += ('<DIV id="message'+this.id+'.ombre" style="position:absolute;top:'+(x+3)+'px;left:'+(y+4)+'px;visibility:hidden;color:'+fontc+';border-color:transparent;">' 58+'<TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD style="height:17px;width:'+(width)+'px;">' 59+'<b class="rtop"><b style="background-color:black;'+navopacity+';" class="r1" style="background-color:black;'+navopacity+';"></b><b style="background-color:black;'+navopacity+';" class="r2"></b><b style="background-color:black;'+navopacity+';" class="r3"></b><b style="background-color:black;'+navopacity+';" class="r4"></b><b style="background-color:black;'+navopacity+';" class="r5"></b><b style="background-color:black;'+navopacity+';" class="r6"></b><b style="background-color:black;'+navopacity+';" class="r7"></b><b style="background-color:black;'+navopacity+';" class="r8"></b><b style="background-color:black;'+navopacity+';" class="r9"></b><b style="background-color:black;'+navopacity+';" class="r10"></b><b style="background-color:black;'+navopacity+';" class="r11"></b><b style="background-color:black;'+navopacity+';" class="r12"></b><b style="background-color:black;'+navopacity+';" class="r13"></b><b style="background-color:black;'+navopacity+';" class="r14"></b><b style="background-color:black;'+navopacity+';" class="r15"></b><b style="background-color:black;'+navopacity+';" class="r16"></b><b style="background-color:black;'+navopacity+';" class="r17"></b><b style="background-color:black;'+navopacity+';" class="r18"></b></b>' 60+'</TD></TR><TR><TD id="message'+this.id+'.ombre.center" style="background-color:black;'+navopacity+';width:'+(width)+'px;height:'+(height-34)+'px;">' 61+'</TD></TR><TR><TD style="width:'+(width)+'px;height:17px;">' 62+'<b class="rbottom"><b style="background-color:black;'+navopacity+';" class="r18"></b><b style="background-color:black;'+navopacity+';" class="r17"></b><b style="background-color:black;'+navopacity+';" class="r16"></b><b style="background-color:black;'+navopacity+';" class="r15"></b><b style="background-color:black;'+navopacity+';" class="r14"></b><b style="background-color:black;'+navopacity+';" class="r13"></b><b style="background-color:black;'+navopacity+';" class="r12"></b><b style="background-color:black;'+navopacity+';" class="r11"></b><b style="background-color:black;'+navopacity+';" class="r10"></b><b style="background-color:black;'+navopacity+';" class="r9"></b><b style="background-color:black;'+navopacity+';" class="r8"></b><b style="background-color:black;'+navopacity+';" class="r7"></b><b style="background-color:black;'+navopacity+';" class="r6"></b><b style="background-color:black;'+navopacity+';" class="r5"></b><b style="background-color:black;'+navopacity+';" class="r4"></b><b style="background-color:black;'+navopacity+';" class="r3"></b><b style="background-color:black;'+navopacity+';" class="r2"></b><b style="background-color:black;'+navopacity+';" class="r1"></b></b>' 63+'</TD></TR></TABLE>' 64+'</DIV>'); 65 66document.body.innerHTML += ('<DIV id="message'+this.id+'.bord3" style="position:absolute;top:'+(x-2)+'px;left:'+(y-2)+'px;visibility:hidden;color:'+fontc+';border-color:transparent;">' 67+'<TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD style="height:17px;width:'+(width)+'px;">' 68+'<b class="rtop"><b style="background-color:'+backgroundc+';" class="r1" style="background-color:'+backgroundc+';"></b><b style="background-color:'+backgroundc+';" class="r2"></b><b style="background-color:'+backgroundc+';" class="r3"></b><b style="background-color:'+backgroundc+';" class="r4"></b><b style="background-color:'+backgroundc+';" class="r5"></b><b style="background-color:'+backgroundc+';" class="r6"></b><b style="background-color:'+backgroundc+';" class="r7"></b><b style="background-color:'+backgroundc+';" class="r8"></b><b style="background-color:'+backgroundc+';" class="r9"></b><b style="background-color:'+backgroundc+';" class="r10"></b><b style="background-color:'+backgroundc+';" class="r11"></b><b style="background-color:'+backgroundc+';" class="r12"></b><b style="background-color:'+backgroundc+';" class="r13"></b><b style="background-color:'+backgroundc+';" class="r14"></b><b style="background-color:'+backgroundc+';" class="r15"></b><b style="background-color:'+backgroundc+';" class="r16"></b><b style="background-color:'+backgroundc+';" class="r17"></b><b style="background-color:'+backgroundc+';" class="r18"></b></b>' 69+'</TD></TR><TR><TD id="message'+this.id+'.bord3.center" style="background-color:'+backgroundc+';width:'+(width)+'px;height:'+(height-34)+'px;">' 70+'</TD></TR><TR><TD style="width:'+(width)+'px;height:17px;">' 71+'<b class="rbottom"><b style="background-color:'+backgroundc+';" class="r18"></b><b style="background-color:'+backgroundc+';" class="r17"></b><b style="background-color:'+backgroundc+';" class="r16"></b><b style="background-color:'+backgroundc+';" class="r15"></b><b style="background-color:'+backgroundc+';" class="r14"></b><b style="background-color:'+backgroundc+';" class="r13"></b><b style="background-color:'+backgroundc+';" class="r12"></b><b style="background-color:'+backgroundc+';" class="r11"></b><b style="background-color:'+backgroundc+';" class="r10"></b><b style="background-color:'+backgroundc+';" class="r9"></b><b style="background-color:'+backgroundc+';" class="r8"></b><b style="background-color:'+backgroundc+';" class="r7"></b><b style="background-color:'+backgroundc+';" class="r6"></b><b style="background-color:'+backgroundc+';" class="r5"></b><b style="background-color:'+backgroundc+';" class="r4"></b><b style="background-color:'+backgroundc+';" class="r3"></b><b style="background-color:'+backgroundc+';" class="r2"></b><b style="background-color:'+backgroundc+';" class="r1"></b></b>' 72+'</TD></TR></TABLE>' 73+'</DIV>'); 74 75document.body.innerHTML += ('<DIV id="message'+this.id+'.bord2" style="position:absolute;top:'+(x-1)+'px;left:'+(y-1)+'px;visibility:hidden;color:'+fontc+';border-color:transparent;">' 76+'<TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD style="height:17px;width:'+(width-2)+'px;">' 77+'<b class="rtop"><b class="r1" style="background-color:'+backgroundc2+';"></b><b style="background-color:'+backgroundc2+';" class="r2"></b><b style="background-color:'+backgroundc2+';" class="r3"></b><b style="background-color:'+backgroundc2+';" class="r4"></b><b style="background-color:'+backgroundc2+';" class="r5"></b><b style="background-color:'+backgroundc2+';" class="r6"></b><b style="background-color:'+backgroundc2+';" class="r7"></b><b style="background-color:'+backgroundc2+';" class="r8"></b><b style="background-color:'+backgroundc2+';" class="r9"></b><b style="background-color:'+backgroundc2+';" class="r10"></b><b style="background-color:'+backgroundc2+';" class="r11"></b><b style="background-color:'+backgroundc2+';" class="r12"></b><b style="background-color:'+backgroundc2+';" class="r13"></b><b style="background-color:'+backgroundc2+';" class="r14"></b><b style="background-color:'+backgroundc2+';" class="r15"></b><b style="background-color:'+backgroundc2+';" class="r16"></b><b style="background-color:'+backgroundc2+';" class="r17"></b><b style="background-color:'+backgroundc2+';" class="r18"></b></b>' 78+'</TD></TR><TR><TD id="message'+this.id+'.bord2.center" style="background-color:'+backgroundc2+';width:'+(width-2)+'px;height:'+(height-36)+'px;">' 79+'</TD></TR><TR><TD style="width:'+(width-2)+'px;height:17px;">' 80+'<b class="rbottom"><b style="background-color:'+backgroundc2+';" class="r18"></b><b style="background-color:'+backgroundc2+';" class="r17"></b><b style="background-color:'+backgroundc2+';" class="r16"></b><b style="background-color:'+backgroundc2+';" class="r15"></b><b style="background-color:'+backgroundc2+';" class="r14"></b><b style="background-color:'+backgroundc2+';" class="r13"></b><b style="background-color:'+backgroundc2+';" class="r12"></b><b style="background-color:'+backgroundc2+';" class="r11"></b><b style="background-color:'+backgroundc2+';" class="r10"></b><b style="background-color:'+backgroundc2+';" class="r9"></b><b style="background-color:'+backgroundc2+';" class="r8"></b><b style="background-color:'+backgroundc2+';" class="r7"></b><b style="background-color:'+backgroundc2+';" class="r6"></b><b style="background-color:'+backgroundc2+';" class="r5"></b><b style="background-color:'+backgroundc2+';" class="r4"></b><b style="background-color:'+backgroundc2+';" class="r3"></b><b style="background-color:'+backgroundc2+';" class="r2"></b><b style="background-color:'+backgroundc2+';" class="r1"></b></b>' 81+'</TD></TR></TABLE>' 82+'</DIV>'); 83 84document.body.innerHTML += ('<DIV id="message'+this.id+'.bord1" style="height:'+(height-4)+'px;width:'+(width-4)+'px;position:absolute;display:inline;top:'+x+'px;left:'+y+'px;visibility:hidden;color:'+fontc+';border-color:transparent;background-color:transparent;">' 85+'<TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD style="height:17px;width:'+(width-4)+'px;">' 86+'<b class="rtop"><b style="background-color:'+backgroundc+';" class="r1"></b><b style="background-color:'+backgroundc+';" class="r2"></b><b style="background-color:'+backgroundc+';" class="r3"></b><b style="background-color:'+backgroundc+';" class="r4"></b><b style="background-color:'+backgroundc+';" class="r5"></b><b style="background-color:'+backgroundc+';" class="r6"></b><b style="background-color:'+backgroundc+';" class="r7"></b><b style="background-color:'+backgroundc+';" class="r8"></b><b style="background-color:'+backgroundc+';" class="r9"></b><b style="background-color:'+backgroundc+';" class="r10"></b><b style="background-color:'+backgroundc+';" class="r11"></b><b style="background-color:'+backgroundc+';" class="r12"></b><b style="background-color:'+backgroundc+';" class="r13"></b><b style="background-color:'+backgroundc+';" class="r14"></b><b style="background-color:'+backgroundc+';" class="r15"></b><b style="background-color:'+backgroundc+';" class="r16"></b><b style="background-color:'+backgroundc+';" class="r17"></b><b style="background-color:'+backgroundc+';" class="r18"></b></b>' 87+'</TD></TR><TR><TD id="message'+this.id+'.bord1.center" style="background-color:'+backgroundc+';width:'+(width-4)+'px;height:'+(height-38)+'px;">' 88+'</TD></TR><TR><TD style="width:'+(width-4)+'px;height:17px;">' 89+'<b class="rbottom"><b style="background-color:'+backgroundc+';" class="r18"></b><b style="background-color:'+backgroundc+';" class="r17"></b><b style="background-color:'+backgroundc+';" class="r16"></b><b style="background-color:'+backgroundc+';" class="r15"></b><b style="background-color:'+backgroundc+';" class="r14"></b><b style="background-color:'+backgroundc+';" class="r13"></b><b style="background-color:'+backgroundc+';" class="r12"></b><b style="background-color:'+backgroundc+';" class="r11"></b><b style="background-color:'+backgroundc+';" class="r10"></b><b style="background-color:'+backgroundc+';" class="r9"></b><b style="background-color:'+backgroundc+';" class="r8"></b><b style="background-color:'+backgroundc+';" class="r7"></b><b style="background-color:'+backgroundc+';" class="r6"></b><b style="background-color:'+backgroundc+';" class="r5"></b><b style="background-color:'+backgroundc+';" class="r4"></b><b style="background-color:'+backgroundc+';" class="r3"></b><b style="background-color:'+backgroundc+';" class="r2"></b><b style="background-color:'+backgroundc+';" class="r1"></b></b>' 90+'</TD></TR></TABLE>' 91+'</DIV>'); 92 93document.body.innerHTML += ('<DIV id="message'+this.id+'" onCilck="giveFocus('+this.id+');" style="height:'+(height-4)+'px;width:'+(width-4)+'px;position:absolute;display:inline;top:'+x+'px;left:'+y+'px;visibility:hidden;color:'+fontc+';border-color:transparent;background-color:transparent;">' 94+'<TABLE border="0" cellspacing="0" cellpadding="0"><TR><TD style="height:17px;width:'+(width-4)+'px;" onmousedown="JavaScript:StartMove('+this.id+');" onmouseup="JavaScript:StopMove('+this.id+');">' 95+'<div style="float: right; width: 35px; height: 15px; background-color:'+backgroundc+'; margin:0;"><img onclick="array_mes['+this.id+'].minimize();" style="cursor:pointer;" id="message'+this.id+'.resize" src="images/min.gif"> <img onclick="JavaScript:array_mes['+this.id+'].affiche(false);" style="cursor:pointer;" src="images/close.gif" /></div>' 96+'<b class="rtop"><b class="r1" style="background-color:'+backgroundc+';"></b><b style="background-color:'+backgroundc+';" class="r2"></b><b style="background-color:'+backgroundc+';" class="r3"></b><b style="background-color:'+backgroundc+';" class="r4"></b><b style="background-color:'+backgroundc+';" class="r5"></b><b style="background-color:'+backgroundc+';" class="r6"></b><b style="background-color:'+backgroundc+';" class="r7"></b><b style="background-color:'+backgroundc+';" class="r8"></b><b style="background-color:'+backgroundc+';" class="r9"></b><b style="background-color:'+backgroundc+';" class="r10"></b><b style="background-color:'+backgroundc+';" class="r11"></b><b style="background-color:'+backgroundc+';" class="r12"></b><b style="background-color:'+backgroundc+';" class="r13"></b><b style="background-color:'+backgroundc+';" class="r14"></b><b style="background-color:'+backgroundc+';" class="r15"></b><b style="background-color:'+backgroundc+';" class="r16"></b><b style="background-color:'+backgroundc+';" class="r17"></b><b style="background-color:'+backgroundc+';" class="r18"></b></b>' 97+'</TD></TR><TR><TD style="background-color:'+backgroundc+';">' 98+'<DIV id="message'+this.id+'.center" style="color:'+fontc+';width:'+(width-4)+'px;height:'+(height-38)+'px;overflow:auto;">' 99+ contenu 100+'</DIV>' 101+'</TD></TR><TR><TD style="width:'+(width-4)+'px;height:17px;" onmousedown="JavaScript:StartMove('+this.id+');" onmouseup="JavaScript:StopMove('+this.id+');">' 102+'<b class="rbottom"><b style="background-color:'+backgroundc+';" class="r18"></b><b style="background-color:'+backgroundc+';" class="r17"></b><b style="background-color:'+backgroundc+';" class="r16"></b><b style="background-color:'+backgroundc+';" class="r15"></b><b style="background-color:'+backgroundc+';" class="r14"></b><b style="background-color:'+backgroundc+';" class="r13"></b><b style="background-color:'+backgroundc+';" class="r12"></b><b style="background-color:'+backgroundc+';" class="r11"></b><b style="background-color:'+backgroundc+';" class="r10"></b><b style="background-color:'+backgroundc+';" class="r9"></b><b style="background-color:'+backgroundc+';" class="r8"></b><b style="background-color:'+backgroundc+';" class="r7"></b><b style="background-color:'+backgroundc+';" class="r6"></b><b style="background-color:'+backgroundc+';" class="r5"></b><b style="background-color:'+backgroundc+';" class="r4"></b><b style="background-color:'+backgroundc+';" class="r3"></b><b style="background-color:'+backgroundc+';" class="r2"></b><b style="background-color:'+backgroundc+';" class="r1"></b></b>' 103+'</TD></TR></TABLE>' 104+'</DIV>');

personnellement je stockerais les infos directement dans la page en dur dans une table javascript et à chaque click j'appellerais tout en paramétrant avec les valeurs de la table l'appel du popup (function Message)

Cela demande de refondre tout ton code

Je m'absente
Photo de inca roads Message publié le mercredi 23 avril 2008 à 10 h 54 par inca roads.
Dans le copier coller du bout de code que j'ai collé ne pas tenir compte des numéros de lignes rajoutés par l'outil firebug de Firefox
Photo de moebiusss Message publié le mercredi 23 avril 2008 à 11 h 41 par moebiusss.
Hum je pense ne pas m'y connaitre assez en JS pour faire une refonte du code complète :/, le popup c'est un script que j'ai trouvé et adapté.
Il existe peut-être un moyen plus simple de faire des popups en JS(ou autre)?
J'ai pensé par exemple au système d'afficher/masquer les divs onMouseOver ou OnClick, mais je pense que la page sera aussi longue a s'afficher?
Photo de elizabeth Message publié le jeudi 24 avril 2008 à 16 h 00 par elizabeth. les pieds sur terre et la tête dans les étoiles
personnellement je partirai en php mysql, mais ça implique la refonte du site...

mais au vu du travail pour "réparer" ce code, si tu ne maitrise pas vraiment le javascript, je ne suis pas sure que tu n'y gagne pas en le refaisant proprement en php/mysql...

dans ce cas il y a des tutos très bien fait, et on est là aussi !

je n'accède pas à ta page, mais va sur le site :
http://www.la-faiencerie.fr
et clique sur la rubrique "retro".
clique sur les images, il y a un popup qui s'ouvre.

c'est du php/mysql avec un peu de java, mais je n'ai en réalité qu'une fenêtre popup qui affiche les infos passées quand tu cliques sur une image.
tu fais passer l'"id" de la photo, et le popup va chercher dans la base toutes les infos qui correspondent à l'"id" passé.

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Mot de passe perdu

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Créer un compte

Les 5 dernières discussions

agenda