Develop Reference

stop a previous executed function after resizing $(window)

I have a function and it will be triggered when the browser's width is larger than 1024px. But what should we do to terminate the function everytime when we resize the browser less than 1024px.
function abc(){do something}
$(window).resize(function(){
var winWidth = $(window).width();
if(winWidth >= '1024'){
abc();
}else{
/////cancel abc()
}
});

jquery window resize error when resizing

I'm trying to get the div to resize when the window is resized. With the following code i get "this.fullScreen is not a function" If i remove the window resize it works fine but obviously doesn't resize with the window. Am I thinking about this the wrong way?
var PE = {};
PE.functions = {
fullScreen: function fullScreen() {
var fullScreen = $('.full-screen'),
navbarHeight = $('.navbar').height(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
fullScreen.css({
width: windowWidth,
height: windowHeight - navbarHeight
});
},
fullScreenResize: function screenResize() {
$(window).resize(function(){
this.fullScreen();
});
}
};
$(document).ready(function() {
PE.functions.fullScreenResize()
});

In fullScreenResize, the call to this.fullScreen(), this is not necessarily the PE.functions object because the callback function passed to resize has a different this. To remedy, bind the callback function to the current this:
fullScreenResize: function screenResize() {
$(window).resize(function() {
this.fullScreen();
}.bind(this));
}
Or replace this.fullScreen() with the full object path PE.functions.fullScreen().

Windows resize event not properly detected

I have a navigation menu that should stay fixed at the top of the page using the sticky.js plugin for window-widths equal or larger than 992 px. For smaller windows, it should just go with the flow of the site. Now, as this is a responsive website, I would like to implement a dynamic window width detection when the window is resized.
The following code does not seem to correctly detect the resize event. I have to reload the page to stick / unstick the navbar at the correct width:
$(document).ready(function() {
var currentWindow = $(window);
function checkWidth() {
var windowSize = currentWindow.width();
if (windowSize >= 992) {
// Sticky.js
$('.navbar').sticky({
topSpacing: 0,
getWidthFrom: '.upper-header',
responsiveWidth: true
});
} else {
alert('Window is smaller');
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
Would appreciate your guidance.

You need to unstick the navbar when the window shrinks.
$(document).ready(function() {
var currentWindow = $(window);
var stuck = false; // So we only call the plugin when necessary
function checkWidth() {
var windowSize = currentWindow.width();
if (windowSize >= 992 && !stuck) {
// Sticky.js
$('.navbar').sticky({
topSpacing: 0,
getWidthFrom: '.upper-header',
responsiveWidth: true
});
stuck = true;
} else if (windowSize < 992 && stuck) {
alert('Window is smaller');
$('.navbar').unstick();
stuck = false;
}
}
// Execute on load
checkWidth();
// Bind event listener
currentWindow.resize(checkWidth);
});

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');
});
}
});

Detect when window resize event is done

I have a site that needs to reload after resizing and have found my own limit of coding a script, that automatically reloads the page:
I want the script to behave like follows:
if window width was < 768px and stays < 768px I do not want to reload the page
if window width was >= 768px and goes < 768px I want to reload the page once
if window width was < 768px and goes >= 768px I want to reload the page
if window width was >= 768px and stays >= 768px it always should reload
The last part is done easy using the following code:
// After resize events
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
if($(window).width() > 767) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function()
{
this.location.reload(false); /* false to get page from cache */
}, 200);
}
}
I think I have to create a var that stores the current $(window).width(); and than check with if {} else if {} else {}, but from this point my mind looses the control.

// After resize events
var id;
var startWidth = window.innerWidth; //get the original screen width
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
if ($(window).width() > 767) {
this.location.reload(false);
} else {
if (startWidth > 767){
this.location.reload(false);
}
}
}