For my web site I am using the following code:
$(window).resize(function (event) {
window.location.reload();
});
Unfortunately when using the site on a mobile device there are minute resize events that occur. I am wanting to put in a tolerance so that these minute changes do not fire this reload.For this I need to know the change in dimensions that occurred in the resize event. I have been looking at the event object however it is huge and ugly.
Thanks in advance :)
You could achieve this by tracking the original window dimensions and then comparing those dimensions with current dimensions (acquired during each resize event) to determine the amount of change.
The following shows how you could trigger a reload if the width changes by a certain total THRESHOLD amount:
var THRESHOLD = 50; // the threshold that must be exceeded to trigger reload
$(window).resize(function(e) {
var width = $(window).width();
// Record the starting window width that the comparison will
// be relative to
if(window.startWidth == undefined) {
window.startWidth = width;
}
// Calculate the total change since first resize event
var widthChange = Math.abs(width - window.startWidth);
// If change exceeds THRESHOLD, trigger reload
if(widthChange > THRESHOLD) {
window.location.reload();
}
})
Building on the helpful comments of JBDouble05 and the helpful answer by Dacre Denny I have made a final solution that fits my needs. Here it is to help others in the future hopefully.
var OGwidth = $(window).width();
var OGheight = $(window).height();
var threshold = 50;
$(window).resize(function (e) {
if (OGwidth < 768) {
var newWidth = $(window).width();
var newHeight = $(window).height();
var widthChange = Math.abs(OGwidth - newWidth);
var heightChange = Math.abs(OGheight - newHeight);
if (widthChange > threshold || widthChange > threshold) {
window.location.reload();
}
} else {
window.location.reload();
}
//reset for next resize
OGwidth = newWidth;
OGheight = newHeight;
})
Related
I know there's a pretty simple way of doing this, but I can't seem to find anything in my searches.
I've found lots of examples of getting to a certain scroll location on the page and then animating a div to a different size, however I want to adjust a div's max height depending on the scroll location. Initially i'd like the div max-height to be about 150px, and then as you scroll from around 200px down the page to 400px down the page, I want the max-height of the div to decrease to 75px. Then obviously as you scroll back up, it gets larger.
I can't provide an example of what I've tried already, as I'm yet to attempt it as I have no idea on where to start.
Note: The size should gradually adjust with the scroll position.
I'm not sure if I understood your problem, but when I did I came out with this :D
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop < 200){
maxHeight = 150;
}else if(scrollTop > 400){
maxHeight = 75;
}else{
maxHeight = 150 - 75 * (((scrollTop-200) * 100)/200)/100;
}
$('#thediv').stop().animate({'max-height': maxHeight+"px"}, 500);
})
Here you have a sample : https://jsfiddle.net/keccs4na/
You could try this:
$(window).on('scroll', function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 200 && scrollTop <= 400) {
$('#divID').stop().animate({height: "75px"}, 250);
} else {
$('#divID').stop().animate({height: "150px"}, 250);
}
});
Note: You'll want to use CSS to initially set the height to 150px.
Try this.
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').css({"height": "75px","max-height":"75px"});
}
else {
$('#id-of-div').css({"height": "150px","max-height":"150px"});
}
});
EDIT:
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').animate({"height": "75px","max-height":"75px"},500);
}
else {
$('#id-of-div').animate({"height": "150px","max-height":"150px"},500);
}
});
I'm calling an API that returns a URL to an image, the image could be any size and it's completely random.
I'm trying to resize images to fit within the page, ensuring the content is not pushed below the fold, or that the image doesn't hit the width of the page.
I've written some Javascript below, I've been testing it and am getting some strange results - the console logs are saying that the image is one size, but the element selector in Chrome's dev tools is usually saying something completely different. I'm sure I've made some basic mistake in my code, if you could take a look that would be great.
Javascript sets viewport height and width, checks if a photo src is available. Once the image has loaded, it checks if the natural dimensions are greater than that of the viewport, if so it attempts to resize - this is where the script is failing.
//check viewport
var viewportWidth = getWidth();
var viewportHeight = getHeight();
//get the media
if (data[2] == "photo") {
var tweetImage = document.getElementById("tweetImage");
//when it loads check the size against the browser size
tweetImage.onload = function () {
console.log('image height: ' + tweetImage.naturalHeight);
console.log('viewport height: ' + viewportHeight);
//does it matter if its landscape?
if (viewportWidth - tweetImage.naturalWidth < 1) {
tweetImage.width = Math.floor(tweetImage.naturalWidth - (viewportWidth - tweetImage.naturalWidth) * 1.2);
console.log('w');
} else if (Math.floor(viewportHeight - tweetImage.naturalHeight) < 1) {
console.log('h');
console.log(viewportHeight - tweetImage.naturalHeight);
console.log('changed result: ' + Math.floor(tweetImage.naturalHeight - (Math.abs(viewportHeight - tweetImage.naturalHeight))));
tweetImage.height = Math.floor(tweetImage.naturalHeight - (Math.abs(viewportHeight - tweetImage.naturalHeight)*1.2));
} else {
tweetImage.height = Math.floor(viewportHeight / 2);
}
tweetImage.align = "center";
tweetImage.paddingBottom = "10px";
};
//tweetImage.height = Math.floor(viewportHeight / 2);
tweetImage.src = data[3];
}
One option would be to use a CSS-based solution like viewport height units.
.example {
height: 50vh; // 50% of viewport height
}
See http://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
I'm looking to shrink a logo based on scroll
So far, I have something like this
logoSize = function(){
var headerOffset = $(window).height() - 650;
var maxScrollDistance = 1300;
$(window).scroll(function() {
var percentage = maxScrollDistance / $(document).scrollTop();
if (percentage <= headerOffset) {
$('.logo').css('width', percentage * 64);
}
console.log(percentage);
});
}
logoSize();
I'm close, but the image either starts too wide or it shrinks too quickly, I need it to happen for the first 650px of scroll as you can see - Any ideas? Perhaps a percentage width would be better?
I've re-written your code based on the assumption that you have a target size in mind , e.g. after scrolling 650px you want your image to be 250px wide.
It scrolls smoothly between the native size and the target size, and takes into account the fact that the window height could be less than your maximum scrolling distance:
logoSize = function () {
// Get the real width of the logo image
var theLogo = $("#thelogo");
var newImage = new Image();
newImage.src = theLogo.attr("src");
var imgWidth = newImage.width;
// distance over which zoom effect takes place
var maxScrollDistance = 650;
// set to window height if that is smaller
maxScrollDistance = Math.min(maxScrollDistance, $(window).height());
// width at maximum zoom out (i.e. when window has scrolled maxScrollDistance)
var widthAtMax = 500;
// calculate diff and how many pixels to zoom per pixel scrolled
var widthDiff = imgWidth - widthAtMax;
var pixelsPerScroll =(widthDiff / maxScrollDistance);
$(window).scroll(function () {
// the currently scrolled-to position - max-out at maxScrollDistance
var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance);
// how many pixels to adjust by
var scrollChangePx = Math.floor(scrollTopPos * pixelsPerScroll);
// calculate the new width
var zoomedWidth = imgWidth - scrollChangePx;
// set the width
$('.logo').css('width', zoomedWidth);
});
}
logoSize();
See http://jsfiddle.net/raad/woun56vk/ for a working example.
Is there a jQuery plugin or a way using straight JavaScript to detect browser size.
I'd prefer it is the results were 'live', so if the width or height changes, so would the results.
JavaScript
function jsUpdateSize(){
// Get the dimensions of the viewport
var width = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var height = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
document.getElementById('jsWidth').innerHTML = width; // Display the width
document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize; // When the page first loads
window.onresize = jsUpdateSize; // When the browser changes size
jQuery
function jqUpdateSize(){
// Get the dimensions of the viewport
var width = $(window).width();
var height = $(window).height();
$('#jqWidth').html(width); // Display the width
$('#jqHeight').html(height); // Display the height
};
$(document).ready(jqUpdateSize); // When the page first loads
$(window).resize(jqUpdateSize); // When the browser changes size
jsfiddle demo
Edit: Updated the JavaScript code to support IE8 and earlier.
you can use
function onresize (){
var h = $(window).height(), w= $(window).width();
$('#resultboxid').html('height= ' + h + ' width: ' w);
}
$(window).resize(onresize );
onresize ();// first time;
html:
<span id=resultboxid></span>
This should return the visible area:
document.body.offsetWidth
document.body.offsetHeight
I guess this is always equal to the browser size?
use width and height variable anywhere you want... when ever browser size change it will change variable value too..
$(window).resize(function() {
width = $(this).width());
height = $(this).height());
});
Do you mean something like this window.innerHeight; window.innerWidth $(window).height(); $(window).width()
You can try adding even listener on re-size like
window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize()
{
var ResX= document.body.offsetHeight;
var ResY= document.body.offsetWidth;
}
I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?
By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});
Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/