Develop Reference

JavaScript / JQuery - How to temporarily disable function after use?

I have a simple JS that would smoothly autoscroll to another div whenever mousewheel is moved up or down.
Here's the script:
$(document).bind('mousewheel', function(evt) {
var delta = evt.originalEvent.wheelDelta
if(delta < 0){
$('html, body').animate({
scrollTop: $("#content-wrapper").offset().top
}, 3000);
}
else {
$('html, body').animate({
scrollTop: $("#bgheader").offset().top
}, 3000);
}
});
My problem is that if i play for a few seconds with the mousewheel it would start scrolling here and there forever, since every move recorded is queued as additional script launch.
Is there any way to put some sort of 'cooldown' to the script? So that after using once it would become avaiable to use again in, let's say' 3 seconds? Or once the animation is finished?

You can unbind the wheel event listener, and then use jQuery's .animate() callback function to re attach the event listener after it is done, like so:
function scrollHandler (event) {
$(document).off("mousewheel.custom");
var delta = event.originalEvent.wheelDelta
if(delta < 0){
$('html, body').animate({
scrollTop: $("#content-wrapper").offset().top
}, 3000, function () {
// animation callback function
$(document).on("mousewheel.custom", scrollHandler);
}));
}
else {
$('html, body').animate({
scrollTop: $("#bgheader").offset().top
}, 3000, function () {
// animation callback function
$(document).on("mousewheel.custom", scrollHandler);
});
}
}
// namespace the event so we can easily .off() it
$(document).on('mousewheel.custom', scrollHandler);

I've used timeouts.
var maxPoll = 3000,
eventActive = false;
$(document).bind('mousewheel', function(evt) {
if(eventActive) {
return
} else {
setTimeout(maxPoll, function() { eventActive = True })
}
var delta = evt.originalEvent.wheelDelta
if(delta < 0){
$('html, body').animate({
scrollTop: $("#content-wrapper").offset().top
}, maxPoll);
}
else {
$('html, body').animate({
scrollTop: $("#bgheader").offset().top
}, maxPoll);
}
});
It's rough and it uses globals, but it basically turns off your event while the animation is running.

scrollTop() flickers when used in loop to fix an element at top of page

Click on the second div and see how it stutters.
Demo: http://jsfiddle.net/mirohristov/76xtt3hm/
$("body").on('click', '.mysection', function(){
var el = $(this);
if($(this).hasClass('active')){
url = $('.active .nectar-button').attr('href');
window.open(url, '_self')
}else{
$("html, body").animate({ scrollTop: el.offset().top+'px' }, 500,function(){
el.addClass('active');
var scroller = setInterval(function(){
$("html, body").scrollTop(el.offset().top);
}, 50); //if i change this to 14 or 1 it works here but in my real case there is more content and images in the divs and it's like 150 here - it's sluggish or flickers
$('.mysection').not(el).removeClass('active');
setTimeout(function(){window.clearInterval(scroller)}, 1000);
});
}
});
In the real project, I'm using divs as pages to display content. The selected div should aligned with top of page while the div above is being 'closed'.
I used a loop to re-set the scrollTop to that of the element position but in my real example it, even though the setTitmeout delay is 14 or 1, it acts like in the demo (at 50 delay).
I belive it's because there's more content and full-width, HD background images that go fullscreen in my actual project. It's as if the setTimeout is updated slower than the CSS animation.
How can I make it smooth? Is it even possible?

Try this (demo)
$('body').on('click', '.mysection', function () {
var scroller,
el = $(this),
html = $('html')[0],
body = $('body')[0];
if ($(this).hasClass('active')) {
url = $('.active .nectar-button').attr('href');
window.open(url, '_self')
} else {
el.one('transitionend', function (e) {
clearInterval(scroller);
});
$('html, body').animate({
scrollTop: el.offset().top + 'px'
}, 500, function () {
el.addClass('active');
scroller = setInterval(function () {
var top = el.offset().top;
html.scrollTop = top;
body.scrollTop = top;
}, 10);
$('.mysection').not(el).removeClass('active');
});
}
});

Javascript code bugs other code

Is there something wrong with this code?
Because the rest of my js code only work if I delete it.
<script>
$(document).ready(function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value };
});
</script>
This code doesnt work when I use the one above.
<script>
var url1 = "http://192.168.1.157/wp/";
var url2 = "http://192.168.1.157/wp/parceiros";
var url3 = "http://192.168.1.157/wp/contato";
$(function(){
if (location.href==url2) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#bluecontent").offset().top }, 1500);
});
}
else {
}
if (location.href==url3) {
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#allcontentcontact").offset().top }, 1500);
});
}
else {
}
});
</script>
Thanks.

I did it.
The problem is:
<script>
$(document).ready(function() {
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value };
});
</script>
This code was on header, and for some reason it only works (without hurting the other js codes) when it's inserted on the page that contains #uploadBtn and #uploadFile.

JQuery scroll to anchor acting odd

So i've got a script to scroll to an anchor on click. It doesnt seem to work on the "first" click going down. it will jump, rather than scroll. but after the first click, it jumps to the anchor and my menu appears, and then all the links (including the first one that jumped) work fine. im not sure what would cause this, and was wondering if anyone else would have an idea?
I have a JSFiddle, but it works fine there. only when i implement the same code into my site is when it happens.
Thanks
http://spo.comxa.com/
uploaded the files above for testing, same thing is happening.
http://jsfiddle.net/reeceheslop/b59fn43e/
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});

Your click function seems to be nested inside of a scroll event listener, so I assume its not being called until something is scrolled. Try moving it to the outside along with the document ready function like this:
document.addEventListener('scroll', function (e) {
var newPos = (window.scrollY * -1) / 5
document.getElementById("header").style.backgroundPosition = "center " + newPos + "px";
var startY = 300;
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixednav').slideDown();
}else{
$('.fixednav').slideUp();
}
}
checkY();
});
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});

Transition between html pages using jquery to load a div?

I am trying to use jQuery to create a stylish transition between HTML pages.
however, I just need to fade in and fade out the content of the html pages.
for example:
I have two pages 1.html and 2.html
they both have a DIV called #content
I need to only fadein and fade out the div content instead of the entire html page.
I am using the code bellow:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
I've tried it like this as well and it didn't do anything:
<script type="text/javascript">
var speed = 'slow';
$('html, body').hide();
$(document).ready(function() {
$('html, body #content').fadeIn(speed, function() {
$('a[href], button[href]').click(function(event) {
var url = $(this).attr('href');
if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
event.preventDefault();
$('html, body').slideToggle(speed, function() {
window.location = url;
});
});
});
});
</script>
is this possible?
Thanks

Try this code
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('a[href], button[href]').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
Click Function
$('a[href], button[href]').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Refer this fiddle
http://jsfiddle.net/fBrYp/2/