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().
Related
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);
});
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();
});
How can I call for this(or any) JS function to be run again whenever the Browser window is resized?
<script type="text/javascript">
function setEqualHeight(e) {
var t = 0;
e.each(function () {
currentHeight = $(this).height();
if (currentHeight > t) {
t = currentHeight
}
});
e.height(t)
}
$(document).ready(function () {
setEqualHeight($(".border"))
})
</script>
You can use the window onresize event:
window.onresize = setEqualHeight;
You can subscribe to the window.onresize event (See here)
window.onresize = setEqualHeight;
or
window.addEventListener('resize', setEqualHeight);
This piece of code will add a timer which calls the resize function after 200 milliseconds after the window has been resized. This will reduce the calls of the method.
var globalResizeTimer = null;
$(window).resize(function() {
if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
globalResizeTimer = window.setTimeout(function() {
setEqualHeight();
}, 200);
});
You use jquery, so bind it using the .resize() method.
$(window).resize(function () {
setEqualHeight( $('#border') );
});
Hi guys I want to know if i could implement something like this in my side:
To check the height of the users window or display
And if it's for example smaller than 800px,
Then a javascript code should not be executed
I already read about mediaqueries but, I really don't know how to use it on a jquery code.
Thanks.
Use window.innerHeight:
document.ready(function(){
if (window.innerHeight < 800){
//Code here
}
});
You can jQuery height() function or window.innerHeight to find out window height.
Live Demo
if($(window).height() < 800)
return;
//You code here
Edit: As mentioned by Cerbrus, it is better to use javascript window.innerHeight here
if(window.innerHeight < 800)
return;
//You code here
use jquery height().. go to the link if u want to read more about height()
if($(window).height() < 800)
{
//do your stuff
}
I use this sometimes when I want to know about the user's viewport:
var PageDimensions = (function () {
var Width;
var Height;
var getDimensions;
function pagedimensionsCtor() {
if( getDimensions === undefined ){
getDimensions = document.createElement("div");
getDimensions.setAttribute("style", "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
}
Width = getDimensions.offsetLeft;
Height = getDimensions.offsetTop;
}
pagedimensionsCtor();
function Reset() {
pagedimensionsCtor();
}
function GetHeight() {
return Height;
}
function GetWidth() {
return Width;
}
return {
Reset: Reset,
GetHeight: GetHeight,
GetWidth: GetWidth
};
})();
demo: http://jsfiddle.net/Vb7xz/
I have a script that calculates the height of a div and returns it as a style. But when you rotate mobile-devices the height changes, so I need a way to reload it. How can I accomplish this?
<script type="text/javascript">
window.onload = function() {
var height = document.getElementById('id').offsetHeight;
document.getElementById('id').style.marginTop = height + 'px';
}
</script>
Make a function out of it and call that on both load and resize. No need to reload your page, just call the code again:
<script type="text/javascript">
function calcHeight() {
var height = document.getElementById('id').offsetHeight;
document.getElementById('id').style.marginTop = height + 'px';
}
window.onload = calcHeight;
window.resize = calcHeight;
</script>
You can create a function:
function setHeight() {
var height = document.getElementById('id').offsetHeight;
document.getElementById('id').style.marginTop = height + 'px';
}
That you can call onload:
window.onload = function() {
setHeight();
// Other actions when window is loaded
}
And onresize:
window.onresize = function(event) {
setHeight();
// Other actions when window is resized
}
This should do the job.