Develop Reference

When the window is loading the event stops. After scrolling down the event starts

(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
event.preventDefault();
}
previousScroll = currentScroll;
});
}());
$(window).on('load', function () {
$(".timer").timerstart({
event.stopPropagation()l
});
});
is it possible?
when the page is begin event is stopping and scroll down event start.

Scroll Event Catch with jquery or vanilla Javascript

How can i catch scroll event? For example 1024px scroll down to top notify appears.
I'm stuck at this code;
(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
notify appears
} else {
notify appears
}
previousScroll = currentScroll;
});
}());

try this
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if ( scrollTop > 1024 ) {
//your code block
}
});
the scrollTop() method sets or returns the vertical scrollbar position for the selected elements.

execute jquery code when user scrolls down a certain amount (pixels)

I would like to execute the below code when user scrolls to a certain position on the page; for instance 600px; down (from the top). So detect 600px down in PIXELS.
// $(document).ready(function() {
$(".slidedown").one('load', function () {
$(this).slideDown(200);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
// });
This did not work:
$(document).scroll(function(){
if (document.scrollHeight > 600) {
$(".slidedown").one('load', function () {
$(this).slideDown(200);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
}
});

simply set your threshold of # of pixels before you fire event and this function will be triggered when the user scrolls up or down by n pixels
https://jsfiddle.net/7daffjh8/7/
var scrollAmount = 0;
var pixelsToNotify = 200;
$(document).scroll(function() {
var distance = $(window).scrollTop();
console.log(distance, scrollAmount);
if(distance - scrollAmount > pixelsToNotify){
alert('user scrolled down event');
scrollAmount = distance;
}
if(distance < scrollAmount - pixelsToNotify){
alert('user scrolled up event');
scrollAmount = distance;
}
});

I think something like this will work
$(document).scroll(function(){
if ($(document).scrollTop() > 600) {
... execute code
}
});
https://jsfiddle.net/ga7140L9/1/

Preventing instance of same function if loaded once jquery

My website navigation needs to be converted into vertical nav so i measure the width of the viewport and bind it with resize and load function.then it executes the menuConvert() function. But in resizing window it causes multiple execution of the menuConvert() function.
My js codes are
$(window).bind('load resize', function(){
width = $(window).width();
console.log(width)
if(width < 800){
menuConverter(); // This is the function
}
});
I want to prevent the execution of the function if it is once executed.Can any one help

You can unbind event
$(window).bind('load resize', function(){
width = $(window).width();
console.log(width)
if(width < 800){
menuConverter(); // This is the function
//Unbind
$(window).unbind('load resize')
}
});
I would recommend the use of .on() and .off() inplace of .bind() and .unbind() respectively.

You can do something like
var flag800;
$(window).bind('load resize', function () {
if (width < 800) {
if (flag800 !== true) {
menuConverter(); // This is the function
flag800 = true;
}
} else {
flag800 = false;
}
});
Demo: Fiddle

use a simple bool variable.
var menexe = false;
$(window).bind('load resize', function(){
width = $(window).width();
console.log(width)
if(width < 800){
if(menexe === false){
menuConverter(); // This is the function
menexe = true;
}
}
});

How do I call a function only once during a specific scroll height?

I have a map on the bottom of my webpage and when a user scrolls down to the map, I want the google marker to drop and that specific time. I have this working already. The problem is that it keeps calling the function, how do I call it only once?
This is my JS code right now and I have tried to figure the bug out:
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300 &&
$(window).scrollTop() <= $(document).height() - $(window).height() - 200
) {
var dropOnlyOnce = (function(){
dropped = false;
if (dropped == false) {
dropMarker(); // this is the function I'm calling
}
dropped = true;
})();
}
});
How can I get this to work or how can I just call the dropMarker function once?

You could remove the listener once the function has been called:
$(window).on('scroll', function(e) {
if( ...window at scrollTop ) {
$(window).off('scroll')
.... Drop your pin
}
})
Esteban Felix's Comment brings up a good point. This will remove all scroll handlers. If that's not something that works for you, you can move the function outside the handler, and only remove that:
var dropPinOnce = function() {
if( ... window at correct scrollTop ) {
... Drop pin here ...
$(window).off('scroll', dropPinOnce)
}
$(window).on('scroll', dropPinOnce)

Try
var callbacks = $.Callbacks("once")
, dropMarker = function() {
// do stuff
};
callbacks.add(dropMarker);
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300 &&
$(window).scrollTop() <= $(document).height() - $(window).height() - 200
) {
var dropOnlyOnce = (function(){
dropped = false;
if (dropped == false) {
callbacks.fire() // call `dropMarker` "once"
}
dropped = true;
})();
}
});
See jQuery.Callbacks at "Possible Flags" -> "once"
var callbacks = $.Callbacks("once")
, dropMarker = function() {
console.log(123)
};
callbacks.add(dropMarker);
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300 &&
$(window).scrollTop() <= $(document).height() - $(window).height() - 200
) {
var dropOnlyOnce = (function(){
dropped = false;
if (dropped == false) {
// dropMarker(); // this is the function I'm calling
callbacks.fire()
}
dropped = true;
})();
}
});
div {
height : 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>abc</div>

If you just unbind after your condition is met then your function will effectively only be called once.
$(window).scroll(function callOnceOnScroll() {
var $window = $(window),
$document = $(document);
if ($window.scrollTop() >= $document.height() - $window.height() - 300 &&
$window.scrollTop() <= $document.height() - $window.height() - 200) {
$window.off('scroll', callOnceOnScroll);
dropMarker(); // this is the function I'm calling
}
});