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.
Related
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 a basic "scroll to top" jQuery function for use on my site. This function works as I would like in Chrome, Opera, and IE though not in my Firefox (37.0.2).
The function is as follows:
function scrollUp(){
$("#to-top").hide();
$(window).bind('mousewheel', function(){
var num = $(window).scrollTop();
if (num > 100){
$("#to-top").show(500);
};
if (num < 100){
$("#to-top").hide();
};
$("#to-top").click(function(){
$("#to-top").hide();
$('body,html').stop().animate({scrollTop:0},1200);
});
});
}
scrollUp();
I have checked the inspect element boxes in Firefox but no errors are appearing.
For this to work the HTML is:
<a id="to-top">
<center><p>^ ^ ^</p><p>Scroll To Top</p></center>
</a>
<script src="../scripts/toTop.js">scrollUp()</script>
located at the bottom of the page before the closing body tag.
The HTML is not showing anything in firefox which means that the first line of the jQ function must be working, though for some reason after that it doesn't.
I originally had .on() instead of .bind() they functioned the same in the other browsers buy not firefox....
Any help is appreciated, thanks guys!
Use the scroll event and bind using .on
$(document).on('scroll', function () { /* your mousewheel code here */ });
If memory serves, Firefox doesn't like the mousewheel event. I'm pretty sure the scroll event should work though.
Also, you don't need to run $(window).bind every time you scrollUp(). That only needs to be done on $(document).ready
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 am trying to bind text data to html elements through a jquery using particular element id but data is not getting bind only in chrome browser, same functionality is properly working in other browsers like Firefox and IE. Following is my code please tell me solution if you have any.
var reqSegment1 = $('Segment', FlightReq);
$("#spOrgCity").html($('DepartureLocation', reqSegment1[0]).text());
$("#spDestCity").html($('ArrivalLocation', reqSegment1[0]).text());
if (tripType == "oneway") {
$("#onewaydiv").attr("style", "display:block;");
$("#rnddiv").attr("style", "display:none;");
}
else {
$("#onewaydiv").attr("style", "display:block;");
$("#rnddiv").attr("style", "display:block;");
}
Above code works properly for other browsers than chrome. I am unable to investigate what is actual problem if it is working with other browsers. Is it jquery conflict issue or something else.
I have a ASP updatepanel, within that panel I have some controls which got jQuery effects connected to them.
The effects work perfect before posback, after postback the effects only work in IE not in FF.
To get it working in IE I added the following to my MasterPage:
function pageLoad(sender, args)
{
// Initialize jQuery effects.
}
With this code it works in IE but bot in FF, anyone got an answer to this one?
You need to rebind your effects after the UpdatePanel finishes loading. You can achieve that by adding the following code:
<script type=”text/javascript”>
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(panelLoaded);
function panelLoaded(sender, args){
// Rebind your elements/effects here.
}
</script>
The pageLoad shortcut definitely does work the same way in Firefox as in IE. Double check that you don't have any JavaScript errors that are only throwing in Firefox.