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.
Related
I am having some small layout issues with some of my elements when I bring them up on a Mac (with all browsers).
I have created this:
$(function() {
if (navigator.appVersion.indexOf("Mac")!=-1) {
console.log("HERE");
$('#topmenudisplay UL').addClass('topmenudisplaymac');
};
});
But it simply does not work.
I have placed this in my header below my CSS of course.
I cannot even see the console.log in my console, so the if statement is just not triggering.
Can anyone advice me on how to ammend this?
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.
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.
I have some JavaScript that can appear on many different pages. Sometimes those pages have been accessed via a URL containing an anchor reference (#comment-100, for instance). In those cases I want the JavaScript to delay executing until after the window has jumped. Right now I'm just using a delay but that's pretty hackish and obviously doesn't work in all cases. I can't seem to find any sort of DOM event that corresponds to the window "jump".
Aside from the simple delay, the only solution I've come up with is to have the JS look for the anchor in the URL and, if it finds one, watch for changes in scrollTop. But that seems buggy, and I'm not 100% sure that my script will always get fired before the scrolling happens so then it would only run if the user manually scrolled the page. Anyhow, I don't really like the solution and would prefer something more event driven. Any suggestions?
Edit to clarify:
I'm not trying to detect a hash change. Take the following example:
Page index.php contains a link to post.php#comment-1
User clicks the link to post.php#comment-1
post.php#comment-1 loads
$(document).ready fires
Not long later the browser scrolls down to #comment-1
I'm trying to reliably detect when step 5 happens.
You can check window.onhashchange in modern browsers. If you want cross compatible, check out http://benalman.com/projects/jquery-hashchange-plugin/
This page has more info on window.onhashchange as well.
EDIT: You basically replace all anchor names with a similar linking convention, and then use .scrollTo to handle the scrolling:
$(document).ready(function () {
// replace # with #_ in all links containing #
$('a[href*=#]').each(function () {
$(this).attr('href', $(this).attr('href').replace('#', '#_'));
});
// scrollTo if #_ found
hashname = window.location.hash.replace('#_', '');
// find element to scroll to (<a name=""> or anything with particular id)
elem = $('a[name="' + hashname + '"],#' + hashname);
if(elem) {
$(document).scrollTo(elem, 800,{onAfter:function(){
//put after scroll code here }});
}
});
See jQuery: Scroll to anchor when calling URL, replace browsers behaviour for more info.
Seems like you could use window.onscroll. I tested this code just now:
<a name="end" />
<script type="text/javascript">
window.onscroll = function (e) {
alert("scrolled");
}
</script>
which seems to work.
Edit: Hm, it doesn't work in IE8. It works in both Firefox and Chrome though.
Edit: jQuery has a .scroll() handler, but it fires before scrolling on IE and doesn't seem to work for Chrome or Firefox.
To detect when the element appears on the screen, use the appear plugin:
$('#comment-1').appear(function() {
$(this).text('scrolled');
});
Can't listen to the scroll event in Internet Explorer 7.
I've tried:
$("#myIframe").scroll(function() { alert('hi'); })
Works for FF:
$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })
Getting keypresses work:
$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })
As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.
<script type="text/javascript">
window.onload = function() {
var frm = document.getElementById("myIframe").contentWindow;
frm.onscroll = function(){
alert("EUREKA");
}
}
</script>
EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.
$(window).load(function(){
$($('#myIframe').contents()).scroll(function(){
alert('frame scrolled in jquery');
});
});
I know it's an old thread, but some people could find it useful.
$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.
Try this:
2 things must happen before you can traverse the dom of a nested browsing context.
You need to know that the iframe exists, taken care of with the document ready event.
And you need to make sure that the iframe has loaded.
ie:
$(document).ready(function(){
// #page is the id of the iframe
$('#page').load(function(){
// $(this)[0].contentWindow is the window of your nested browsing context/ iframe
$($(this)[0].contentWindow).scroll(function(){
console.log($(this).scrollTop());
});
});
});
One thing to note is that this will definitely not work cross browser in Firefox.
Put this on the parent:
var childScrollHandler = function () {
alert('Scrolling going on');
}
And then put this on the iframe content:
$(document).bind('scroll', function(ev){
parent.childScrollHandler(ev);
});
replace $(document) by whatever element you are trying to listen into.