Develop Reference

show tooltip onmouse over near the image

I want to show the tooltip on mouse over the image in a table. Please find the sample fiddle http://jsfiddle.net/FpBu4/42/
I want to display the tooltip on the right top of the image on mouse over.
Below is the sample script:
$('.one').hover(function(ev){
$('.tooltipSample').stop(true,true).fadeIn();
},function(ev){
$('.tooltipSample').stop(true,true).fadeOut();
}).mousemove(function(ev){
$('.tooltipSample').css({left:ev.layerX+10,top:ev.layerY+10});
});
Please suggest how to show the tooltip near the image on mouse over the image. Thanks.

Add position:absolute; to the tooltipSample and use pageX and pageY instead of layerX and layerY
Fiddle

Please note, I have not tested this. However, in a recent project I worked on, I had to dynamically add a new div close to a control. What I did was add the new div to the control's parent.
Possibly you could do something like this:
$('.one').parent().hover(function(ev){...});
Just a thought and maybe someone else may have a better solution

Drag and drop activity jquery?

I'm trying to create drag and drop activity where left side have some images and we have to drop that images into right inside the targeted div. can somebody help me or guide me on this i am new in html5 and jquery?
also if the draggable item is not match with that particular targeted div then it comes back to its original place
logic is like that
img drag
{
if(img == targeted div){
img place inside div
}
else{
it reverts to its original position
}
and visa versaaa

You need jquery UI draggable and droppable for this. You can refer them here: http://api.jqueryui.com/droppable & http://api.jqueryui.com/draggable .
I created a fiddle for it. So the images having class "yes" will only be dropped in the div, rest of them will not be dropped.
Here is the sample code:
$('.drag img').draggable({
revert: 'invalid',
});
$('.drop div').droppable({
accept: '.yes'
});
Jsfiddle link: http://jsfiddle.net/p2taQ/

Animation jQuery UI draggable element back to starting position

I have an element, let's say a div, that I want to be able to drag and drop into another div. If the element isn't dragged into the other div I would like it to animate back to it's initial position. The draggable divs are relatively positioned. So, my question is what's the best approach? Is there a method in jQuery UI which will allow it to animate back? Or am I going to have to write it? If I do, here's my strategy:
get coordinates of the draggable div on start of drag using $('#draggableElement').css('left'), and $('#draggableElement').css('top')
On drag complete use the jQuery .animate to put it back in place.
Is that strategy correct? Or is there something more efficient I could be doing?

Have a look at this
and maybe the helper of a jquery ui draggable options -> helper.
I think this should help you. If not, please specify your question.

You need to set revert: 'invalid'
example:
$( "#draggablediv" ).draggable({helper : "clone", revert: "invalid" });
the helper:clone makes a clone when you try to drag it, when you dont drop it in the area the revert: "invalid" returns the clone to his start position.
If you want the dragable to return to his position use revert: "true"
Please see http://api.jqueryui.com/draggable/#option-revert

Getting javascript events to an object that's covered up

I'm trying to build a jquery app where I have a fixed image and a second draggable image. I need the fixed image to display z-index on top of the moveable image -- the fixed image is a picture with an alpha cut-out hole for a face like you might find at an amusement park. The problem is that as soon as the moveable (face) image is overlapping with the fixed image, click and drag events get captured by the fixed image which is on top and don't get to the moveable image. So it's no longer moveable. Here's my code...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<div id="fixed" style="position:relative; z-index: 2">
<img src="background.png">
</div>
<div id="face" style="position:relative; z-index: 1">
<img src="face.png">
</div>
<script>
$(function() {
$("#face").draggable();
});
</script>
How can I get the face object to be draggable when it's behind the fixed background? Can I manually fire the mouse events on the object underneath? If so, how do I invoke them so the jquery-ui draggable() works properly? Can I somehow get the fixed image just not to capture events? Or do I need to write my own draggable mechanism by hand?

I think i found a pretty simple solution for you. Basically you can relay the event only when certain conditions are met (eg #face is under the #fixed). Check out this fiddle for example.
A quick look at the even data revealed that draggable only binds mousedown, so that seems to be the only event you will need to relay.
$('#face').draggable();
$('#fixed').bind('mousedown', function(e){
// TODO: IF #face is under #fixed AND mouse is over #face THEN
$('#face').trigger(e); // trigger the event on face
});

I think you might be better off creating some sort of "drag handle" to the element underneath, which would always be visible (at least while dragging is enabled). That, or a separate UI control separated from the images which would act as a "joystick" for the draggable image, so that you could move the image without having to manually drag/drop the image itself.
Think about it: lets say they drag the item underneath the top item, then drop it; how are they to pick it up again? If this is setup like you explained (a cut-out hole for a face like you might find at an amusement park), then the user would not be able to visibly see the element underneath, and as such, it would be impossible for them to interact with that element using the mouse.

How does Bing.com create enlarged thumbnails?

When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.

If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.

It's the same image. It just enlarges it slightly.

Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.