Hey guys,
I'm rather new at this but I've got a problem with setting priorities
to events that has kept me up all night.
The issue is quite simple:
- An image is clicked
- A floating box appears with the image preview and a "Change Image"
button
- If you click the "Change Image" button, it'll toggle a carousel with
more images (inside the box)
- If the whole box looses focus, it'll be removed.
Now, I couldn't get the box to have focus when it appears, so, I bind
the focus event to the "Change Image" button. But, now, of course,
when you click that button, the carousel gets focused and the blur
event is trigger, removing the whole box.
I was looking for a way to set event priorities, so as to have the
carousel event trigger first and later the blur. But I think that's
browser dependent, right?
Here's the code:
$("a.preview").each( function(i) {
$(this).click(function(e){
e.preventDefault();
newTag = "<div id='preview'>";
newTag += "<p><img src='"+ this.href +"'
alt='Preview'
align='absmiddle'/>";
newTag += "<a class='button' title='Change
Image' id='"+ this.href
+"'><span>Change Image</span></a>";
newTag += "<div class='fotos'><img
src='newsletter/edit/img/
loader.gif' /></div>";
newTag += "</div>";
newTag += "</p>";
$(this).parent().append(newTag);
$("#preview div.fotos").hide();
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
$(".news_foto p a.button").each( function(i) {
$(this).focus()
.toggle(
function(e) {
//$(this).parents("#preview").remove();
$("#preview
div.fotos").show("slow");
},
function(e) {
$("#preview
div.fotos").hide("slow");
}
)
.blur( function(e){
$(this).parents("#preview").remove();
});
});
});
});
};
Any help or workaround will be greatly appreciated.
Thanks
Poly
