Develop Reference

How do I go about delaying javascript execution?

I have some javascript code which displays a form on loading the web page. I need the code to execute 2 minutes after the visitor has been on the website. How do I go about it? Below is my code:
setTimeout(function(){document.getElementById("dialog").innerHTML="";}, 120000);
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});

The code must be INSIDE the setTimeout(), not OUTSIDE. Try it...

Use window.setTimeout():
The setTimeout() method [...] sets a timer which executes a function or specified piece of code once the timer expires.
Syntax
var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);
So in your case, you could do this:
// When the page first loads...
$(document).ready(function() {
// ...wait for two minutes...
window.setTimeout(function() {
// ...and then run this code.
}, 120000)
})
More details: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

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

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

$(window).resize() doesn't fire function

I wrote a function that's supposed to fire when the page first loads, and when a user resizes the window. It works fine when the page loads, but it doesn't work when the user resizes the window. What's weird is that if I put an alert inside the function, that alert shows up when the window gets resized, but the rest of the function doesn't fire. I'm not seeing any error's in Chrome's console. I've tried changing it to $(document).resize(), $("body").resize(), and $(".pricingHeader").resize(), and nothing's worked. This makes no sense to me.
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});

Try :
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(i, elem){
if ( $(elem).height() > tallest ) tallest = $(elem).height();
});
$(".pricingHeader").height(function() {
var add = $(this).closest('.features').length ? 8 : 0;
return tallest+add;
});
}
$(function() {
$(window).on('resize', getTallest).trigger('resize');
});

Alright, I figured out what the problem was. I was setting the height of every .pricingHeader to a fixed height, which was preventing the tallest from resizing on window resize. Here's the fixed script:
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
$(this).css({height:"auto"});
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").each(function() {
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
});
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});