We Keep Coding

Show hidden image on mouseover

I have a problem when trying achieve hover effect on mapped image. I have an image with mapped areas and on all of them I want to show a different image when hover.
You can see my work so far here:
http://mantasmilka.com/map/pries-smurta.html
The problem is when I hover over area it show the image, but when I move the cursor (not leaving the area) it starts flickering. It takes area space pixel by pixel.
I've tried working with Javascript and jQuery solutions:
Javascript:
mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"
jQuery:
$('.hide').hide();
setTimeout(function(){
$("#area-kaunas").mouseenter(function(){
$('#Kaunas').show();
});
$("#area-kaunas").mouseleave(function(){
$('#Kaunas').hide();
});
}, 500);

Why not just use hover() inside of jQuery? I'm also unsure why you bind the events after a 500 millisecond timeout?
$('.hide').hide();
$("#area-kaunas").hover(function() {
$('#Kaunas').show();
}, function() {
$('#Kaunas').hide();
});

There is a css property called "pointer-event" which gives the value "none" to the img tags that overlap in the mapped image and works as you need it. This is the documentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
The problem will always be the compatibility of browsers.

How Can I Animate Background Color Dynamically Added Element?

I am adding some elements with ajax. For this example, i am adding user comments. When user make new comment, his comment viewing first place and (this is question) I want to add new background animation first comment div. But i know we cant animate color with Jquery. I can use JqueryUI highlight effect. But i cant select new added element. Off course use here delegate() or on().. But my all try failed.
I need help.
Some Code Example;
$("#DoCommentBtn").click(function(){
var UserID = 1,
LookID = 2,
Comment = $("#CommentInput").val(),
CommentType = 0,
PostData = "USERID=" + UserID + "&LOOKID=" + LookID + "&Comment=" + encodeURI(Comment) + "&CommentType=" + CommentType;
$("#CmAnm").fadeIn();
$.ajax({
type:'POST',
url:'ajax.asp?cmd=docomment',
dataType:'html',
data:PostData,
success:function(cevap) {
$("#CmAnm").fadeOut();
$("#CommentsArea").load("ajax.asp?cmd=LoadComments&LOOKID=" + LookID + "&PART=0");
//Now all comments loaded Here I must animate background first div in #CommentsArea Animation Example: Background color blue to white..
}
});
});

But i know we cant animate color with Jquery
I'm not a jquery expert but i'm sure it is possible.
Is this what you're looking for?
$( "#CommentsArea div:first-child" ).animate({ backgroundColor: "#fff"}, 1000);
Should animate the background to white #FFF in 1 second (1000ms)
Docs: jQuery .animate() - jQuery UI .animate()
EDIT:
changed background to backgroundColor

Animation Properties and Values
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality
(For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used)
Docs : JQuery animate()
So what can i do right now ?
I am adding this library;
Jquery.Color
And now jsfiddle example working.
Example Code :
$(".justDiv").animate({ backgroundColor: "#ffffff",width:105 }, 1000);

.hover not working when the mouse leaves

When the mouse hovers over an anchor .I1 , I want to do this:
$("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
$(".opacity").css("opacity", "0.7");
And when the mouse leaves to do this:
$("html").css("background","");
$(".opacity").css("opacity", "1");
//which is the same as going back to what it was before it's hovered
Here is what I have, which doesn't work:
HTML
<a class="I1" href="Photos/8143009-exterior06.jpeg">
<img src="Photos/8143009-exterior06.jpeg" alt="" width="297" height="200" />
</a>
JS :
$(".I1").hover(function(){
$("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
$(".opacity").css("opacity", "0.7");
});
I want to do this for each photo, in a displayed row of photos.
Is there also a quicker way to do that, rather than having to write the script for each photo?

The documentation about hover() states this (see reference):
.hover( handlerIn(eventObject), handlerOut(eventObject) )
You are calling a custom function when the mouse enters (first parameter of hover()), and not when it leaves (second parameter).
So, you might change your code for this:
$(".I1").hover(function(){
$("html").css("background","url(Photos/8143009-exterior06.jpeg) no-repeat center center fixed");
$(".opacity").css("opacity", "0.7");
},function(){
$("html").css("background","");
$(".opacity").css("opacity", "1")
});
Edit
I think it's better for you to stick with my proposition, it's not that much longer.
Without more information about what you're trying to achieve, here's my guess: you'll have multiple .I1, and as you were about to code it, it would have been very long to copy / paste this hover function for each elements and put the right picture link in each. (correct me if I'm wrong)
What I propose you to do, is extracting the link of your picture, and use it as your html background (and so, whatever the hovered element, the background will adapt).
$(".I1").hover(function() {
var imageToPrint = 'url(' + $('img',this).attr('src') +')';
$("html").css("background", imageToPrint + "no-repeat center center fixed");
$(".opacity").css("opacity", "0.7");
},function(){
$("html").css("background","transparent");
$(".opacity").css("opacity", "1")
});
Here's a fiddle for demonstration.

Check this link http://api.jquery.com/mouseenter/.
They are doing just the thing you want but they are changing the text in the divs ( look at the example at the bottom) and you need to change the background.
I hope I helped.

//When mouse rolls over
$(".I1").bind('mouseover mouseenter', function() {
//do stuff
});
//When mouse is removed
$(".I1").bind('mouseout mouseleave', function() {
//do stuff
});
Might use this. :)

Animate/Slow down elements filling space left by removed element

Here is my example: http://jsfiddle.net/MT5xS/
When you click the first picture, it is removed and all the following images move back to fill the space left by it. But they move too fast and you don't even get the notion that they moved.
My question is, how do I make these elements move smoothly? Basically like an iPhone when you move or delete an icon, like this http://youtu.be/-r7K4LTbI4A?t=27s
I'm not worried about IE6/7/8 or any other compatibility issues.

The most common solution I know off is to animate hide(), then in the callback function remove your image.
$('.user-pic').live('click', function() {
var $item = $(this).closest('li');
$item.hide('slow', function(){ $item.remove(); });
});​
DEMO - Animate element removal

Take a look at this jQuery plugin: http://razorjack.net/quicksand/
It does what I think you are describing. You could use it or take a look under the covers to see how its being done. I believe they're using position: absolute on all the grid items.

Another option is to fadeTo 0, animate() the image width to 0, then remove().
http://jsfiddle.net/MT5xS/2/

Instead of removing the element on click, you want to fade the target element out and then remove the element. Note this cannot be accomplished by chaining remove after the desired animation.
If you chose to rely on old school setTimeout() you have to remember about correct variable scoping. Alternatively you could add a callback to be executed upon animation completion:
var $el = $(this).closest('li'); //no need to operate directly on img imo
$el.animate({
opacity: 0 //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
$el.remove();
});
Fiddled

I think what you want is to...
$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
$(this).remove();
});
Here is the fiddle http://jsfiddle.net/MT5xS/4/

Try this it will slide up and then remove
$('.user-pic').live('click', function() {
$(this).closest('li').slideUp('slow', function() {
$(this).remove();
});
});​

Set height as auto on expanding DIV with jQuery

I am trying to set the height of a DIV to auto when I expand it, but when ever I do just '' it shrinks it down, or when I do 'auto' it does nothing. How do I get it to change the height to auto? I have content that will be all different heights and dont want to have to pass in a height parameter every time I set one of these up .This is what I have that is not working properly. The DIV will start out at a static height then needs to expand to expose all of the text in the DIV.
My jsFiddle:
http://jsfiddle.net/gNsrG/
This is my jQuery code:
function changeheight(_this) {
var thisText = $(_this).text() ;
if (thisText == 'more') {
$('#overviewtext').animate({
'height': ''
}, 600);
$(_this).text((thisText == 'more') ? 'less' : 'more');
}
else if (thisText == 'less') {
$('#overviewtext').animate({
'height': '150px'
}, 600);
$(_this).text((thisText == 'more') ? 'less' : 'more');
}
return false;
};

You shouldn't have to change the height ever. You should just be using JQuery's slidedown and slideup
I've made some changes to you example on jsfiddle
EDIT
I misunderstood what the question was. You want some text to show then you click more and more text shows. Then click less and less text shows. I've accomplished this but it is a bit hacky. Apparently JQuery doesn't do well with animating auto and percentages. Basically is what I did is when you click more. I stored the current height. Temporarily changed it to auto which makes it fully open. Got that height. Changed it back to closed (Hopefully the user doesn't see this). Then took that height and used it for the animate. I'm hoping there is an easier way but right now I can't find it.
My example is here jsfiddle
The only other way I can think of to accomplish this is to have an inner div that contains all the "MORE" text that you slidedown and slideup on but you would have to be able to differentiate where the cutoff was for the more text.

Improved code:
function changeheight(_this) {
$('#overviewtext').slideToggle(600);
$(_this).text($(_this).text() == 'more' ? 'less' : 'more');
return false;
};
Demo here http://jsfiddle.net/gNsrG/3/

you can change an element's css using .css(), in this case it would look like
$('#overviewtext').css('height', 'auto');
you might try adding that line after the animate call.

I had a similar problem and my solution was to use JqueryUI which animate classes on toggle when clicking in the actual text
jQuery ("#box_description_texts p").click(function() {
jQuery(this).toggleClass("box_text_expanded", 250);
});
and in the CSS
#box_description_texts p.box_text_expanded {height: auto;}