I wrote the code below to check my mobile screen height when I rotate it to Portrait or Landscape.
window.addEventListener("orientationchange", function(event) {
rotateScreen();
}, false);
function rotateScreen() {
alert(window.orientation)
alert($(window).height())
}
When I rotate it to Portrait, I get 0, 294. When I rotate it to Landscape, I get 90, 419. The figure is reversed, I have tried to wrap it in $(document).ready() but it does not work.
$(document).ready(function(){
alert($(window).height())
})
It looks like that when I rotate the mobile to Portrait, I get the height of Landscape, and when I rotate the mobile to Landscape, I get the height of Portrait. Can someone suggest how to fix it?
Thanks
The resize event gets triggered after the orientationchange event. However resize can also get triggered by other things such as showing the virtual keyboard.
So to get round this we can listen first for an orientationchange, once that occurs we can then add a resize listener. Once the orientationchange has completed it will fire our resize event. Once completed we then remove the resize listener to prevent it being fired in error
$(window).on('orientationchange', function() {
var orientationChange = function(evt) {
rotateScreen();
$(window).off('resize', orientationChange);
}
$(window).on('resize', orientationChange);
});
This effectively creates a kind of pseudo post:orientationChange event. (I would probably avoid using timeouts if you can)
Adding setTimeout could solve the problem, please try the code below:
function rotateScreen() {
window.setTimeout(function() {
alert(window.orientation)
alert($(window).height())
}, 500);
}
Related
I have this doubt, I have a menu in which I run a javascript code or another depending on whether its width is greater or less than its height, works me well the first time the screen resolution is detected, but if there is a change of resolution or a change of orientation does not detect it, and despite for example of having changed to portrait orientation still executing the landscape orientation code. Is there any way to solve this? regards
You could use an eventlistener and listen on the resize event.
window.addEventListener('resize', () => {
// function body
});
But I think this is rather a styling issue and you should consider to use a different approach.
Here is an extention of #mstruebing 's answer :
function resisePageMobile(){
if (window.innerWidth <= 696) { //Detect mobile
aside.classList.remove('pc-stuff');
aside.classList.add('mobile-stuff');
}else{ //Detect other higher resolution screens
aside.classList.remove('mobile-stuff');
aside.classList.add('pc-stuff');
}
}
resisePageMobile();//run once on page load
//then attach to the event listener
window.addEventListener('resize',resisePageMobile);
Running this function once at the start of the page is important because the resize event will not trigger until the window is getting resized so we must initialize page at the start !
I am trying to add scroll event listener to my three.js project.
I tried this code but it doesn't work and I don't know why.
window.addEventListener("scroll", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
I tried OrbitControls.js and TrackballControls.js, but it zooms. I don't want the zoom feature.
Any ideas?
The scroll event will only fire if you do actual scrolling by having more content than can fit on the screen. If you have the canvas at 100% width and height the wheel won't send any scroll events. Try the wheel event instead.
window.addEventListener("wheel", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
What if you add your event on your canvas instead of the window element? If you can provide some code that would help also!
i thought this would be an very frequent question, but i actually did not find any answer to it.
i am making a webapp/website for mobile.
When the user rotates his phone, i want to hide the whole body just before the page is rotated, with that ugly deformation/transition. Then, when this transition is done, show the body again.
here i have done a minimal version of the code that works on android.
there is a background image from loremPixel on the body, and a red background on the html tag.
the expected result is: never seing the image rotate. only a red screen (not rotating either)
thanks for any help.
ps: i think i have narrowed the problem down to the orientationchange event being fired after the rotation on ios, and before(as i would expect) on android
Random idea.
$(window).resize(function() {
$("#wrapper").css("display","none");
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
$("#wrapper").css("display","block");
});
Start resize, hide wrapper. No resize in 0.5 seconds, show.
http://jsfiddle.net/7ktg9can/
When vertical scrollbar appears on the page, windows resize event need to be triggered. Is there any way to capture scrollbar appearance event using javascript?
I'm having problem with the width of the page as it makes div to jump to next line when the vertical scrollbar appears. It seems to work fine when I resize page, so I want to trigger resize event manually when vertical scrollbar appears.
You could use setInterval to monitor for the scrollbar. If the document width exceeds the window width, you can trigger the window.resize event manually.
function checkForScrollbar() {
if ($(window).width() < $(document).width()) {
$(window).trigger('resize');
}
}
$(document).ready(function() {
setInterval(function() { checkForScrollbar(); }, 500);
$(window).on('resize', function() {
//Resize triggered.
//Do Your Stuff
});
});
See this JS Fiddle: http://jsfiddle.net/USvsW/9/
OrganicPanda has posted a clever solution without the need for a timer. Basically he places an iFrame with 100% somewhere and listens to 'resize' events on it:
Detect when window vertical scrollbar appears
u can use this:this will through alert on resize
$(window).on('load resize', function(){
var w1 = $(window).width();
alert(w1);
})
i know that you with $(window).width() can get the size of the web browser.
i want to detect when the user change the size of his web browser so i could readjust the columns width. is there a way to automatically detect this or do i have to use setTimeinterval to loop and see if it has changed?
Try the resize event
$(window).resize(function() {
console.log('window was resized');
});
Writing this down cause somehow none of these answers give the modern best-practices way of doing this:
window.addEventListener("resize", function(event) {
console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
The JavaScript event is named window.onresize.
The JQuery binding is named .resize()
In MDN they give a really good Javascript standalone code:
window.onresize = resize;
function resize()
{
alert("resize event detected!");
}
If you need just this kind of functionality I would recommend to go for it.
You might want to use debounce :
https://davidwalsh.name/javascript-debounce-function
Otherwise the
window.addEventListener("resize")
Will fire the whole time as the window resize is in progress.
Which will tax your CPU overhead.
Something to keep in mind- in IE, at least, resize events bubble, and positioned elements and the document body can fire independent resize events.
Also, IE fires a continuous stream of 'resize' events when the window or element is resized by dragging. The other browsers wait for the mouseup to fire.
IE is a big enough player that it is useful to have an intermediate handler that fields resize events- even if you branch only IE clients to it.
The ie handler sets a short timeout(100-200 msec)before calling the 'real' resize handler. If the same function is called again before the timeout, it is either a bubblng event or the window is being dragged to a new size, so clear the timeout and set it again.
Here's a little piece of code I put together for the same thing.
(function () {
var width = window.innerWidth;
window.addEventListener('resize', function () {
if (window.innerWidth !== width) {
window.location.reload(true);
}
});
})();
I use
media="only screen and (min-width: 750px)" href="... css file for wide windows"
media="only screen and (max-width: 751px)" href="...css file for mobiles"
When I move the right windows border left and right to increase and decrease my window size, my web browser will automatically switch from the wide window to the mobile. I do not have to include any Javascript code to detect window width. This works for Chrome, Firefox and Internet Explorer on both Windows and Macintosh computers.