Develop Reference

Adding animate in and animate out classes with one menu button

I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.

May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.

http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold

Jquery scroll function for nested <div>

I'm trying to make a nav that scrolls to a corresponding <div> for my site. The corresponding divs are nested inside another div with a max-height and scrollbar. That's when my jquery tends to fail me.
He's a fiddle from another question that I related to my problem: JSFIDDLE
Notice when you click the button, it doesn't scroll to the correct div, and it scrolls to an awkward position when clicked again.
How do I get it to scroll to the correct div and not strangely scroll back when it is clicked again? Thanks!

$(".third").offset().top) alternates coordinates between 1108 and 0 when clicked. These are the correct positions of .third before each click. You have to take into account the current scroll position and the position of the .first div.
Replace the scrollTop line of code with the following:
scrollTop: $(".third").position().top - $('div.nest').position().top + $('div.nest').scrollTop()},
http://jsfiddle.net/pyL62v58/3/

The Code works, it seems to be a padding/margin issue.
Just add this line in the css, and it should work:
* {paddin:0;margin:0}
/* tested on Chrome 39+ on Win7 */
here the Updated fiddle
Why it jumps up again, is hopefully clear. Documentation to the "offset" function can be found here: jQuery-Doc

Using Javascript to toggle an overlay on and off

I have a div called "navbar_menu". When clicked I want the div "nav_overlay" to fade in and then when clicked again, I want it to fade back to not being visible.
At the moment I have set the div 'nav_overlay" to 'display: none' and then using the following javascript, it shows itself when "navbar_menu" is clicked.
$(document).ready(function(){
$(".navbar_menu").click(function(){
$("nav ul").toggleClass("showing");
$("#nav_overlay").fadeTo("fast", 0.8);
});
});
The tag "nav ul" is just a menu that is sliding when "navbar_menu" is clicked. The point is to have an overlay covering the content when the menu slides out and then when the menu slides in again, the overlay disappears.
I'm thinking that I need an if statement testing whether the div is visible or not? I'm just wonering if there is anyone who can help with the best solution for this.
Thanks very much.

Something like this should work:
$("#nav_overlay").fadeToggle()
See the documentation for the options.
PS: I assuming that the overlay has necessary styles to cover the whole page with position: fixed or something.

if( $('#your-element').is(":visible") ){
// #your-element is visible.
} else {
// #your-element is not visible
}
That should test if something is visible or not but a link or jsfiddle to your html as well would be helpful.

Assuming CSS class 'showing' only makes the element appear. You can use the .toggle function to make it hide and reappear on its own.
http://api.jquery.com/toggle/
http://api.jquery.com/fadetoggle/
// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");

White div footer on page extend , how to?

I'm trying to make a white div that extends from point (A) to point (B) on the page as shown in the photo. I want it so that when the page is extended the white takes up from pooint (A) all the way down to the end of browser so that no bg grey is shown underneath, even when page extended from below.

If you're talkinng about making the footer stick to the bottom of the page, Ryan Fait has a well known solution to this that you can find here:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Basically how it works is you position the footer absolutely and put it at the bottom, and add a "push" element to the bottom of the page to make sure that the footer doesn't go ontop of the content.

if youre looking for the sticky footer, kpsuperplane's answer wouuld be it
But seems to me that you want to have a DIV that is bellow your content, and stretching to the bottom of your browser?.
If this is the case check this example I made really quick where I'm stretching
the bottom div to fill that area which is the result of the browsers height - the top area. Gets executed every time you resize.
http://jsfiddle.net/99FpT/
js
$(function() {
function stretch(){
$(".area2").css({"height" : $(window).height() - $(".area1").height() });
}
$(window).on("resize", function(){
stretch();
});
stretch();
});

jQuery slide down toggle, impossible?

I want to do a slide down with jQuery, but I can't find it anywhere.
I do not want it to scale as it slides
I do want it to perform this action ( click slide ), but vertically down, not horizontally right.
UPDATE :
So here's the final functional code!
$(this).toggle(
"slide",
{
direction: 'up',
duration: 'slow',
easing: 'easeOutQuart'
}
);

Read the API-Docs: http://docs.jquery.com/UI/Effects/Slide
You can Slide in every direction using the direction-option.
Demo: http://www.jsfiddle.net/doktormolle/befbE/
(I set the width/height of the image inside the sliding element to 100%, so you can see, the image is not scaled, it's clipped, guess that's what you are looking for)

If you position the element absolutely in a container and attach it to the bottom (ie. position:absolute;bottom:0;) you can use the blind effect and it will slide down to the bottom from the top. See here

If you want it the make own ur you, can you use .animate() and you using css.
something like:
css:
#elm { width: 150px; height: 80px; position: absolute; left: -150px; }
script:
// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');
else if you dont wanna make it on your own, use that jQuery UI 'slide' effect?

I know what you mean - the items inside the DIV or whatever you are animating look like they are squahsed, and then expand.
Maybe consider hiding the element behind another and either move the masking element up and out of the way or slide the hidden element down using .animate()?
jQuery .click .animate to move down, then back up
This may help.

You can easily achieve this with an inner container that has fixed dimentions.
See this live example. In the fiddle, the first div is without the inner container.
This way when the outer container animates (width/height) the inner container does not grow, simply reveals.

Consider your image of height 150px
First apply height="0"
Use animate to achieve slide down effect
<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />
<script>
$(document).ready(function(){
$("#image_scale").animate({height:"150px"},"5000");
});
</script>

Absolutely position the element you are wanting to slide in and out and use .animate() to change it's position. You can have it slide in from the top, bottom, left, right, on the diagonal or however you want with this method.