Trying to get viewport width on page load and when resizing browser window. For some reason the width isn't being outputted on page load. Any idea what the issue is and/or how to resolve?
function mobileViewUpdate() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth > 776) {
$("area[data-toggle]").click(function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".detail-box").hide();
$(".detail-box"+selector).show().addClass('animated fadeIn');
});
}
}
$(window).on('load, resize', mobileViewUpdate);
There is no need of , as separator. Separation by space will work . Please refer this link for more informaton
$(window).on('load resize', mobileViewUpdate);
I guess you are calling this function within a ready function, in that case window has already loaded and so the window load event has already been called.
Attaching the load event handler at that point will never be called.
Related
i have this site:
link
There is a difference when you call function in document.ready calculation or resize function
There is a white border when the page loads calculation is not correct ...
$( document ).ready(function() {
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
$(window).on('resize',function(){
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga-resize:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta-resize:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total-resize:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
});
Basically I used the same code and document.ready but also according to resize and unfortunately goes.
I did manual calculation on a 1366 px and ought to get a 669px width (good value) and I am 657px sites.
Does anyone know why this difference appears to 12px?
Thanks in advance!
You must be using Windows as OS aren't you?
The problem is that on load, you have a scrollbar.So when you are making you calculs, some element have a smaller width. Later, the scrollbar dispear and the white gap appear.
Quick fix would be to add overflow:hidden on the body then make your calculs. Afterward, you can remove the overflow hidden.
Note that the problem also appear when you resize the window below a certain height.
-edit
The issue lies with the .right node max-width property disabling this causes the page to load the dimensions correctly however the algorithm with the node resizing is not being run correctly on document ready.
The page loads correctly after re-sizing the page.
My best guess for this next issue is that the OP did not provide enough code to fully diagnose his issue; but, i am positive that the code on ready is not executing correctly.
Run each variable in console and edit your question to provide the answers please.
Onload values:
window: 1903
custom2.js:89
stanga: 260
custom2.js:91
dreapta: 609
custom2.js:93
total: 1034
After resize:
window: 1918
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1044
custom2.js:154
window: 1920
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1046
Your resize event is being triggered twice, thats a problem of its own, but eventually it resolves the correct values.
You might need to load the background image asynchronus, catch an event when loading is done, and then make calculations. Like so:
$(document).ready(function() {
asyncLoad('.yourElement');
});
$(window).resize(function() {
doCalculations('.yourElement');
});
var asyncLoad = function(elem) {
var imgCSS = elem.css('background-image');
var imgSrc = imgCSS.replace('url(', '').replace(')', '');
$('<img/>').attr('src', imgSrc).load(function() {
$(this).remove();
elem.css('background-image', imgCSS);
doCalculations(elem);
});
});
var doCalculations = function(elem) {
var windowsize = $(window).outerWidth();
var stanga = jQuery('#secondary').outerWidth();
var dreapta = jQuery('.right').outerWidth();
var contentwh = windowsize-stanga-dreapta;
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
You might need to change the function to catch an array of images and do something when the last is done loading, but I hope the idea of 'Async loading' is well explained.
As explained HERE the function loads an image, and then it uses the same image as background-image for your element, and the browser is smart enough to not load that image twice.
I have a Foundation Orbit image slider that doesn't show up until you resize the browser window. The space is empty until you even just change the window size by a pixel. Foundation is calculating the hight of the slider on the fly but when the page first loads there's no height set on the container.
I also have a nav bar that doesn't correct itself to its calculated width until I resize the window.
Here's the nav bar code:
Ew.ApplicationView = Ember.View.extend({
didInsertElement: function() {
$(".nav").width($(window).width() - 406);
$(".subnav").width($(window).width() - 396);
return $(window).resize(function() {
$(".nav").width($(window).width() - 406);
return $(".subnav").width($(window).width() - 396);
});
}
});
And the slider initialization code:
Ew.OrbitSliderComponent = Ember.Component.extend({
initOrbit: function() {
$(document).foundation('orbit', {
stack_on_small: true;
navigation_arrows: false;
variable_height: true;
});
}.on('didInsertElement')
});
What causes jQuery functions to not fire until the window resizes?
A simple trick would be chaining the .resize() function twice:
return $(window).resize(function() {
$(".nav").width($(window).width() - 406);
return $(".subnav").width($(window).width() - 396);
}).resize(); // Resize() onload
You can see the difference between without chaining (http://jsfiddle.net/teddyrised/2x42Q/2/) and with chaining (http://jsfiddle.net/teddyrised/2x42Q/1)
I do not understand fully why this is happening, but it seems it has to do with the size .nav and .subnavright? I think that the initial sizing of this elements occurs too early. Plz try the following:
Ew.ApplicationView = Ember.View.extend({
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, function(){
$(".nav").width($(window).width() - 406);
$(".subnav").width($(window).width() - 396);
return $(window).resize(function() {
$(".nav").width($(window).width() - 406);
return $(".subnav").width($(window).width() - 396);
});
}
}
});
This makes your logic run after all rendering stuff has been performed by Ember. Actually didInsertElement just guarantees to be executed when the root element of the given view is there. The child elements or child views do not have to be there! Have a look at my blog for an explanation and a more elegant approach to avoid this unattractive nesting in the code.
Could it be the parts that are saying:
return $(window).resize(function() {
What if instead of $(window).resize it was $(document).load ?
From jQuery documentation:
/*The load event is sent to an element when it and all sub-elements have been
completely loaded. This event can be sent to any element associated with a
URL: images, scripts, frames, iframes, and the window object.*/
I wrote some jquery to resize elements and close all open popups on my page when the browser window is resized:
addEvent({
target: window,
eventListener: 'onresize',
func: function (e) {
resizeElements(); //This resizes loads of stuff
closeAllPopups(); //Closes any open popups
}
});
This works fine at 100% zoom. However, at zoom levels less than 90% onresize keeps getting called, even when the window has not been resized. The effect is that popups won't open- they immediately close.
This only seems to happen on IE8. It works fine for Chrome.
Any ideas why this is happening- Is it simply an IE8 bug? Can anyone suggest a fix or a workaround?
What about checking the window original size and re-size size, then try to call your function?
So, even if you are in 90% view on load, this window size will be original size and only when you resize (under 90% view), your functions will be called?
$(document).ready(function(){
var original_width = $(window).width();
var original_height = $(window).height();
$(window).resize(function() {
var resize_width = $(window).width();
var resize_height = $(window).height();
if(original_width != resize_width && original_height != resize_height){
alert('You resized!');
// resizeElements(); //This resizes loads of stuff
// closeAllPopups(); //Closes any open popups
}
});
});
You could try maybe to debounce it using a timer:
addEvent({
target: window,
eventListener: 'onresize',
func: function (e) {
clearTimeout(window.resizeTimeout);
window.resizeTimeout = setTimeout(function(){
resizeElements(); //This resizes loads of stuff
closeAllPopups(); //Closes any open popups
},50);
}
});
I'm using here global object window to set resizeTimeout variable but better would be to use a local variable.
There is no way to "fix" this bug in the browser itself, so you are just going to have to work-around having a resize event that constantly triggers. So roasted was right about using the time, but you are not looking for a timer. You need to store the time and then ensure that enough time has elapsed before the event is triggered again, like so:
var _interval = 1000;// milliseconds
var _resize = 0;
addEvent({
target: window,
eventListener: 'onresize',
func: function (e) {
if (Date.now() - _resize < _interval)
return;
_resize = Date.now();
resizeElements(); //This resizes loads of stuff
closeAllPopups(); //Closes any open popups
}
});
What is wrong about this?
if ((window.innerWidth < 1170)) ? {
alert("so eng hier!");
};
Other than the obvious syntax error, the question mark, nothing. Maybe you mean to execute that block of code in the window's resize event?
window.onresize = function(event) {
if ((window.innerWidth < 1170)) {
alert("so eng hier!");
};
}
Be careful with the alert as it will fire every time the window resize event is fired, so as you're trying to resize the window to make it bigger it'll keep popping up.
Nothing wrong with it, but it will only fire when the page loads. If you want to have it happen if the user resizes the window WHILE viewing your site, add a listener.
window.onresize = resize();
var resize = function (){
if (window.innerWidth < 1170){
alert("so eng hier!");
};
};
Oh right. What is that ? doing in there? Check your if syntax.
It's only called once (presumably on page load). I think you're looking to bind to:
$(window).on('resize', function(){
// check window size here and react when it's too small.
});
For starters... I have no sinister intention of subjecting users to popups or anything like that. I simply want to prevent a user from resizing the browser window of a webpage to which they've already navigated (meaning I don't have access to / don't want to use window.open();). I've been researching this for quite a while and can't seem to find a straightforward answer.
I felt like I was on track with something along the lines of:
$(window).resize(function() {
var wWidth = window.width,
wHeight = window.height;
window.resizeBy(wWidth, wHeight);
});
...to no avail. I have to imagine this is possible. Is it? If so, I would definitely appreciate the help.
Thanks
You can first determine a definite size.
var size = [window.width,window.height]; //public variable
Then do this:
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
Demo: http://jsfiddle.net/DerekL/xeway917/
Q: Won't this cause an infinite loop of resizing? - user1147171
Nice question. This will not cause an infinite loop of resizing. The W3C specification states that resize event must be dispatched only when a document view has been resized. When the resizeTo function try to execute the second time, the window will have the exact same dimension as it just set, and thus the browser will not fire the resize event because the dimensions have not been changed.
I needed to do this today (for a panel opened by a chrome extension) but I needed to allow the user to change the window height, but prevent them changing the window width
#Derek's solution got me almost there but I had to tweak it to allow height changes and because of that, an endless resizing loop was possible so I needed to prevent that as well. This is my version of Dereck's answer that is working quite well for me:
var couponWindow = {
width: $(window).width(),
height: $(window).height(),
resizing: false
};
var $w=$(window);
$w.resize(function() {
if ($w.width() != couponWindow.width && !couponWindow.resizing) {
couponWindow.resizing = true;
window.resizeTo(couponWindow.width, $w.height());
}
couponWindow.resizing = false;
});
If need some particular element to handle resize in some particular mode, and prevent whole window from resizing use preventDefault
document.getElementById("my_element").addEventListener("wheel", (event) =>
{
if (event.ctrlKey)
event.preventDefault();
});