Develop Reference

Scroll bar not scrolling after active div is closed

I have a fixed menu system that slides out and covers 100% of the screen once it is pressed. When it is active the the main scrollbar you will have the ability to scroll through the menu in the active div. Once you close the menu the scrollbar will not allow me to scroll the whole site anymore, it will only scroll the length of the div the slides out.
How can I fix this issue? I need the scrollbar to control the menu once it is active, then have the ability to scroll the whole site once the menu is not active.
Here is my JS and the full code http://jsfiddle.net/8P9kh/8/
$(function(){
window.status=0;
$('#menu').click(function(){
if(window.status==0){
$('#slidingMenu').stop().animate({left:'0px'},500);
window.status=1;
$('body, html').css('overflow','hidden');
}
else{
$('#slidingMenu').stop().animate({left:'-100%'},500);
window.status=0;
$('body, html').css('overflow-y','scroll');
}
});
})
//Close menu when you click Footer
$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('').is('.open')) {
$('')
.removeClass('open')
.animate({
'bottom': "-=200"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('footer').slideUp(400);
}
});
$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=200"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#dropFooter').slideToggle(400);
}
}
});

Right now, you're setting the CSS overflow property to hidden when the menu shows up, but then setting overflow-x property to scroll, leaving the overflow property at hidden. Reset the overflow property back to auto:
$('body, html').css('overflow', 'auto');

mouseenter + mouseleave / hover on two different div

Hi ive got this piece of code to deal with mouseenter and leave on 2 superposed div
When a user mouseenter the main div the sub div is showed, and if the user get in the subdiv the subdiv must remain, but if the user get out the maindiv and is not in the subdiv the subdiv must be hidden, try with my jsfiddle http://jsfiddle.net/rgkcp/
but the timer is not run in my piece of code
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
$(this, subDiv).mouseleave(function () {
// this is not run
timer = setTimeout(function () {
$(this).find(".mupHome").css("visibility", "hidden");
$(this).find(".mupHome").animate({
marginTop: '+23px'
})
}, 50);
});
$(this, subDiv).mouseenter(function () {
clearTimeout(timer);
});
});
And the html :
<div class="bulleHome ombreV">
<a href="http://preprod.mupiz.com/georges-barret" style="font-size:0.7em;text-decoration:none;" pid="13200">
<img src="http://www.mupiz.com/images/img-membres/images_4958C.jpg" alt="Georges profil" height="100px"><br>
</a>
<div class="mupHome" style="visibility: visible; margin-top: -23px;">
<img src="http://www.mupiz.com/images/mupitR.png" alt="Mup It!" id="bouton-ajout-ami13200" onclick="alert('ok')" style="cursor: pointer;"><span class="tMupHome">Mup it!</span>
</div>
</div>
And the linked css :
.mupHome{position:absolute;color:#fff;background: rgb(0, 0, 0) transparent;background: rgba(0, 0, 0, 0.8);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";width:100px;visibility:hidden;height:19px;}
.tMupHome{position:relative;top:-8px;left:5px}
Any ideas ?
Js Fiddle : http://jsfiddle.net/rgkcp/
Thanks!

I suggest you to create a var X and set it to false. Then if your mouse go over the SubDiv , you set it to true :
$(".mupHome").mouseenter(function () {
ondiv = true;
});
After this, you just have to verify if the var X is set to true when you leave the first div, if yes, you do nothing. if it still set to false, you hide the SubDiv :
$(this, subDiv).mouseleave(function () {
if(ondiv === false)
{
$(".mupHome").animate({
marginTop: '23px'
},function() {
$(".mupHome").css("visibility", "hidden");
});
}
});
Here's the jsFiddle.

I am guessing that you want the div to move back out of the way and disappear when the mouse leaves the sub div. If that is the case this should work fine. If it is not we could definitely use some clarification. You were changing the visibility before the animation, so the animation would not be visible. There were a couple missing quotes in the fiddle as well.
$(".bulleHome").each(function () {
var subDiv = $(this).find(".mupHome");
$(this).mouseenter(function () {
$(this).find(".mupHome").css("visibility", "visible");
$(this).find(".mupHome").animate({
marginTop: '-23px'
});
});
});
// Added Code
$('div.mupHome').on({
mouseleave: function() {
$(this).animate({marginTop: '+0px'}, 1000, function(){$(this).css('visibility', 'hidden');});}
});
Also on the mupHome div the style was not closed out correctly, not sure if this is true in your real code or not
<div class="mupHome" style="visibility: visible;>
Should be
<div class="mupHome" style="visibility: visible;">

Modifying close buttons in Javascript animated panels

I am using the following javascript to slide open panels to the right when links are clicked.
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
$('.close').click(function(){
$(this).closest('.panel').animate({
left: -200
}, 500);
});
});
When a close button is clicked the panel is closed.
What I need is that when a close button is clicked, the 'ACTIVE' class is removed from the panel. And IF possible, the anchor is removed.
This is because if the user clicks on the same panel link again it won't open.
See this jsfiddle
Thanks

Just add .removeClass('active') to your close function, see http://jsfiddle.net/RZpbK/479/
$('.close').click(function(){
$(this).closest('.panel').animate({
left: -200
}, 500).removeClass('active');
});
As I see it then the function works as expected, but I cant understand why you would want to remove the anchor? Then it cant be closed the next time you open it?

Animate and image up and down in jQuery

I'm trying to animate and image up and then down with jQuery.
It should behave like this:
When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.
html
<div id="slidebottom" class="slide">
<div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
</div>
jQuery
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
});
});
How can I reverse the animation after click two? At the moment every time I click, the container moves up.

You can try using the .toggle() method, which takes two functions and alternates between executing each one of them on click:
$(document).ready(function(){
$('.try').toggle(function() {
$(".inner").animate({top: '-=100px'}, 2000);
}, function() {
$(".inner").animate({top: '+=100px'}, 2000);
});
});
However, I personally would use a class and CSS3 Transitions.

Try this example. Also note that in order to use the top css property you should either position: relatve; or position: absolute the .inner div.
var clicked = false
$('.try').click(function () {
if (clicked == true) {
$(".inner").animate({
top: '0px'
}, 2000);
clicked = false;
} else {
$(".inner").animate({
top: '-100px'
}, 2000);
clicked = true;
}
});​

Just put another code line underneath the first and it will animate them in order
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
$(".inner").animate({
top: '+=100px'
}, 2000);
});
});

jQuery .animate() sets display:none, how to avoid?

I have the following code:
HTML:
<div id="clickme">
Click me :-)
</div>
<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;">
Stay, damn!
</div>
JavaScript:
$('#clickme').click(function() {
$('#info').animate({
marginBottom: 'toggle'
},{
duration:500
});
});
It's also available at http://jsfiddle.net/DxnQJ/
Obviously, I want the #info DIV to appear/disappear whenever the #clickme DIV is clicked. It's working as intended, except that the #info DIV disappears after the animation due to jQuery setting its CSS display property to none.
How can I tell jQuery to stop hiding my DIV?

I would recommend using .slideToggle:
$('#clickme').click(function() {
$('#info').slideToggle(500);
});
Demo: http://jsfiddle.net/Daniel_Hug/DxnQJ/2

javascript code
$('#clickme').toggle(
function () {
$('#info').animate({
height:"0px"
}, 500);
},
function () {
$('#info').animate({
height:"100px"
}, 500);
});
http://jsfiddle.net/amkrtchyan/zymUK/2/

Replacing your click function with this works:
$('#clickme').click(function() {
var whichSetting = $('#info').css('marginBottom');
if(whichSetting == '-100px') {
whichSetting = '0px';
}
else {
whichSetting = '-100px';
}
$('#info').animate({
marginBottom: whichSetting
},{
duration:500
});
});