We Keep Coding

if statement doesn't work for counter variable

I want my script to execute a method, when the scrollCount variable reaches a value > 2.
Code:
$( document ).ready(function() {
var scrolly = 0;
var scrollCount = 0;
console.log(scrollCount);
$('#wizard-next').click(function(e) {
e.preventDefault();
scrolly -= 300;
$( "#wizard-step-1" ).animate({ marginTop: (scrolly+'px') }, 1200);
scrollCount++;
console.log(scrollCount);
});
$('#wizard-prev').click(function(e) {
e.preventDefault();
scrolly += 300;
$( "#wizard-step-1" ).animate({ marginTop: (scrolly+'px') }, 1200);
scrollCount--;
console.log(scrollCount);
});
if(scrollCount > 2) {
console.log('Add method here!');
}
});
The if statement doesn't work. How can I fix that?

if(scrollCount > 2) {
console.log('Add method here!');
}
As I'm sure you've noticed from the comments (#Jaromanda), the if statement is only done once. Which of course at that moment is false, since scollCount will be 0.
If you want it to be called everytime a click occurs then suround it by a function.
var scrollCountCheck = function(){
if(scrollCount > 2) {
console.log('Add method here!');
}
}
And call this method in each of your click functions. right after or before scrollCount++ or scrollCount-- (depending on when you actually intended on calling it)

End a script 1 second after the first scripts finishes

I want to run an animation function after another function (handleScreen) has completed. The animation function will fade out parts of the page after 1 sec. I tried adding a .promise function but that doesn't seem to work.
https://jsfiddle.net/Dar_T/eqdk82ru/1/
handleScreen(mql).promise().done(function() {
setTimeout(function() {
$("#name,#splash").fadeOut("slow");
}, 1000);
});

You can use jquery Deferred object to resolve this:
handleScreen creates a $.Deferred that will be passed to the animation function. A promise from this deferred is then returned.
function handleScreen(mql) {
var def = $.Deferred();
mql.matches ? smallBlock(def) : largeBlock(def);
return def.promise();
}
The animation function marks the deferred as resolved once the animation finishes (using TweenLite onComplete argument on the last animation):
function largeBlock(def) {
setTimeout(function () {
TweenLite.defaultEase = Linear.easeNone;
TweenLite.set('.square', { visibility: 'visible' });
var tl = new TimelineLite();
tl.fromTo('.l1', 2, { height: 0 }, { height: 227 });
tl.fromTo('.l2', 3, { width: 0, }, { width: 445 });
tl.fromTo('.l3', 2, { height: 0 }, { height: 227 });
tl.fromTo('.l4', 3, { width: 0 }, { width: 445, onComplete: def.resolve });
tl.timeScale(4);
}, 600);
}
fadeOut is executed once the deferred is done:
handleScreen(mql).done(function() {
setTimeout(function() {
$("#name,#splash").fadeOut("slow");
}, 1000);
});
});
Demo: https://jsfiddle.net/g5f7pex3/1/

A simple approach that addresses the problem in a different way than you were thinking:
var alreadyFaded = false;
function FadeSplash()
{
if(alreadyFaded == false){
//prevent this from running a second time
alreadyFaded = true;
$("#name,#splash").fadeOut("slow");
}
}
$(function () {
//do something
//make the fade happen upon finishing if it hasn't already
FadeSplash();
});
$(function () {
//by default, the fade will happen after 5 seconds if FadeSplash()
//wasn't already called by the above function.
$("#splash,#name").show(), setTimeout(function () {
FadeSplash();
}, 5000)
});
Here's a working JSFiddle to demonstrate:
https://jsfiddle.net/tthhaft1/

Short answer: you can't do it naturally. Long Answer: use an interval to check for a flag, also, there is no need for 2 document ready:
$(document).ready(function () {
var finished = false;
SOME FUNCTION
//Inside SOME FUNCTION do your stuff, and before returning or whatever it is doing:
var intervalCheck = setInterval(function () {
if (finished) {
//Do your stuff you need to do after those 5 secs.
clearInterval(intervalCheck);
}
}, 1000);
$("#splash,#name").show(), setTimeout(function () {
$("#name,#splash").fadeOut("slow")
finished = true;
}, 5000);
});

jQuery plugin: prevent multiply calls of an object

Recently, I'm writing a jQuery plugin which moves html elements.
My plugin is something like this:
$('#div1').moveIt({ top: 100, left: 200 });
The problem is, When I call moveIt more than once for an element. It does all methods together. something like this:
$('#div1').moveIt({ top: 100, left: 200 }); // first call
$('#div1').moveIt({ top: 200, left: 300 }); // second call
// even more calls ....
The questions are:
How can I prevent the the second call inside my plugin?
How can I overwrite the new values of second call into the first call?
A simple sample code will be enough.
edit: here is my problem

UPDATED: What about your problem - check fiddle http://jsfiddle.net/vittore/jHzLN/1/
You have to save timeout and clear it when you set new one.
What you are asking for is called throttle.
Check this article http://benalman.com/projects/jquery-throttle-debounce-plugin/
But as you are really using jquery animations ( your plugin name tells that ), you have to use something else.
Check stop() method
$(selector).stop(true, true).animate(...)
Another interesting thing you can do is queue additional animations. Use queue:true option for that:
$(selector).animate({ left:...} , { queue: true })

Is this what you were going for? http://jsfiddle.net/acbabis/B89Bx/. Let me know:
$(function()
{
var methods =
{
init : function(options) {
$(this).each(function() {
var self = $(this);
var settings = $.extend({
top : 50,
left : 50,
dir : true,
}, options);
var i=0, j=0;
var move = function()
{
settings = self.data('moveItTarget');
if(settings.dir)
{
i++;
j++;
}
else
{
i+=10;
j+=10;
}
self.css({'top':Math.min(i, settings.top),
'left':Math.min(j, settings.left)});
if(j<=settings.top && i<=settings.top)
{
setTimeout(move,1);
} else {
self.data('movingIt', false);
}
};
self.data('moveItTarget', settings);
if(!self.data('movingIt')) {
self.data('movingIt', true);
move();
}
});
}
};
$.fn.moveIt = function(methodOrOptions) {
if (methods[methodOrOptions]) {
return methods[methodOrOptions].apply(this,
Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions==='object' || !methodOrOptions) {
return methods.init.apply(this, arguments);
} else {
$.error('Method "'+methodOrOptions+'" does not exist!');
}
};
}(jQuery));
$('#div1').moveIt({ top: 100, left: 100, dir: true }); // first call
$('#div1').moveIt({ top: 300, left: 300, dir: false }); // second call

Issue with a resize function after ajax refresh

Im having issues with combining 2 scripts
I have javascript code that checks how big my container is and if its bigger than 500 it devides the content into 2 different divs:
function divideStream() {
if ($("#stream_one_col").width() > 500) {
var leftHeight = 0;
var rightHeight = 0;
$("#stream_one_col").children().each(function() {
if (rightHeight < leftHeight) {
$("#stream_right_col").append(this);
rightHeight += $(this).height();
$(this).children().addClass("stream_right_inner");
}
else {
$("#stream_left_col").append(this);
leftHeight += $(this).height();
$(this).children().addClass("stream_left_inner");
}
});
}
else {
$("#content_left").load("php/stream_left.php");
}
}
And I have an ajax refresh
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php');
$(".aroundit").divideStream();
}, 3000);
});
Now basically the reloading goes just fine
However, the function (divideStream) wont reload after the ajax is activated
Instead it just keeps jumping back and forth
Can anyone help me?

the function divideStream is not a extend function of jQuery .
You should use this:
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php');
divideStream();
}, 3000);
});

I'm not quite sure I understand what is happening. But I think you might want to make sure that you run your divideSteam function after the load has completed. You can do it like this.
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php', function() { //this function runs once load has completed
divideStream(); // as hugo mentioned
});
}, 3000);
});

JavaScript/JQuery event handler problem

Been playing around a bit with JavaScript/JQuery, and made a "shy" button, instead its just a p-tag with a word. It works ok, except the bool goDown doesn't seem to change, so it always goes down. What's wrong with my code?
Also JavaScript debugging in VS2010 doesn't seem to be working very good, is this a known problem?
Thanks in advance!
if (typeof naarBeneden == 'undefined') {
var goDown = new Boolean(true);
}
$(document).ready(function () {
$(".moveme").animate({ "left": "+=500px"
}, 2000);
$(".moveme").hover(move());
});
function move() {
if (goDown) {
$(".moveme").hover(function () {
$(this).animate({ "top": "+=50px" }, 0)
});
goDown = false;
}
else {
$(".moveme").hover(function () {
$(this).animate({ "top": "-=50px" }, 0)
});
goDown = true;
}
}

The main issue is here:
$(".moveme").hover(move());
You're calling move() not using move as a handler, you need it without the parenthesis, like this:
$(".moveme").hover(move);
Even doing that though, you're assigning a new .hover() handler on each hover event, and I doubt that's really what you're after. It's hard to tell exactly what you're after, but I think this is it:
$(function () {
var goDown = typeof naarBeneden != 'undefined';
$(".moveme").animate({ "left": "+=500px" }, 2000);
.hover(function () {
$(this).animate({ "top": goDown ? "+=50px" : "-=50px" }, 0);
}, function() {
$(this).animate({ "top": !goDown ? "+=50px" : "-=50px" }, 0);
});
});
This assigns an up then down animation if goDown is true when you hover/leave the element, and it does the reverse if goDown is false.