I have a webapp saved to the iPhone homescreen, and I need to run some JavaScript when the device changes orientation.
I tried this, but it only seemed to work in a desktop browser and not on the iPhone.
window.onresize = function() {
alert('rotation change!');
};
Is there some special event I'm supposed to hook into?
You're looking for onorientationchange.
Use this together with jQuery:
$(document).ready(function () {
function reorient(e) {
alert('rotation change!');
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
Or you can just use onorientationchange in your code.
You don't need to use jQuery in case you dont need to know when the DOM document is ready.
Related
I'm learning Vanilla JS and DOM, and I'm testing some codes in console. I have a question.
Step 1) Navigate to website "http://rehub.wpsoul.com" in chrome.
Step 2) Open a console.
Step 3) Write down below code in console.
var neww = window.open('/')
neww.addEventListener('click', function() {
alert('hi');
})
This code is not working. However, if I change the event type from 'click' to 'scroll', it does work well.
What makes it hinder to work in DOM?
Whenever I tested this code, some websites does not work event type, 'load' like this website.
I've had a headache for this for a few days. I would like to know the reason and principle of DOM and JS.
I need your help, thanks! :)
As you are opening a new window and its DOM is not yet available or ready, the event is not getting bind. Please try following code:
var neww = window.open('/')
neww.addEventListener('load', function() {
neww.document.body.addEventListener('click', function() {
alert('hi');
});
});
This works on a desktop browser, but not on my iOS mobile phone. I tried adding 'touchstart' and looked at this post's solution to check how other's got it to work, but it still isn't working. Any suggestions as to other options? I also tried adding e.preventDefault() - and added e to function(), but that didn't work as well.
I have tried:
$('body').on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Edit:
It appears there may be something else going on, I changed the code to be as general as possible and it is not firing the event on iOS, but working in my chrome emulator:
$(document).on('click touchstart', 'body', function() {
alert('hi');
});
Additional update:
I have added the following code to my script.js file:
$('body').css('display', 'none');
As expected, the screen goes blank on my desktop browser for both local and on heroku, but when I test on mobile, the screen is not blank. It looks like js isn't working properly.
Images attached:
Answer: the reason it wasn't working on iOS Safari is because in my js page I was using ES6, specifically 'let' which is [not supported currently][1]. Changed to ES5 and the issue disappeared.
$('body').on('click', '.dashboard_leftNav_category a', function() {
var link = $(this).attr('showSection'); //changed from let link
var show = $('[section="'+link+'"]');
$('[section]').hide();
$('body').find(show).fadeIn();
$('html,body').scrollTop(0);
});
You have two options:
Reset your mobile browser's history because your browser's cache reads the old source.
Change the name of your source file in the desktop and refresh your page again.
This should help you. Instead of binding it to the body element, bind the event to the document.
$(document).on('click touchstart', '.myContainer', function() {
$(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
});
Also try changing adding the following style to myContainer class
cursor : pointer;
Put e.preventDefault(); inside your javascript function.
I have some JavaScript which adds some CSS when a button is clicked using the onClick() event. This works perfectly in all the browsers that have tested (Safari, Firefox, Chrome etc), and also works on all mobiles including within the iOS UIWebView object.
However although it works perfectly in the Google Chrome browser on an android phone it does not work within the Android WebView object. Nothing happens at all.
Changing it from an onClick() event to a touchstart() event works.
Also adding alert() inside the onClick() works too, it just seems that the onClick() event is incapable of adding CSS styling inside the Android WebView object
What the hell is going on, is this some kind of bug, it seems to happen on every Android mobile I have test on, all with a different OS version :S
Here is the code I have been using
if (login) {
login.addEvent('click', function(e){
e.stopPropagation();
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
});
}
Can anyone help??
I tried this "duplicate version" in nature JS and it's work for me:
if (login) {
login.onclick = myFunc();
login.addEventListener('click', function() {
myFunc();
});
}
function myFunc() {
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
}
You need to change
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
to
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
or
$('#login_items_wrapper').setStyle('opacity', '0');
$('#loading_content_login').show();
As you are not correctly referencing the elements.
Is there any way I can restrict the execution (if statement) of javascript so that it only applies to desktop computers, It needs to be off when the user is on a mobile/tablet device.
Below is the code, however obviously it applies for any device at the moment when the document is ready.
<script type="text/javascript">
$(document).ready(function(){
main_parallax();
main_scrolling();
sauces_slider();
});
</script>
Only the main_parallax(); function should be omitted when on a mobile/tablet device.
One method is using the user agent, which you could do like this:
$(document).ready(function(){
if (/Android|BlackBerry|iPhone|iPad|iPod|webOS/i.test(navigator.userAgent) === false) {
main_parallax(); //Run main_parallax() not a mobile device
}
main_scrolling();
sauces_slider();
});
I would recommend using feature detection instead, try looking into: Modernizr
Why this code doesn't work:
$(window).resize(function() {
document.location.reload();
});
Try the following code:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
Reference:
http://forum.jquery.com/topic/anyone-know-how-to-refresh-reload-page-on-browser-resize
The resize event fires many times (depending on the browser) as you resize...there's probably a much better way to solve your problem (at least, I can't imagine that constantly reloading the page would be an optimal solution...).
For example if you're doing this to get your $(document).ready() code to run again? In that case for example you can use a named function. For example:
function myFunc() {
//do stuff
}
$(myFunc); //run on DOM ready
$(window).resize(myFunc); //run when resizing