We Keep Coding

setTimeout won't execute the function

I even looked at this and this solution still didn't help me : Execute a function after X seconds in jquery
Here is my code:
// featured bounce
$('#featured .animated').hover(function() {
$(this).addClass('bounce');
setTimeout( function(){
$(this).removeClass('bounce');},
1300
);
});
The adding of the class works, but the setTimeout ordeal will not work. It won't even execute and not javascript error is thrown in the Chrome console. I feel like I have everything typed out correctly.. the class on the .animated object after the addClass() looks like this:
"animated bounce"
And the animation plays, but then it NEVER removes the "bounce" from the class attribute.
Any help?

Using Function.prototype.bind correctly, you can avoid cheap context hacks like var that = this.
// featured bounce
$('#featured .animated').hover(function() {
var elem = $(this);
elem.addClass('bounce');
setTimeout(elem.removeClass.bind(elem, 'bounce'), 1300);
});
Side Note: Function.prototype.bind is an ES5 addition and browser support needs to be considered. See the compatibility table at the bottom of the MDN article on the function.

The scope of this is pointing at window, not the element you expect.
$('#featured .animated').hover(function() {
var elem = $(this);
elem.addClass('bounce');
setTimeout( function(){
elem.removeClass('bounce');},
1300
);
});

$('#featured .animated').hover(function() {
$(this).addClass('bounce');
(function(that) {
setTimeout( function(){
// use `that` instead of `this`
$(that).removeClass('bounce');
}, 1300);
})(this); //pass `this` into this function
});

JQuery / Javascript: Function not calling within document.ready

What I want to do is have a slider where DIVs move left & right. The code looks as follows:
<script type="text/javascript">
var $slider;
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
$(function() {
$slider = $('.slidemid');
$slider.fadeOut();
// set active classes
$slider.first().addClass('active');
$slider.first().fadeIn($transition_time).css('display', 'inline-block');
// auto scroll
setInterval(function () {
slideright(); }, $transition_time + $time_between_slides );
$('.slidelefta').click(function() {slideleft(); return false;});
$('.sliderighta').click(function() {slideright(); return false;});
});
function slideright() {
$slider = $('.slidemid');
var $i = $slider.find('.active').index();
$slider.eq($i).removeClass('active');
$slider.eq($i).fadeOut($transition_time);
if ($slider.length == $i + 1) $i = -1; // loop to start
$slider.eq($i + 1).fadeIn($transition_time).css('display', 'inline-block');
$slider.eq($i + 1).addClass('active');
}
function slideleft() {
$slider = $('.slidemid');
var $i = $slider.find('.active').index();
$slider.eq($i).removeClass('active');
$slider.eq($i).fadeOut($transition_time);
if ($i == 0) $i = $slider.length; // loop to end
$slider.eq($i - 1).fadeIn($transition_time).css('display', 'inline-block');
$slider.eq($i - 1).addClass('active');
}
</script>
The initial fadeOut, fadeIn and addClass (in the document.ready function) get executed just fine.
The calls to slideright() and slideleft() never get executed though.

Check out this JSBin where i pasted your code and simplified some of the lines since the invocation of the defined functions was the problem. You can see there, in the console, that
in fact the function is being called from the setInterval. Also, i want to point here that it's better to define your functions inside your scope like the way they are declared on the JSBin demo. Why? Well if you define them outside your scope, in the global scope, a very bad person can execute in the console slideright = function () { evilXSShere; } and voilà, your function was overwritten.
Hope it helps.

If you are not getting the any errors on the console, then I think its the issue of javascript scopes. As you are invoking the functions slideright() and sildeleft() inside the functions of anonymous function, but these functions are defined outside the anonymous function within global scope.
Think that anonymous function as a class and you are invoking the function inside the class functions and those function does not belong to that class scope.
Solution(I haven't confirmed the code, the I am pretty sure that should work):
Define those functions inside the anonymous function $(function() or
Wrap those function in the constructor function or object
function slide(){
this.slideRight = function(){}
this.slideLeft = function(){}
}
//invoke it like this
var slider = new Slide();
slider.slideRight//for slideRight
slider.slideLeft// for slideLeft

javascript function vs jquery namespace function, the difference?

How come a javascript function like this below...
function stars() {
var mOpacity = $('#area').css('opacity');
if (mOpacity = 1) {
$('#title').find('.stars').animate({"marginTop":"-170px",opacity:1}, 3000)
.animate({opacity: 0}, 400)
.animate({"marginTop":"60px",opacity:0},0, stars);
}
}
stars();
...breaks my browser when I try to do something like this....
$.stars = function() {
var mOpacity = $('#area').css('opacity');
if (mOpacity = 1) {
$('#title').find('.stars').animate({"marginTop":"-170px",opacity:1}, 3000)
.animate({opacity: 0}, 400)
.animate({"marginTop":"60px",opacity:0},0, $.stars());
}
}
$.stars();
What is the lesson here between the 2 styles of functions?
Thanks
Ok based on everyones feedback to see more code, here is a full gimplse of the code on my .js file...
function mIntro() {
/********PRE-GAME ANIMATION*********/
$('#area').css({'opacity':0}).delay(1000).animate({opacity:1},300);
$('#title').find('.age').css({'opacity':0}).delay(2000).animate({opacity:1}, 3000);
function stars() {
var mOpacity = $('#area').css('opacity');
if (mOpacity = 1) {
$('#title').find('.stars').animate({"marginTop":"-170px",opacity:1}, 3000)
.animate({opacity: 0}, 400)
.animate({"marginTop":"60px",opacity:0},0, stars);
}
}
stars();
}
$(function() {
mIntro();
});
I have jquery connected to this .js page and I just can't understand why stars has to be in-cased in a traditional javascript function and not flexibile for a jquery namespace function. I bet it has something to do with the animate tag that re-calls stars, but I am not sure...
Thanks or any advice!!!

You're inadvertently calling it in the second snippet:
.animate(..., $.stars());
You should code it the same way: pass the function, not the result of calling it:
Function: stars $.stars
Result of calling: stars() $.stars()

The difference is that your first example is contained directly within the window object whereas the second example is contained in the jQuery ($) object (note that the $ object is then contained within the window object). As far as why it breaks when you attempt to use the jQuery namespace, I cant say without seeing all of your code, however $ is probably not defined.

Javascript different variable scope on AJAX call

I have a problem with my variable scope in a simple slider script that I´ve written (I don't want to use a readymade solution because of low-bandwidth). The slider script is called on statically loaded pages (http) as well as on content loaded through AJAX. On the statically loaded page (so no AJAX) the script seems to work perfect. However when called through AJAX the methods called can't find the elements of the DOM, which halts the necessay animation that is needed for the slider.
All the events are handled through even delegation (using jQuery's on() function), this however provided no solution. I'm quite sure it has something to do with the structure and variable scope of the script, but am unable to determine how to change the structure. So I'm looking for a solution that works in both situations (called normal or through AJAX).
I tried to declare the needed variables in every function, this however resulted in some akward bugs, like the multiplication of the intervals I set for the animation, because of the function scope. Hope somebody can help me in the right direction.
// Slider function
(function (window, undefined) {
var console = window.console || undefined, // Prevent a JSLint complaint
doc = window.document,
Slider = window.Slider = window.Slider || {},
$doc = $(doc),
sliderContainer = doc.getElementById('slider_container'),
$sliderContainer = $(sliderContainer),
$sliderContainerWidth = $sliderContainer.width(),
slider = doc.getElementById('slider'),
$slider = $(slider),
$sliderChildren = $slider.children(),
$slideCount = $sliderChildren.size(),
$sliderWidth = $sliderContainerWidth * $slideCount;
$sliderControl = $(doc.getElementById('slider_control')),
$prevButton = $(doc.getElementById('prev')),
$nextButton = $(doc.getElementById('next')),
speed = 2000,
interval,
intervalSpeed = 5000,
throttle = true,
throttleSpeed = 2000;
if (sliderContainer == null) return; // If slider is not found on page return
// Set widths according to the container and amount of children
Slider.setSliderWidth = function () {
$slider.width($sliderWidth);
$sliderChildren.width($sliderContainerWidth);
};
// Does the animation
Slider.move = function (dir) {
// Makes use of variables such as $sliderContainer, $sliderContainer width, etc.
};
// On ajax call
$doc.on('ajaxComplete', document, function () {
Slider.setSliderWidth();
});
// On doc ready
$(document).ready(function () {
Slider.setSliderWidth();
interval = window.setInterval('Slider.move("right")', intervalSpeed);
});
// Handler for previous button
$doc.on('click', '#prev', function (e) {
e.preventDefault();
Slider.move('left');
});
// Handler for next button
$doc.on('click', '#next', function (e) {
e.preventDefault();
Slider.move('right');
});
// Handler for clearing the interval on hover and showing next and pervious button
$doc.on('hover', '#slider_container', function (e) {
if (e.type === 'mouseenter') {
window.clearInterval(interval);
$sliderControl.children().fadeIn(400);
}
});
// Handler for resuming the interval and fading out the controls
$doc.on('hover', '#slider_control', function (e) {
if (e.type !== 'mouseenter') {
interval = window.setInterval('Slider.move("right")', intervalSpeed);
$sliderControl.children().fadeOut(400);
}
});
})(window);
The HTML example structure:
<div id="slider_control">
<a id="next" href="#next"></a>
<a id="prev" href="#prev"></a>
</div>
<div id="slider_container">
<ul id="slider">
<li style="background-color:#f00;">1</li>
<li style="background-color:#282">2</li>
<li style="background-color:#ff0">3</li>
</ul>
</div>

I notice you have
Slider.setSliderWidth = function() {
$slider.width($sliderWidth);
$sliderChildren.width($sliderContainerWidth);
};
which is called on ajax complete.
Does you ajax update the DOM giving a new DOM element that you could get to by doc.getElementById('slider')? Then your var slider and jquery var $slider are likely pointing to things that no longer exist (even if there is a dom element with slider as the id). To rectify, whenever the ajax is invoked that replaces that element, reinitialize slider and $slider to point to the new jquery wrapped element using the same initialization you have.
slider = doc.getElementById('slider');
$slider = $(slider);
Edit:
I'm not sure where you're going with the variable scope issue, but take a look at this example.
<pre>
<script>
(function(){
var a = "something";
function x (){
a += "else";
}
function y() {
a = "donut";
}
function print (){
document.write(a +"\n");
}
print ();
x();
print ();
y();
print ();
x();
print ();
})();
document.write(typeof(a) + "\n");
</script>
</pre>
It outputs into the pre tag
something
somethingelse
donut
donutelse
undefined
This isn't all that different from what you're already doing. As long as a is not a parameter of a method and is not declared with var in a nested scope, all references to a in code defined within your function(window,undefined){ ...} method will refer to that a, given that a is defined locally by var to that method. Make sense?

To begin, surely you can replace all the getElementById using a jQuery approach. i.e. replace $(doc.getElementById('next')) with $('#next')

I think that when you use on it doesn't search the element for the selector as you are assuming. So you would have to use:
$doc.on('click', '#slider_control #prev',function(e){
e.preventDefault();
Slider.move('left');
});

Wait, what gets loaded through Ajax? The slider-html code? In that case, the Slider has already been 'created' and a lot of your variables will point to nowhere (because these DOM elements did not existed when the variables were initialized). And they will never do so either.

Jquery functions working momentarily, and then not at all?

I had applied this slide mechanism to a page, and it worked fine for a while. I can't remember changing anything at all, but now it won't function properly.
Here is the code:
$(document).ready(function () {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function () {
var href = $(this).attr('href');
if (hash == href.substr(0, href.length)) {
var toLoad = hash + '.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function () {
$("#story_pane").animate({
marginLeft: 360
}, 250);
$("#main_content").animate({
marginLeft: -600,
opacity: 0.3
}, 250);
$("#main_content").css();
});
alert("test");
var toLoad = $(this).attr('href') + ' #content';
$('#content').hide(1, loadContent);
$('#load').remove();
$('#story_pane').css("display", "block");
$('#story_pane').append('<span id="load"></span>');
$('#load').fadeIn(1);
window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);
function loadContent() {
$('#content').load(toLoad, '', showNewContent())
}
function showNewContent() {
$('#content').show(1, hideLoader());
}
function hideLoader() {
$('#load').hide();
}
return false;
});
Only the "test" alert executes properly, I had been looking for any brackets i forgot to close, or other syntax issues but i'm in a bit of a dead end. I do have the files backedup, but that's a last resort option, in case I can't fix this.
edit- works now, I deleted $("#main_content").css(); and added a click function which fixed it

Change this:
function loadContent() {
$('#content').load(toLoad,'',showNewContent) // remove the "()" here
}
The way you had that call to ".load()" coded, you were calling "showNewContent" at the time the load began, not when it finished. Same goes for the "showNewContent" function itself:
function showNewContent() {
$('#content').show(1,hideLoader); // again, remove "()" from "hideLoader"
}
It's important to keep clear the distinction between referring to a function by name when passing it as a parameter for some API that needs a callback, and the process of actually calling the function. In these cases, you need a reference to a function. (Yes, a function call can return a reference to a function, but that's not what's happening here.)
edit — Another significant problem you're going to have here is that the initial call to ".load()" to fetch the currently-relevant page based on the state of the nav will almost certainly not complete before the rest of that code has run. If there are any dependencies for the initialization on content loaded by that initial call to "load()", then that won't be in the DOM yet. You could fix this by stuffing all the code in the rest of the "ready" handler into the completion handler for that initial ".load()".
edit again — OK another problem is this line of code, right after the "alert()":
var toLoad = $(this).attr('href') + ' #content';
What is it that you expect this to be at this point? I think that jQuery will set this to refer to the "document" object, but you won't be able to get any "href" attribute from it like that. Maybe you want "window.location.href" there? I'm not sure what you're trying to accomplish, exactly.

This is what live and delegate are for.