We Keep Coding

Add div on top of centered image?

I am using ImageFlow SEE i want to add div on Top of Image once images clicked and Slides into Center.
I tried checking js file but MoveIT() function is called so many times in js and m not able to identify ,
t.wrap('<div class="f1_card"></div>');
when should i write to wrap div around image.
Thanks,

You can use the prepend() function of jquery. You just need to select the image element and then call prepend function. See the example:
$('.target_image').prepend('<div class="f1_card"></div>');
This will be ok if you want to add an element if you want to add prior to an element. But if you want to wrap an element with a div then you have to use wrap() function.
$('.target_image').wrap('<div class="f1_card"></div>');
And obviously you have to put this code above within the click function or similar event you want. see the example:
$('.target_image').on('click', function(){
$(this).prepend('<div class="f1_card"></div>');
});
Here div with class 'f1_card' will be the parent class of your target_image element. Hope this will help you.

If you're using an animation function, perhaps you could try something like this.
$('.myimage').click(function () {
$(this).animate({
/*.do stuff...*/
}, 'slow', function (){
$(this).prepend('<div class="f1_card">my content here</div>');
});
});
This works as follows. When you click your image, it will perform your jquery animation. Once the correct animation has been performed the function will then, at the destination (in this instance, the clicked div) prepend an element. According to the API documentation this will "insert content, specified by the parameter, to the beginning of each element in the set of matched elements."

You could center the div and use z-index in css.

Child's event is not fired when parent's HTML is changed

Here's an example http://jsbin.com/ukoqud/3/edit
If you click on a red box, you'll get an alert.
If you click on a link, everything in a blue box will be replaced with just a red box. Link will disappear and if you click on a red box then, you'll get no alert.
Why this happens?
Is it related to innerHTML?
Does it work the same way in all browsers?
Here's one more example http://jsbin.com/ukoqud/1/edit In this one you'll get an alert after clicking on a link. Things happen in a quite similar way, but result is different.
I would like to understand the reason, there's no need to fix my code.

When you call $(".red"), it returns a collection of DOM elements that exist at that moment. So $(".red").click(function...) just binds a handler to the click event on those elements. If you later create new elements with the same class, they weren't in this collection, so they don't have the handler bound to them. jQuery doesn't watch the DOM for changes and update the handlers dynamically -- the bindings are just on the elements you matched at the time you called click().
You either need to bind the handler again after adding the new HTML, or use delegation with .on():
$(".blue").on("click", ".red", function(){
alert('click on a red box detected');
});
This works by binding a handler to $(".blue"), which doesn't change dynamically. The handler checks whether the element you clicked on matches the ".red" selector, so it's able to handle dynamically-added elements without requiring rebinding.
I think the reason why it works in your second example is because the red block isn't inside the blue box to start. When you move it inside, jQuery reuses the same DOM elements, so the bindings go along with it. In the first example, the red box starts out inside the blue box. When you do $('.red').parent().html(...), the first thing it does is empty $('.red').parent() (the blue box), so the original red element is removed from the DOM, and its bindings are lost.

We need to understand how setting html of an element works. Then you will figure out your answer yourself.
Take a look at this bin Updated Bin
When we set HTML of an element, it first removes all the elements inside it.
Those elements are not removed from memory depending upon whether they are garbage collected or not.
If any of the child is having a reference, then that particular child won't be garbage collected.
In your case, we are having a reference to red element so it is still present in memory but not a part of document.
When we say blue.html(red) in my example, red element becomes a part of document again but this time there won't be any handlers on it So your click does not work.
While in your example2,
red element is always a part of document hence no handlers were lost when red element is moved inside blue element.
I hope this will help.

because when u click the link, you delete everything on screen and create everything from a scratch and event binding goes away. so you should use this
$(".blue").on("click", ".red", function(){
alert('');
});
this way, binding is done differently. it doesnt bind it statically

Adding a class to a .click function

new to StackOverflow and relatively new to JavaScript/jQuery. I've been trying to develop a website that contains a vector map (using the Raphael plugin), and when a particular area of the map is clicked, I want it to open a Lightbox using the Colorbox plugin. I have the Raphael and Colorbox plugins working individually (I've got the hover function working for Raphael, and I've got the Colorbox to work when a normal link is clicked). However, I'm not sure how to get the Colorbox to work when it is a Raphael element that is clicked.
This is because I think I need to add the "inline" class to the Raphael element, however my .click function can only get a url (I can't add a class).
Apologies if this question doesn't make much sense, I've been going round in circles for hours now.
Current .click function. locs is an array of the Raphael objects in a separate document. locarr is an array containing these objects for a for-loop. id and url are elements of the Raphael object.
.click(function(){
location.href = locs[locarr[this.id]].url
})
The Colorbox works with a normal link, like below. But I can't figure out a way to add the class to my .click function. I've tried various versions of .addClass and similar with no success.
LINK
I think my problem is because the Raphael objects do not exist in the HTML (the url is taken straight from the JavaScript document.
Sorry again if this doesn't make sense. Thanks.

Not going to pretend to try and understand full well what you want, so I am going off the current title. If thats the case and you want to add a class to an element for styling purposes of one sort or another and you want it to do this when the link is clicked on you can try..
$('.inline').click(function(e)
{
e.preventDefault();//stops the mouse click from triggering a normal click event
$(this).addClass('className');//adds a defined class from your stylesheet
//$(this).css({"color":"#FF0"});//changes the style properties without a class
});
Since your saying in the comments your JS is generating the link. You can try..
$('body').delegate('click', '.inline', function(e)
{
e.preventDefault();//stops the mouse click from triggering a normal click event
$(this).addClass('className');//adds a defined class from your stylesheet
//$(this).css({"color":"#FF0"});//changes the style properties without a class
});
or you can try
$('.inline').live('click', function(e)
{
e.preventDefault();//stops the mouse click from triggering a normal click event
$(this).addClass('className');//adds a defined class from your stylesheet
//$(this).css({"color":"#FF0"});//changes the style properties without a class
});

How to select an element by distance when it isn't a parent or child

I'm working on editing a tooltip plugin (TooltipsY) to use a div instead of the title element for the content of the tooltip. I'm doing this for a multitude of reasons, the primary one being so I can have HTML in my tooltips without causing validation errors.
The problem I'm having is that when changed the content of the tooltip to be the div instead of the title attribute, every link with a tooltip shows the same tooltip content. That's because The div's aren't related to the links in any way so I can't use "this" to select them.
It would work if I knew some way to change $('div.showtip').html(); to this.closest($('div.showtip').html()); (that method won't work because the div isn't a parent or a child of the link) so how can I make the tooltip content the closest div to the link that's being hovered over?
Here is my example: http://jsfiddle.net/sgCCD/2/
Note: The only thing that should need to be changed is the value of the variable showtip.
Also, I don't want a suggestion for a different tooltip plugin, I'm doing this just as much for my own personal experience as I am to improve the functionality of the plugin.

Hope this is what you're looking for:
http://jsfiddle.net/sgCCD/3/
changed this line:
var showtip = $('div.showtip').html();
to this:
var showtip = $(el).next().html();

JQuery event selector

Say i have 10 small images that i want to use as tooltips.
Im assinging them all the same class, '.helper'
Im selecting helper, then calling
mouseenter(function() { $(".helper").stop(false,true).fadeIn(); })
I then want a div to popup, containing some text. This works fine if there's only one tooltip on the page, but as soon as there is more than one, whenever i hover over one, they all appear at the same time.
Have i got something fundamentally wrong?
Comments appreciated.
Thx

Use this as the selector inside instead of the .helper selector again:
$('.helper').mouseenter(function() {
// "this" now refers to the image that is being hovered...
$(this).stop(false, true).fadeIn();
});

If you're wondering what the problem was, it was that when you called
$(".helper")
within your function, you were getting all the elements with class helper, in stead of just the single element you wanted.