Develop Reference

jQuery hoverintent creating and removing element

I have a script that animates my menu ul element on hover. It also creates a background element for the ul. I have made this script:
jQuery(document).ready(function($) {
$(".main-navigation ul:first > li").hoverIntent({
sensitivity: 1,
interval: 100,
timeout: 400,
over: function() {
if ($(this).children().length > 1) {
$(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>');
$(this).children("ul").css({
"display" : "block",
"left" : "250px",
}).stop().animate({
top: '-50px',
opacity: 1,
}, 500)
}},
out: function() {
$(".sub-nav").remove();
$(this).children("ul").stop().animate({
"top" : "-500px",
"opacity": 0,
}, 500).css({
"display" : "none",
})
}
})
});
It works fine, but the problem occurs once I select another menu that is below that one. So, I have two menus with sub-menus. If I select separetly each one of them everything works fine, but if I select first one and then move to the other one the background elements (.sub-nav) doesn't appear.
What am I missing?
JS FIDDLE: http://jsfiddle.net/r8vx07ae/10/ (try moving your mouse from menu item#2 to menu-item#3)

I'm not sure if this is the right way to do it, but by meddling around I kinda achieved what I wanted. I did the following:
jQuery(document).ready(function($) {
$(".main-navigation ul:first li").hoverIntent({
sensitivity: 1,
interval: 100,
timeout: 400,
over: function() {
if ($(this).children().length > 1) {
$(this).parent().prepend('<div class="sub-nav" style="position: absolute; top: 0px; left: 250px; display: block; opacity: 1;"></div>');
$(this).children("ul").css({
"display" : "block",
"left" : "250px",
}).animate({
top: '-50px',
opacity: 1,
}, 500)
}}
})
.mouseleave(function() {
$(".sub-nav").remove()
$(this).children("ul").stop().animate({
"top" : "-500px",
"opacity": 0,
}, 500).css({
"display" : "none",
})
})
});
This solved my problem. It works just like I wanted.
JS Fiddle updated as well: http://jsfiddle.net/r8vx07ae/11/
Before selecting the answer I'd like to wait for anyone to maybe update it with a better more clean solution.

Stick the footer to the bottom of the page

I need to freeze the footer panel when it's parent div reaches the bottom of the browser.
What I have tried is to make it to freeze when I scroll the page but I need it when the parent parent div reaches the bottom of the browser.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content.
When this content expands the bottom_content div moves to the bottom, I need the footer div in it to stick to the bottom as soon as bottom_content is pushed down.
Here is my code currently used
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO

**Hope this is what ur trying to achieve...DEMO
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom:0, width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: $('.expandble_conetnt').offset().top, width: '100%' });
}
});

When scrolling page, fixed div doesn't work

I'm using this demo my project.
http://tympanus.net/Development/ArticleIntroEffects/index3.html
I want to do fixed menu after scrolling. And I use this js but it doesn't work.
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100)
$cache.css({'position': 'fixed', 'top': '10px', 'display': 'block'});
else
$cache.css({'position': 'relative', 'top': 'auto', 'display': 'none'});
}
$(window).scroll(fixDiv);
fixDiv();
How can i make ?

codrops-demos is a class, not an id, so you should use .codrops-demos rather than #codrops-demos.
Not sure that will be enough, though.

Is this what you are looking for?
http://jsfiddle.net/Pa36p/5/
JQuery (JS)
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100) $cache.css({
'position': 'fixed',
'top': '10px',
'display': 'block'
});
else $cache.css({
'position': 'relative',
'top': '110px'
});
}
$(window).scroll(fixDiv);
fixDiv();
You defined the display of the menu to none when the window scroll is less than 100px. So, the menu doesn't show up. If you are trying to do something like in the Codrops example, you should only fix the menu when the scrolling is bigger than the distance between the menu and the top of the screen.
Cleaning your code
Here is a simpler and more readable version of the code you did, leveraging the browser's javascript processing by using CSS.
http://jsfiddle.net/Pa36p/8/
JQuery (JS)
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100)
$cache.removeClass('relative').addClass('fixed');
else
$cache.removeClass('fixed').addClass('relative');
}
$(window).scroll(fixDiv);
fixDiv();
CSS
.fixed{
position: fixed;
top: 10px;
}
.relative{
position: relative;
top: 110px;
}

jQuery, shrink div width from left to right

As you can see there is a slide to the left and the with decreases from 100% to 0 at the same time.
I want to get this same effect but from left to right.
I can't get it right!
jQuery('#target').animate({ width: '0', left: '-25%' }, 1500, 'swing');
Example Fiddle: http://jsfiddle.net/RsBNk/

That is pretty simple. Align the image to the right and then decrease it by 25% using jQuery like below:
jQuery:
jQuery('#target').animate({ width: '0', right: '-25%' }, 1500, 'swing');
CSS:
.box {
width: 100%;
position: absolute;
top: 0;
right: 0; /* Modified this line */
height: 200px;
background-image: url('http://images.icnetwork.co.uk/upl/uxbridgegazette/jul2012/0/4/marc-mccarroll-image-2-304314157.jpg');
background-position: right; /* EDIT: This property needs to be set */
}
Updated Demo

May be this helps you
$('#target').animate({
width : '0',
marginLeft: parseInt($('#target').css('marginLeft'),10) == 0 ?
$('#target').outerWidth() : 0
}, 1500, 'swing');
check demo

Display title attribute of an image inside a DIV

This is the page I'm trying to do: Gallery
And what I'm trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.
I tried following the instructions here but for the second image the title didn't swap and it only showed the first one.
Also I'm a little bit confused where to add the fadein fadeout for the div...
Sorry for the noobish question, I'm still learning this.
Thank you.

I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.
The problem is here:
var titleString = $("#thumb").attr("title");
$("#title").html(titleString);
When you're telling it to switch the text, you're always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:
var titleString = $(this).find('a').attr("title");
This assumes that you'll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you'll have to go through and add them if this is the way you decide to go.

Change the following:
1.
#main_view{
background: #FFFFFF;
left: 45%;
margin-top: 128px;
padding: 0 0;
position: absolute;
}
title{
background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;
}
Remove the inline style for the div with title as ID.
in the hover function of ($("ul.thumb li").hover) add the below line
after - $(this).css({'z-index' : '10'});
var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);

The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.
$(document).ready(function(){
//Larger thumbnail preview
var $title = $('#title');
$("ul.thumb li, ul.thumb2 li").hover(
function() {
var $this = $(this);
$this.css({'z-index' : '10'});
$this.find('img').addClass("hover").stop()
.animate({
marginTop: '-50px',
marginLeft: '-50px',
top: '50%',
left: '50%',
width: '100px',
height: '100px',
padding: '0px'
}, 200);
$title.stop().animate({opacity:0.4}, 200, function(){
$title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
});
},
function() {
$this = $(this);
$this.css({'z-index' : '0'});
$this.find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '75px',
height: '75px',
padding: '0px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a, ul.thumb2 li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
http://jfcoder.com/test/hoverfade.html