We Keep Coding

How to adjust div location on animate

In a webapplication I'm working on, when you click on a listitem, a div pops out.
You can find an example here.
How can I adjust the top of the div to the listitem?
The div (#home in the example) has to pop out with the top next to the list item.
$(function () {
$("#home_link").click(function () {
$("#home").animate({width: 'toggle'}, 500);
});
});
$(function () {
$("#edit_link").click(function () {
$("#home").animate({width: 'toggle'}, 500);
});
});

So, I cleaned up some of it and reorganized it. Basically, I marked a container element (which holds both the navs and the content), and use that to determine the desired offset. I made everything more generic so you can just add more hyperlinks as you need! Hopefully this is helpful, let me know if you have any questions about why I did things this way, or how something works.
jsFiddle
$(function () {
$("#list a").click(function () {
var $this = $(this);
var $container = $this.closest('[data-id="container"]');
var $target = $($this.attr('href'));
$target.css('margin-top', $this.offset().top - $container.offset().top);
$target.animate({width: 'toggle'}, 500);
});
});

.slideDown() not working

This should be easy but I checked on google and did not find any info on this.
I am doing:
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
However it is not sliding down. It is getting displayed without any animation. No error either.
.slideUp() is working properly.
What am I doing wrong here?
jsFiddle

Change
$notification.slideDown(1000, function () {
$('#notifications').append($notification);
});
to
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
The reason why slideDown doesn't work is because the element is visible when you are appending it
DEMO
Also note that when you slideUp the notification you should remove it because otherwise you'll have multiple notifications just taking up place
$closeButton.click(function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
});

You had two minor issues, first your .notification element needs to be hidden to be able to slideDown().
.notification{
display: none;
}
Secondly, you were trying to animate in an element that doesn't exist until the animation is complete :)
$notification.slideDown(1000, function(){
$('#notifications').append($notification);
});
Updated script below. PS: Don't forget to add the CSS snipplet.
$(document).ready(function(){
CKEDITOR.replace( 'description' );
$('#title').focus();
$('form').submit(function(event){
event.preventDefault();
var html=CKEDITOR.instances.description.getSnapshot();
var $closeButton = $('<img class="closeButton" src="http://www.tunesdiary.com/static/images/icon_grey_cross.gif">');
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').html(html);
var $notification = $('<div></div>').append($closeButton).append($title).append($description).addClass('notification');
$('#notifications').append($notification);
$notification.slideDown(1000);
$closeButton.click(function(){
$(this).parent().slideUp();
});
});
});

slideDown documentation says:
$notification.slideDown(1000, function(){});
here function executes on sliding complete. So you need to append hidden element then slidDown to show.
$('#notifications').append($notification.hide());
$notification.slideDown(1000);
Here is demo

jQuery mouseenter and mouseleave events fire out of control

I'm using this piece of code to populate a div with the contents of a hovered element.
$('.gallery .thumbs a').hover(
function(){
var target = $(this);
$('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
$('.hover-box').css({'display':'block', 'top':top, 'left':left});
},
function(){
$('.hover-box').hide();
}
);
The problem is - what many seem to have had - that after adding the 'mouseleave' handler both the events start firing uncontrollably.
I know the bubbling issues related with mouseover/out but this seems to behave the same.
Anyone have an idea why this is happening?
EDIT:
Here's the deal on fiddle. Not the prettiest sight but function the same as my problem.
FIDDLE

It's because your function fires and re-fires each hover and at the end of each hover, so any time you move the mouse it fires twice. What you want to do instead is fire it on mouseenter of .thumbs a and mouseleave of .hover-box, like this
jQuery(function () {
jQuery('.thumbs a').hover(
function () {
var target = $(this);
jQuery('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
jQuery('.hover-box').css({
'display': 'block',
'top': top,
'left': left
});
});
$('.hover-box').mouseleave(function() {
$('.hover-box').hide();
});
});

jQuery fadeIn 'slow' immediately appearing

I'm trying to make it so that when you click a link, it removes a div (with some paragraphs and text) and inserts another div (with some paragraphs and some text). I'm using jQuery to fade those in and out. The fading out of the original div works when you click the link, and then I have a switch case to determine what gets faded in. However, the fadeIn, set to 'slow', appears to be occurring immediately.
Here's the relevant piece of code (the rest is just other cases):
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('fast');
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
Edit:
So after changing fadeTo to fadeOut, and changing "slow" in the fadeOut to "fast", it worked well and transition the way I want. However, whenever I click "home" now it will move the div to a "block" position, (it spits it to the lower left corner) before shoving itself back into the right spot in the center of my container. It ONLY does this when I click home and no other of my sidenav links...which are all running the exact same code (home just is the first one in the switch case). Any ideas?

If you want the fadeIn to start after the fadeTo has completed, you'll want to use a callback function. Also, since you're fading to 0 opacity, just use fadeOut:
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('slow', function() {
// this code will begin once fadeTo has finished
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
});
});

Without seeing your HTML, it's a little difficult to understand the exact outcome you're trying to achieve, but here is a JSfiddle with your code above.
http://jsfiddle.net/W9d6t/
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
//$('.content').fadeTo('slow', 0);
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "block");
alert('All done!');
});
}
});

From my understanding of what you are trying to do, I believe you simply need to do this:
$('#home-content').fadeIn('slow');
(the fadeIn function automatically sets the display property to inline/block)
Also, while your implementation correct, it's simpler to do:
$('.content').fadeOut('slow');
(simplified jsFiddle)

You just need to add a callback to fadeOut so that it executes after the animation is done:
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('slow', function() {
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
});

JQuery drop down, remain down while hover over drop down

I setup a jquery dropdown menu that works perfect. It drops down when a user rolls over a link. The problem is that when the user rolls over the content area of the drop down menu, it slides back up. I need to set up the code so that the slidedown box remains in the down position while the user's cursor is still over it.
Here is my HTML:
<ul id="tabnav">
<li class="tab2">My Leases</li>
</ul>
<div id="leases">
<!-- slide down content here -->
</div>
JS Trigger:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").hover(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
return false;
});
});
</script>
Any ideas?
EDIT: Here is a link to page in question: http://designvillain.com/testbed/600/601.html

I'm not sure if this is what you want, but I'll just drop it here. It waits 500ms before sliding up #leases, and only when appropriate
var isMousedOver;
var hideDropdown = function(a) {
setTimeout( function() {
if (isMousedOver) return;
$("#leases").slideUp("medium");
$(a).removeClass("active");
}, 500);
}
$(".btn-slide").hover(
function(){
$("#leases").stop(true,true).slideDown("medium");
isMousedOver = true;
$(".btn-slide").removeClass("active");
$(this).addClass("active");
var that = this;
$("#leases").data("mouseoutfn", function() { hideDropdown(that) });
},
function(){
isMousedOver = false;
hideDropdown(this);
}
);
$("#leases").hover(
function() {
isMousedOver = true;
},
function() {
isMousedOver = false;
$(this).data("mouseoutfn")();
}
);
Here's a demo: http://jsfiddle.net/mMRZc/

The .hover() binds two events, mouseenter and mouseleave.
I would instead go granular and use the mouseenter() on the .btn-slide and the mouseleave() on the .leases
$(function()
{
$(".btn-slide").mouseenter(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
});
$("#leases").mouseleave(function(){
$(".btn-slide").toggleClass("active");
$(this).slideToggle("medium");
});
});
EDIT: Note, if the mouse never enters the #leases div, it will not get the mouseleave, and you may need to consider that.
EDIT2: fix my bad finger typing of funciton to function

I assume the div is hidden on page load and you want it to show when you hover over the link? Change toggle to down...
$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
$("#leases").slideDown("medium");
$(this).toggleClass("active");
return false;
});
});
Does it need to slide back up sometime?