Jquery=> 1 klik dubbele functie uitvoering

[phobia]

Op morphius.nl/test/ ben ik een site aan het maken die totaal met Jquery is op gezet.

Maar als je de link kiest "Photos" dan worden er wat tumbs op het scherm gezet.

Als je op de foto van grabit klik, dan wordt de foto vergroot weer gegeven. In een transparante div.

Maar als je op de foto met het rode kruis klik. Dan wordt de functie dubbel uitgevoerd en komen er 2 transparante div's op het scherm.

Terwijl dezelfde functie aan het werk is.

Zou iemand er naar willen kijken en me misschien kunnen vertellen wat er aan de hand is en hoe ik het misschien kan verhelpen?

BVD

 

[sealblade]

denk zelf dat in je script een lijntje teveel staat.

Edit: kan het niet aan je extensie liggen? error=png, grabit=jpeg

 

[phobia]

nee, want als je bij het slotje "inlog" gewoon iets in beide veld invoeren.
Dan komen er andere en meer images.
Maar als je die aan klikt dan worden er veel meer div's gemaakt.

Het heeft volgens mij te maken met de plaatsing van de click function.

 

[That Guy]

Oh noes, ik zie niets als ik je pagina open! Ohja, mn Javascript staat uit. Dat's nou eens jammer.

In ieder geval, ik kan zo snel even niet het probleem vinden, vooral omdat je main.js gewoon een grote bal .append('') is. Niet echt handig dus, alleen dat Javascript.

Zet er eens nog een foto bij. Als deze foto 3 schermpjes opent, heb je je probleem gevonden! Wat je ook kan doen is een alert() ergens in de click function neerzetten.



:thumb:

 

[DoRcO]

Klik eens dubbel snel achter elkaar op Photo's
dan staan de 2 plaatjes er 2 keer, dus 4 totaal...
en als je dan op het kruisje klikt openen er 4 div's
het viel me op dus misschien kun je er wat mee,

Mvg,

 

[csshunter]

Hoi phobia,
Hé, dat is aardig! Als ik reactie nr. #4 van That Guy en nr. #5 van DoRcO combineer ...

• ... moet ik bij het eerste plaatje 4 keer klikken om de pop-up weg te krijgen,
  en heeft de omgeving (overlay-div) resp. 4 keer / 3 keer / 2 keer / 1 keer minder opacity;
• ... bij het tweede plaatje 3 keer,
  en heeft de omgeving resp. 3 keer / 2 keer / 1 keer minder opacity;
• ... bij het derde plaatje 2 keer,
  en heeft de omgeving resp. 2 keer / 1 keer minder opacity;
• ... en bij het laatste plaatje maar 1x zoals het hoort,
  met ook de omgeving maar 1 keer minder opacity.

Het hangt dus inderdaad van het aantal plaatjes af!

In de code staat:
[JS]$(".img img").click(function() {
name = $(this).attr('name');
info = $(this).attr('alt');
Ypos = (($(window).height()/2) - 250);
Xpos = (($(window).width()/2) - 250);
$('body').append("<div id=\"overlay\"></div>");
$('body').append("<div id=\"container\" >...</div>");
$('#overlay, #sluit').click(function() {
$('#container').remove();
$('#overlay').remove();
});
});[/JS]
Het lijkt wel, alsof bij elk nieuw geplaatst img de hele .img-class opnieuw de functie doorloopt, en dus elke eerder geplaatste pop-up cq overlay nog eens herhaald wordt.
Zou het soms iets moeten zijn in de geest van:
[JS]$(".img").click(function() {
Ypos = (($(window).height()/2) - 250);
Xpos = (($(window).width()/2) - 250);
$('body').append("<div id=\"overlay\"></div>");
$('body').append("<div id=\"container\" >...</div>");
$('#overlay, #sluit').click(function() {
$('#container').remove();
$('#overlay').remove();
});
});

$(".img img").click(function() {
name = $(this).attr('name');
info = $(this).attr('alt');
});[/JS]
?

Hierbij kan ik het laatste ronde haakje }); bij de afsluiting van veel van je functies niet goed plaatsen: ik zie geen openingshaakje ( dat afgesloten zou moeten worden; of is dit een jQuery-vereiste?

Misschien loont het ook de moeite om te kijken welke opmerkingen JSLint bij het script geeft. Die heeft het o.a. over "Mixed spaces and tabs" en "'parseXml' was used before it was defined."
Ik snap dat niet, maar misschien kan jij ermee overweg.

De html-validator heeft trouwens ook wat opmerkingen, als ik de gegenereerde code laat valideren.

Tenslotte hoop ik vurig dat dit een experiment is en geen echte site moet worden, want bv. iemand met een pure tekstbrowser ziet:

Niets dus: compleet ontoegankelijk ... en ook Google e.a. zoekmachines zullen het op deze manier niet ver schoppen.

Met vriendelijke groet,
CSShunter

 

[phobia]

thnx voor jullie input.

CSS-Hunter:
Nee dit word geen live site, het is alleen om met jquery te stoeien. En misschien in de toekomst dingen uit te voeren op een admin gedeelte van een site.

 

[csshunter]

Nee dit word geen live site

Helemaal blij, er kan niet genoeg gestoeid worden! :thumb:

 

[xxmart]

@csshunter

Hierbij kan ik het laatste ronde haakje }); bij de afsluiting van veel van je functies niet goed plaatsen: ik zie geen openingshaakje ( dat afgesloten zou moeten worden; of is dit een jQuery-vereiste?

$(".img img").click(function() {
name = $(this).attr('name');
info = $(this).attr('alt');
});

 

[csshunter]

[JS]$(".img img").click(function(){...});[/JS]
Hoeps! Ik kan geen lichtgroen meer tellen...