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
Related
I am trying to make the Joe Pilot Chapter 1, link at the bottom right, pop up into a new layer in the middle of the page as wide as the tall as the main body container, but i cant seem to figure out it,
the link is http://alanmcteer.com/v2/
and the jsfiddle.net/vmsfyqz2/
Can someone please help me out? it seems to be popping in the the bottom part only?
You could change the position to fixed on .black_overlay and .white_content so that the body is the parent element.
I updated your fiddle:
http://jsfiddle.net/vmsfyqz2/1/
easies way would be to take the "light"-container and set it directly under the body-node. this should do it.
you are using jquery, why not implementing the "onclick" handler with jQuery ?
I am trying to apply a css zoom effect on an img and when I do the jQuery function offset() seems to return the wrong value.
I have created a little jsFiddle Example of my problem that shows the issue I am having. Please check this out in Chrome because that is the browser I am experiencing this problem in (I don't think
If you click on the show frog offset button it will show a value of 219 for the offset().left of the frog img, then if you press the zoom button the from will be zoomed by 2.0. If you then press the show frog offset button again, you will see offset().left of 101.5 for the frog img.
Here is the code I use to zoom and unzoom the frog's img in my jsFiddle Example (also linked above)
$("#zoom-frog-button").click(function() {
$(".frog-img").css("zoom", 2.0);
});
$("#unzoom-frog-button").click(function() {
$(".frog-img").css("zoom", 1.0);
});
This appears to be working correct. When you use the zoom styling property, it increases/decreases the size of the element you apply it to. So, when thinking of offset() returning the position relative to the document, this image zooms at a setting of 2, doubling it's size, and in return, cutting it's offset() in half. The document size isn't changing, but the image is. I think this is what you are thinning is an issue? Hopefully that helps you! Happy coding!
I'm having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.
What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.
Here's the fiddle for it
http://jsfiddle.net/XtXGR/
Now there's two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.
Any help would be greatly be appreciated. Thanks
I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!
Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.
The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.
Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.
According to the show API, you should use the slide effect to get what you want.
Your final code should look like this: http://jsfiddle.net/XtXGR/28/
A couple things:
If you want to do a fadein/out this would be better:
$(document).ready(function(){
$("div.item_container").hover(function() {
$("div.item_body").fadeIn(500);
}, function() {
$("div.item_body").fadeOut(500);
});
});
Also, you should probably float the div .item_body to the left..
Demo: http://jsfiddle.net/lucuma/XtXGR/33/
How about using CSS3 transitions instead?
See this: http://jsfiddle.net/EVDj6/2/
Something like this? Using slide will give you the slide from default left effect.
$(document).ready(function(){
$("div.item_container").on('hover',function(){
$("div.item_body").toggle('slide',500);
});
});
http://jsfiddle.net/XtXGR/25/
There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.
Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax:
http://jsfiddle.net/fH3EC/1/
I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.
http://jsfiddle.net/XtXGR/50/
Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks
If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.
I want to trigger an event handler when the user hovers on a particular part of the image, like the center of the image or the right side of the image (area would include, say, about a 100 pixels). I am not using any framework, so this is normal javascript that I am working with.
I am not sure if using image maps would work. Can anyone help?
Quirksmode about mouse position
Given the craziness involved here I would:
Use a framework (I just did something like this with Mootools)
Put absolutely positioned divs over the image and listen to events on them, instead of the image (did this too recently, a left 50% and a right 50%, way less cumbersome than tracking the mouse position).
Or go for it, quirksmode gives a decent function to get the mouse position, then you'll need to calculate the position of the image, then do the math to get the position of the mouse on the image, do the math in a mouseover event of the image, then continually check if the position meets your criteria, then do something about it when it does :)
You can use the MouseMove event to find out the location of the cursor, and then implement your own logic to calculate this position relative to the image.
See this page on getting the mouse coordinates.
i do not know how many areas you need and if they need to be especially shaped or something like that....
a straightforward solution would be placing (CSS) empty div elements "over" the image which will trigger the events
afaik it is not possible to trigger js events with an image map
An image map coupled with jquery is a great solution I've used before. I see that you're not using a framework, but it's worth a look.
Here's a little code snippet I used with an image map and mouseenter / mouseleave events.
$(".map-areas area")
.mouseenter(function() {
idx = $(".map-areas area").index(this);
showMapArea(idx);
})
.mouseleave(function() {
$(".map-hovers img").hide();
$(".map-titles img").hide();
});
I suggest putting an invisible div in the place where you want to check for mouse_over in the image. (In the case that the area you want is rectangular of course). And then trigger on mouse_over for this div.
If you want to check for non rectangular areas (that can't be a div), I would suggest that you put a div of the same size of the image on top of it. Check mouse position on that div, and use it to compare with a mask image.
Example:
MousePosOnGhostDiv_X = 76;
MousePosOnGhostDiv_Y = 145;
if(CheckColorOfMaskImage(MousePosOnGhostDiv_X,MousePosOnGhostDiv_Y)=="orange") do something.
By knowing which color it is on the mask image you can set multiple events.