Develop Reference

Menu staying fixed

I have a little function that makes my headerbar class fixed after i click on the menu button.
It works but when i click on the button again the headerbar stays fixed.
Here is my javascript:
// menu animation
$(window).load(function() {
$('.menuBtn').click(function(e) {
e.preventDefault();
(this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
$('nav').slideToggle();
});
});
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
This code makes the headerbar class fixed:
$('.menuBtn').click(function() {
$('nav').css('position', 'fixed');
$('.headerBarm').css('position', 'fixed');
});
So basically I want it to change back to normal when I click the button again.

Try this:
JavaScript
$(function () {
$('.menuBtn').click(function (e) {
e.preventDefault();
$(this).toggleClass('is-active').toggleClass('fixed-position');
$('.headerBarm').toggleClass('fixed-position');
$('nav').slideToggle();
});
});
CSS
.fixed-position {
position: fixed;
}

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?

You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>

You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.

Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

Why is removeclass not working when div is collapsed?

here is my fiddle
why when a div is clicked from another div does the arrow not appear back when the other div has collapsed? i have it set up so when the div does not have the class 'clicked' it then removes the class 'arrowhide' but it when you do the above it doesn't seem to remove the 'arrowhide' even though the div no longer has the class 'clicked' here is my code...
$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if ($('.selected').children().hasClass("clicked")) {
$('.details').addClass('show');
}
if ($('.timelineTile').hasClass("clicked")) {
$(this).children('.arrow').addClass('arrowhide');
} else {
$('.arrow').removeClass('arrowhide');
}
if ($('.selected').children().hasClass("clicked")) {
$(this).children('.header').height(430);
} else {
$('.header').height(80);
}
});
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
$('.arrow').removeClass('arrowhide');
});

Your line 4 also needs to remove the arrowhide class, like this:
$('.selected').children().not(this).removeClass('clicked')
.children('.arrow').removeClass('arrowhide');
Updated fiddle: http://jsfiddle.net/mcx0t0fh/2/
Alternatively, you could do away with the arrowhide business, and change your .arrow.arrowhide CSS rule to .clicked .arrow
Alternative fiddle: http://jsfiddle.net/mcx0t0fh/4/

alternatives to jquery animate?

On hover I want my div to scroll down.
I know i can use the .animate({left: 0}, "slow"); but this doesnt go down but what else does jquery have to offer?
Here is my jsfiddle: http://jsfiddle.net/WZvPk/4/
hover over the sectors box and you will see the "view project" move down. I need it to move down in a slow fashion similar to http://www.jeremymartin.name/examples/kwicks.php?example=3
Then need the opacity to be so my image is darker.
edit: slide down wont work with this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);

You probably want jQuery slideDown, see: http://api.jquery.com/slideDown/
Edit:
So something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.css("display", "block")
.css("margin-top", "-5px")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);
You could also, add a css class with the margin-top and display-block property, like:
.slideDown { display: block !important; margin-top: 5px !important; }
/* !important so they won't be overwritten..*/
Then you can do something like this:
$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage")
.children(".showme")
.addClass("slideDown")
.slideDown("slow");
},
function () {
$("div.sectorImage div.showme").hide();
}
);

What about css3 transitions? They are smooth and are starting to be widely supported.
Here's an example which doesn't use javascript at all.
Update : Another example that doesn't use opacity.

$(".sectorGrid").hover(
function () {
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, "slow");
},
function () {
$(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
}
);​

​Now it works
$(".sectorGrid").hover(
function () {
$(".showme").css("margin-top", "-25px");
$(this).children(".sectorImage").children(".showme").css("display", "block").animate({"margin-top": "-5px"}, 'slow');
},
function(){
$(".showme").css("display", "none")
}
);
​
​

jQuery fadeOut() only if mouse leaves the shown element

Here's the code:
var HoverMenuOptions = {
show: function() {
$("#UserHoverMenu").css({"display": "block"});
},
hide: function() {
$("#UserHoverMenu").delay(2000).fadeOut(function() {
$(this).css({"display": "none"});
});
}
};
I want the div #UserHoverMenu to fadeOut if mouse leaves either the link triggering show() or #UserHoverMenu.
I have tried with:
$('#UserProfileName a').click(function() {
HoverMenuOptions.show();
});
$('#UserProfileName a, #UserHoverMenu').mouseleave(function() {
HoverMenuOptions.hide();
});
But hide is still triggered if mouse leaves #UserProfileName a and then into another div called #UserHoverMenu... How can I break the triggered fadeOut() when I enter #UserHoverMenu with the cursor?

$('#UserHoverMenu').mouseenter(function(e){
$(this).stop(true,true).css({"display": "block"});
});