We Keep Coding

Body hasclass doesn´t work

so my code which should add a class to an element if the body has a certain class doesnt work. It looks like this:
if ($("body").hasClass("shifter-open")) {
$(".scrollheader").addClass("hovered");
}
I think its because a Jquery code adds this class (shifter-open) to the body with this code:
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() {
$("body").toggleClass("shifter-open", 1000);
});
});
Is there a way to make my code work? and maybe combine these 2 codes into one?

Your conditional :
if ($("body").hasClass("shifter-open")) {
$(".scrollheader").addClass("hovered");
}
Is only going to be evaluated once unless you have a timeout or interval polling it. A better solution might be to combine those two sections into one. Such as:
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() {
$("body").toggleClass("shifter-open", 1000);
$(".scrollheader").toggleClass("hovered");
});
});
Or something like that. You might also want to check the documentation for toggleClass because it doesn't appear to take an integer as a second parameter

Assuming you want to remove the class as well, just imitate exactly what the body is doing. You can toggle the class hovered on your .scrollheader just as the body is toggling its shift-open class.
$( document ).ready(function() {
$("body").addClass("shifter shifter-active");
$('.shifter-handle').click( function() { //When shifter-handle is clicked
$("body").toggleClass("shifter-open"); //Toggle "shifter-open" on the body
$(".scrollheader").toggleClass("hovered"); //Toggle "hovered" on .scrollheader
});
});
Additionally, the second parameter of toggleClass() takes a boolean that determines if the toggle should activate. Your second parameter of 1000 is permanently truthy, so there is no reason at all to include it.

jQuery - wait untill all elements are faded out

I have the following problem: I want something to happen after two elements have been faded out. They are supposed to fade out at the same time:
$("#publish-left, #publish-right, #print-run").fadeOut(function(){
//do something
});
However this doesn't seem to do what I want. How do I get my script to fade out two elements and then do something?
Edit: I just noticed there is something special about what I want to do. I don't always know if all elements are visible. So sometimes not all elements will be faded out, only some. However since some elements are already faded out, this will cause the function to trigger immediately I believe.

http://jsfiddle.net/k6yg319o/
Try the example, it should work. Just make sure the DOM is ready!
$(function() {
$('#test1, #test2, #test3').fadeOut(function() {
$('#test3').show();
})
});

you can use callback function,
$("#publish-left, #publish-right").fadeOut("slow", function(){
//call back function executes are faded out
//do something
});

Check the docs for fadeOut.
.fadeOut( [duration ] [, complete ] )
First parameter takes a duration, second is a callback function to execute after fadeOut is complete.
$("#publish-left, #publish-right").fadeOut(1000, function() {
document.body.style.backgroundColor = 'blue'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="publish-left">Left</div>
<div id="publish-left">Right</div>
Fade out both elements, then turn blue.

You could just run the first fade without the callback and run the second one with the callback if they are both fading at the same speed.
Here's a fiddle.
$("#publish-left").fadeOut();
$("#publish-right").fadeOut(function () {
alert("both fades finished since both fade at the same rate.");
});
Or if you want to use separate speeds you could flip a switch when each one is finished and then run the callback when the second one finishes.
Here's a fiddle.
var faded1 = false;
var faded2 = false;
var callback = function(){ alert("both fades finished"); };
$("#publish-left").fadeOut(function(){
faded1 = true;
if(faded1 && faded2) callback();
});
$("#publish-right").fadeOut(function(){
faded2 = true;
if(faded1 && faded2) callback();
});
Edit..
after reading your comment..
Or if one of them may already be hidden, you could just check to see if they're both hidden in your callback function..
Here's another fiddle
var callback = function(){
// If either element is still visible, don't do anything.
if($("#publish-left").is(":visible") || $("#publish-right").is(":visible")) return;
// Otherwise, do something
alert("both are hidden now");
};
// let's hide the first one right away for testing
$("#publish-right").hide();
$("#publish-left").fadeOut(callback);
$("#publish-right").fadeOut(callback);

how to fire a jquery child function at the start of parent animation

I'm coding a button that has a CSS arrow which flips up and down every time it's container is clicked.
It looks fine, but i can't figure out how to fire the toggleClass function as soon as slideToggle has been clicked.
The arrow looks like it is lagging a little because it waits a fraction of a second until the end of the slideToggle animation.
Is it possible to make the toggleClass fire at the start of the animation rather than the end?
$("#content_link").click(function(){
$("#content").slideToggle("fast",function(){
$("div#arrow_container").toggleClass('arrow_down');
$("div#arrow_container").toggleClass('arrow_up');
});
});

not sure if this is what you are asking for but yes call it before the slideToggle() function and not inside its callback function
$("#content_link").click(function(){
$("div#arrow_container").toggleClass('arrow_down')
.toggleClass('arrow_up');
$("#content").slideToggle("fast");
});

Remove that code from the call back and add it after the slideToggle function call like this
$("#content_link").click(function(){
$("#content").slideToggle("fast");
$("div#arrow_container").toggleClass('arrow_down');
$("div#arrow_container").toggleClass('arrow_up');
});

You can set a start callback as well:
$("header#tag_cat1 div#cat1_content_link").click(function(){
$("#tag_cat1_content").slideToggle({
duration: "fast",
complete: function(){
$("section.category header > div#cat1_content_link > div").toggleClass('gt_arrow_down_5px');
$("section.category header > div#cat1_content_link > div").toggleClass('bt_arrow_up_5px');
},
start: function() {...}
});
});
Take a look at the second form of .slideToggle()

Checking for visibility of a toggled element

I have a button which toggles the visibility of a <div> below it and want to modify the text on the button depending on the visibility of said <div>.
Here is a live demo on jsFiddle
If you click on "Saved Data", the first time it works correctly, but the next time you click the text does not change. This in itself is behaviour that I don't understand.
Now, I could use multiple handlers for slideToggle(), however, elsewhere in the code I also set intervals which load data next to "Cookie data:" and "Server data:". I don't want these intervals to do anything if the <div> is not visible so I use something like this:
this.timer_cookiedata = setInterval(function(){
if (!$savedData.is(':visible'))
{
return null;
}
// ..
});
I'm worried these intervals are not going to work properly because of this is(':visible') business. So the question is, why does this happen (else statement is ignored), and what can I do to mitigate this?

Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:
$(function () {
var $savedData = $('#savedData');
$('#btn-savedData')
.click(function () {
var $button = jQuery(this);
//I'm checking the visibility in the callback. Inside the callback,
//I can be sure that the animation has completed and the visibility
//has been updated.
$savedData.slideToggle('fast', function () {
if ($savedData.is(':visible')) {
$button.html('visible');
} else {
$button.html('not visible');
}
});
});
});​

Receiving a JavaScript error: "X is not function"

What I want to do is, to animate and hide some div, on closerlink button click, then hide this button. Function works but doesn't hide the closer_div and gives error message:
ftr_form_cntr.stop(true, true).animate({height: "0"}, 1000).pause is not a function
on Firefox. Actually it does all operations exc. this line closer_div.hide();.
Function looks like that
$(closer_link).click(function () {
ftr_form_cntr.find("div").fadeOut();
ftr_form_cntr.stop(true, true).animate({height:"0"},1000).pause(2000).hide();
closer_div.hide();
});

The animate function does have a callback function that will be triggered when the animation is completed, see code below:
ftr_form_cntr.stop(true, true).animate({height:"0"},1000, function(){
$(this).hide();
})
What you can also do, if you want a height of 0 and have it hidden after. Use the .slideUp() function, this function also has a callback function.
ftr_form_cntr.stop(true, true).slideUp(1000);
If you want to animate, wait 1 second and do something else, do something like:
ftr_form_cntr.stop(true, true).animate({height:"0"},1000, function(){
var _this = $(this);
setTimeout(function(){
_this.hide();
}, 1000);
})
Another option can be the .delay(), which waits 2 seconds.
ftr_form_cntr.stop(true, true).animate({height:"0"},1000).delay(2000).hide();