Stuttering on mouseout of moved image element - javascript

Basically, when hovering over an image, I'd like to move the image slightly and then on mouseout, return the image to the original location. I've got a version of the code that works to accomplish this task but there is a bit of a "stuttering" effect if the user was to move the mouse from the image into the area where the image was located originally.
-----
| |
----- |img|
| | | |
|img| ==> -----
| | xxxxx
----- xxxxx
In the diagram above, when the mouse hovers over the image, it gets nudged up 2 units. On mouseout, the image returns to the original position. My code, as below, works but when the mouse gets moved into the previously vacated area (e.g., the x's), the code thinks that it's hovering over the image again and then moves the image back up 2 units. This creates a sort of stuttering effect when hovering the mouse over the area marked by x above.
I've tried different approaches (e.g., using animate(), adding/removing a wrapper div, using setTimeout(), etc) but they all produce the same undesired effect. I considered constantly monitoring the mouse position on the page and remembering the position of the image, but that seems excessive, esp since there could be anywhere between 1 and n images.
$(document).ready(function() {
$('.hoverImage').hover(
function(){
$(this).offset({'top':$(this).offset().top-2});
},
function(){
$(this).offset({'top':$(this).offset().top+2});
}
);
});
Here is a jsfiddle demo-ing the issue: http://jsfiddle.net/Ut8eK/
Any tips would be much appreciated. Thanks in advance!
Update
Awesome. I ended up using a bit of both answers:
$(document).ready(function() {
$('.hoverImage').wrap('<div class="hoverImageWrapper" style="display: inline-block;">');
$('.hoverImageWrapper').hover(
function(){
$('.hoverImage',this).offset({'top':$(this).offset().top-10});
},
function(){
$('.hoverImage',this).offset({'top':$(this).offset().top});
}
);
});
Here's a jsfiddle of the above: http://jsfiddle.net/rf5mE/
This works great for my needs, since adding the functionality will be super easy just by adding class="hoverImage" to the appropriate images.
I accepted #Matyas as the answer only because his answer came through first (by about 4 seconds!).
Thanks y'all!

You should put your images in a wrapper, and listen to the hover in the wrapper, which doesn't change its position. This way you should get a constant effect
EDIT:
The problem is that the image moves lower on mouseout than the size of the div (original size of the image) Solution: add a 10px bottom padding to the div, in the case the image moves 10px lower, to still have a div in its background if it's hovered. (updated link)
TY Huangism for the notification
Update example:
HTML
<br />
<div>< img src="http://placekitten.com/120/100" class="hoverImage" /></div>
<div>< img src="http://placekitten.com/100/100" class="hoverImage" /></div>
<div>< img src="http://placekitten.com/110/100" class="hoverImage" /></div>
JS
$(document).ready(function() {
$('div').hover(
function(){
//search for the image inside the wrapper (reffered to by this)
$('.hoverImage', this).offset({'top':$(this).offset().top-10});
},
function(){
$('.hoverImage', this).offset({'top':$(this).offset().top+10});
}
);
});
CSS:
div{
display: inline-block;
}
div:hover{
padding-bottom: 10px;
}

Put a wrapper on it and target the wrapper to move the image
http://jsfiddle.net/Ut8eK/4/
HTML
<div class="hoverImage"><img src="http://placekitten.com/120/100" /></div>
JS
$(document).ready(function() {
$('.hoverImage').hover(
function(){
var $img = $(this).find('img');
$img.offset({'top':$img.offset().top-10});
},
function(){
var $img = $(this).find('img');
$img.offset({'top':$img.offset().top+10});
}
);
});
for multiple divs you do need the inline-block css

Related

How to remove ghost image when dragging an img using CSS or JavaScript?

Problem
I have the following html snippet
<div class="image-wrapper">
<img src="...">
</div>
I want to change the position of the .image-wrapper when a user drags the image, but I don't want the ghost image while dragging the image.
Trial and error #1
I've tried adding draggable="false" to the image, like
<div class="image-wrapper">
<img src="..." draggable="false">
</div>
but this totally prevents the image to be able to drag, and thus no event is triggered when I try to drag the image. I do want to drag the image, I just don't want the ghost image when dragging.
Trial and error #2
I've tried the following CSS
img {
-webkit-user-drag: none;
user-drag: none;
}
but again my image becomes undraggable. By the way, any value other than none won't remove the ghost image.
Trial and error #3
I've tried the JS approach (with jQuery)
$('img').on('dragstart', function (event) {
var emptyImage = document.createElement('img');
// Set the src to be a 0x0 gif
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
event.dataTransfer.setDragImage(emptyImage, 0, 0);
});
but my chromium browser complains that event.dataTransfer is undefined (I've double checked the code and there is no typo).
Trial and error #4
I've tried
$('img').on('dragstart', function (event) {
event.preventDefault();
});
but it seems that the event stops propagation and thus the wrapping div can't catch the event and change its position accordingly.
So how can I enable image dragging, keeping the event properly propagated, and remove the ghost image while dragging?
Thanks in advance.
Since #Kaiido don't want to answer the question, I'll answer this question myself using his advice.
As #Kaiido pointed out in the comments of the question, jQuery wraps the dom events. The original event is available through event.originalEvent. So I can just modify my "Trial and error #3" like
$('img').on('dragstart', function (event) {
var emptyImage = document.createElement('img');
// Set the src to be a 0x0 gif
emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
event.originalEvent.dataTransfer.setDragImage(emptyImage, 0, 0);
});

Show bigger image on thumbnail's hover

For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.
How can I do it? I'm a beginner with HTML/css/Javascript
There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an article with some different options. Here is an example of what you are looking for.
U can work without thumbnails..
for thumbnail
<img src="http://example.com/img1.jpg" class="compress"/>
on hover of the above show this one
$(".compress").hover(function(){
$(".image").show();
});
full image
<img src="http://example.com/img1.jpg" class="image"/>
css
.compress{
width:20%;
/*aspect ratio will be maintained*/
}
.image{
display:none;
position:absolute;
}
its not complete,but i think it might help
Use JQuery:
$(function() {
$('#thumbnails img').click(function() {
$('#thumbnails').hide();
var src = $(this).attr('src').replace('.png', 'Large.png');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">
Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div> set it's display:none and then bind an event to the thumb div like this :
$(".thumb_class").hover(function(){
$(".some_class").show()
},
function(){
$(".some_class").hide()
}
Of course you can personalize every div . The second function let you to hide the div when the mouse is out of the thumb. Hope i was as clear as possible.

How to resolve mouse hover on overlapping images in jQuery?

This question seems somewhat related to
How do I check if the mouse is over an element in jQuery?
jQuery check hover status before start trigger
but still not quite. Here's the thing: I'm writing a small gallery and at some point the user clicks on a thumbnail. The large version of the image shows as an inside of a full-screen . So far, so good. When the mouse hovers over that I show three images: close, left, right, intended to navigate through an album; when the mouse leaves the image or the navigation images, the three navigation images fade.
These three navigation images partially overlap with the main image, e.g. the close image is a circle in the upper left corner. And that's the tricky part.
The mouseleave triggers whenever the mouse moves from the main image off the side, or from the main image onto one of the three small overlapping images. The mouseenter triggers for each of the small overlapping images as expected.
However, this creates a funky blinking effect because on mouseleave of the main image I hide() the three small images, which immediately triggers a mouseenter for the main image because of the overlap and the mouse still being on top of the main image.
To avoid that, I tried to determine if, upon mouseleave of the main image, the mouse has moved onto one of the small overlapping images. For that, I used this code:
main_img.mouseleave(function() {
if (!hoverButtons()) {
doHideButtons();
}
});
function hoverButtons() {
return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}
This works great on Safari and Chrome, but not on FF and IE where the images still blink. Further noodling around posts, it seems that ":hover" is the problem here as it is not a proper selector expression but rather a CSS pseudo class?
I tried to work with switches that I flip on/off as I mouseenter/mouseleave the various images, but that doesn't work either because the events seem to trigger in different orders.
How do I go about this? Thanks!
EDIT: I might have to clarify: before the navigation buttons are shown, I set their respective left and top attributes in order to place them in dependence of the main image's position. That means I need to do some work before I can call .show() on a jQuery selector. I tried to add a new function .placeShow() but that didn't quite work with respect to selectors like $(".nav-button:hidden").placeShow().
You can try with this:
$("#main, #small").mouseenter(function() {
$("#small:hidden").show();
}).mouseleave(function(e) {
if(e.target.id != 'main' || e.target.id != 'small') {
$('#small').hide();
}
});
DEMO
Here is what I ended up doing. There are four images I use in my slide show: the main image, and then left, right, close button images.
main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");
The classes here are essentially empty, but help me to select based on above answers. The main image then shows without navigation buttons, and I attach these event handler functions:
$(".slide-show").mouseenter(function() {
$(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
$(".photo-nav").hide();
});
where the placeShow() moves the navigation buttons into their respective places. This function is defined as follows:
$.fn.placeShow = function() {
var pos = main_img.position();
var left = pos.left;
var top = pos.top;
var width = main_img.width();
var height = main_img.height();
close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}
This worked so far on Safari, IE, FF, Chrome (well, the versions I've got here...)
Let me know what you think, if I can trim this code more, or if there are alternative solutions that would be more elegant/fast. The final result of all this is on my website now.
Jens

Change a div background with jQuery

I need to change my background div with some other images.
I want that first, myDiv load the first background image on css style, and then within 2/3 seconds of delay add a fade effect change the background image.
If it's possible, I need to do this with jQuery.
You cannot do fade or any other transitions directly on the background image. You can however add another div with second image as its background and fadeOut() the original one.
Does this do what you you want?
http://jqueryfordesigners.com/image-loading/
EDIT: A bit more Googling - this sounds like what you are trying to do...
http://www.magneticwebworks.com/jquery-rotating-page-background/
Edit: another go - THis? http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1
this is not fade effect but you can delay and change background image like this.
function changebackground(){
$('#divID').css("background-image", "url(/myimage.jpg)");
}
setTimeout(function() { changebackground();}, 3000);
this might be good workaround
http://jquery.malsup.com/cycle/
after you position on top divs with cycle it can be your background - cycle.js give's you lot of options.
if you want only rotate image's in bacground you must first preload that image and second you must put it in other div so that both divs can animate.
There is no support for this, even if you add all the functionality of jQuery UI.
You could append a temporary image, absolutely positioned inside the div for which u want to change background. Let the image fade in, and once it's fully opaque, swap background image for the div. This will be problematic if you have a repeated background, however.
var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
var img = $('<img />', {
src: im2,
}).css({
position: 'absolute',
top: 0,
left: 0
}).hide();
$(this).append(img);
img.fadeIn('slow', function() {
$(this).parent().css('background-image', 'url("'+im2+'")');
$(this).remove();
});
});
Of course, you should move the CSS I included in my script to a .css file, and use a class instead, for more readable code.

Mouseover/mouseout, mouseenter/mouseleave, hover flickering issue

I have a div with an image inside it. When I hover the image, I create a tooltip div thats absolutely positioned over part of the image (the absolute position is important). It contains the title and alt text.
This is all well and good until you hover the tooltip box. It doesn't bubble down and it thinks I'm no longer hovering over the image, thus making the tooltip box disapear. But then it registers I'm hovering the image again and it goes back and forth between showing the tooltip box and hiding it.
Thus the flickering issue.
There are a bunch of posts on SO about the flickering issue and I've tried so many solutions but none have been working. I've tried Mouseover/mouseout, mouseenter/mouseleave, hover, and even using live() in combination with them. I even switched from creating the tooltip from scratch to having the empty div there so it would be in the DOM when the page loaded in case that was the issue. I really don't know what to do anymore. Here is my code at the moment.
$("img").bind("mouseover", function() {
var pimg = $(this);
var position = pimg.position();
var top = position.top;
var left = position.left;
var title = $(this).attr('title');
var alt = $(this).attr('alt');
$('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});
$("img").bind("mouseout", function() {
$('.toolTip').empty();
});
The problem is a) you need to use mouseenter / mouseleave and b) the tooltip div needs to live inside the element that has the mouseenter / mouseleave listeners.
eg:
<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>

Categories

Resources