We Keep Coding

Using localStorage() to save a "closed" state on modal so it doesn't show for that user again

I have a pop-over modal that I am loading on my page on load, I would like to make it once it's closed to not show up again for that user. I've done similar things with localStorage(); but for some reason can't figure out the syntax to make this work.
I tried a solution where it sets a class, but on refresh it will reload the original element, so now I am trying this idea where I change the state of of the modal to "visited". Any ideas what I could be missing to get this to work in the same way I'm hoping?
localStorage function:
$(function() {
if (localStorage) {
if (!localStorage.getItem('visited')) {
$('.projects-takeover').show();
}
} else {
$('.projects-takeover').show();
}
$('.projects-close').click(function() {
$('.projects-takeover').fadeOut();
});
localStorage.setItem('visited', true);
return false;
});
Here is a jsfiddle with the code implemented as well, thanks for the help!

You javascript code is correct. Good thing you added a jsfiddle as the problem becomes very easy to identify - the modal's style is set in such a way that it is always visible. Simply change the display property to nonе in the .projects-takeover class and it should work. Check out the updated fiddle

Try this ->
$(function() {
var pt = $('.projects-takeover'); //i just hate repeating myself.
if (localStorage) {
if (!localStorage.getItem('visited')) {
pt.show();
} else {
pt.hide(); //this bit was missing
}
} else {
pt.show();
}
$('.projects-close').click(function() {
pt.fadeOut();
});
localStorage.setItem('visited', true);
return false;
});

Avoid giant cascading in jQuery?

I feel like this is something that is solved by "deferreds" or "promises" that I've heard about in jQuery, but looking searching for related articles on that doesn't exactly show me what I'm looking for.
I want to be able to do a simple jquery function call (like animate() or slideUp()) then call another simple function when it is completed. Of course I know about slideUp(400, function(){ //onComplete... }); but if you have a large cascade of animations, that can get pretty hairy pretty quickly.
Check out the following jsfiddle:
http://jsfiddle.net/ue3daeab/
When you click the first button, you see the visual effect I want to acheive. However, I'm accomplishing it with "cascade hell," and the relevant code being:
$("#clickme").click(function(){
//Cascade hell
$("#my1").slideUp(400, function(){
$("#my2").slideUp(400, function(){
$("#my3").slideUp(400, function(){
$("#my4").slideUp(400, function(){
$("#my5").slideUp(400, function(){
$("#my6").slideUp(400, function(){
$("#my7").slideUp(400, function(){
$("#my8").slideUp(400, function(){
$("#my9").slideUp(400, function(){
$("#my10").slideUp(400);
});
});
});
});
});
});
});
});
});
});
When you click button 2, all the divs collapse at once, which isn't the effect I want. I feel like I should be able to do something like this, but obviously it doesn't work. The relevant code for the 2nd button is:
$.when($("#my1").slideUp())
.done($("#my2").slideUp())
.done($("#my3").slideUp())
.done($("#my4").slideUp())
.done($("#my5").slideUp())
.done($("#my6").slideUp())
.done($("#my7").slideUp())
.done($("#my8").slideUp())
.done($("#my9").slideUp())
.done($("#my10").slideUp());
Any advice? Thanks.

Why not use a simple array of ids to collapse, and then collapse them one item at a time?
$("#clickme").click(function(){
var toCollapse = ["#my1", "#my2", ...];
(function collapse(){
var id = toCollapse.shift();
if (!id) return;
$(id).slideUp(400, collapse);
})();
});
I edited your jsfiddle with this example too: http://jsfiddle.net/ue3daeab/2/

I would do something like this:
UNTESTED
$.each($('.item', '#container'), function(index, value) {
$(this).delay(50*index).slideUp(400);
});
This way everything doesn't try to happen all at once.

Jquery Toggle & Offclick

I'm kind of a newbie when it comes to jquery so I wondered if someone could help me.
I've made a toggle function. When you click on the user_button the user_info shows, when you offclick the user_info disapears. But now I want to let the user_info disapear also when you click again on user_info (so when it is open it closes).
This is the jquery I have. Thanks in advance!
$(document).ready(function(){
$("#user_button").click(function(){
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
$("#user_box").hide();
});
});

Could you post a testable example on for example jsfiddle.net? This allows other to "play" with the actual code.
Try to take look at methods suchas show, hide, toggle toggleClass etc.

Take your code => http://jsfiddle.net/3Nxz2/3/
$(document).ready(function(){
$("#user_button").click(function(){
//alert("click");
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
//return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
//$("#user_box").hide();
});
});

Toggle/Show one defined DIV with JS

I have a fiddle for you: http://jsfiddle.net/vSs4f/
I want to show the div.sub-menu with a simple click on a.haschildren. If the body loads the div.sub-menu should be closed. If I click a second time on a.haschildren the div.sub-menu should be close.
I have sampled so many things but I think the problems are the lot of DIV's. One idea is in the fiddle.
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
$('div.sub-menu:visible').hide();
$(this).next('div.sub-menu').show();
});
});
I really hope you can help me, thanks!

Try this:-
Fiddle
$(function () {
$("a.haschildren").click(function (e) {
e.preventDefault();
var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle();
$('div.sub-menu:visible').not(subMenu).hide();
});
});
Using .nextUntil to reach a point till the .sub-menu, incase any other siblings come in between this will still work.

Personally there are MANY things I would have changed about the structure of your DOM. I am a strong believer that you should base your javascript structure around a well structured DOM, so the traversal is very easy and intuitive. That being said, I'm going to be slightly daring by submitting my fiddle, in the hope that if nothing else, you can look at it and gain a little insight on how to take advantage of a few DOM quirks to make your javascript a bit more intuitive and elegant.
http://jsfiddle.net/vSs4f/6/
$(function() {
$('#menu > div.item')
.find('a').click(function() {
var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu');
// This chunk can disappear if you're not interested in hiding all of the other sub-menus
$('.sub-menu').filter(function(index) {
if(index != submenu_index)
return true;
}).hide();
}).end()
.find('div:first').after('<div class="trenner"></div>');
});

Try
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle();
$('div.sub-menu:visible').not(item).hide();
});
});
Demo: Fiddle

just use toggle()
$('div.sub-menu').toggle();

Ironically enough, the method you're looking for is .toggle();
http://api.jquery.com/toggle/

try it:
$(function() {
$("div.haschildren").click(function() {
if($(this).next().next('div.sub-menu').is(":hidden")){
$('div.sub-menu:visible').hide();
$(this).next().next('div.sub-menu').show();
}else{
$(this).next().next('div.sub-menu').hide();
}
return false;
});
});

Filtering Content using jQuery

I'm attempting to create a filterable photo gallery using jQuery and multiple classes. I have some code set up, but it doesn't seem to work. Can anybody give me any insight on how to fix this function?
$(document).ready(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images'){
$('#photorow1 li').show().removeClass('hidden');
}
else {
$('#photorow1 li').filter(sortName).show().removeClass('hidden')
.end().not(sortName).hide().addClass('hidden');
}
e.preventDefault();
});
});
Any help would be greatly appreciated!!
*updated code

The problem is you're doing a return false before any work is being done, move that to the end of your click handler :)
Overall you can clean it up a bit, something like this should do:
$(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images') {
$('#photorow1 li').show();
} else {
$('#photorow1 li').filter(filterVal).show().removeClass('hidden')
.end().not(filterVal).hide().addClass('hidden');
}
e.preventDefault();
});
});
I recommend that you just add display: none; to the .hidden CSS rules (if you need that class for something else), otherwise just .hide()/.show() works.

For starters, return false; should be at the end of the function, because any code that comes after it in that function will be ignored.
Plus, you don't need that and e.preventDefault(); in the same function, they overlap a bit. You can read more about their similarities here. Pick one.