Use JQuery to target Mac browsers not working - javascript

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?

Related

Javascript not working on mobile but works on desktop

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.

Polymer fix messing up Javascript

I'm new to Polymer and as far as I've read about it, it isn't compatible with Mozilla and Safari or it has issues. I've read in StackOverflow that adding
addEventListener('WebComponentsReady', function() {
});
would help the browsers cope up with the code. Now, I've tried it on my code it works. The content is displaying properly in Mozilla, however, it messes up the Javascript that I wrote along with Polymer. I tried two options, the first one
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
}); });
I did this and there are still error logs on the console while if I wrap the whole script, it wouldn't work as well. Example:
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
});
// extra code here
});
I think wrapping addEventListener to the whole code is also causing the problem. Any ideas how to fix or are there any other viable options than adding an event listener to the code?
Try using Polymer-CLI
It comes with some polyfills out of the box.
I'm not sure whitch ones but it does include the one your inquiring about.
https://www.polymer-project.org/1.0/docs/tools/polymer-cli
It looks like using
addEventListener('WebComponentsReady', function() {
});
is messing up my Javascript because it has a conflict with
addEventListener('HTMLImportsReady', function() {
});
I had to remove it in order for the script to work properly.

Problems with option selection in Chrome and Opera

I've Problems with thise Code, it's working fine in Firefox and Internet Explorer but it doesn't work with Opera and Chrome Browsers...
<script>
function planetselect()
{
optionen=document.getElementById('pstart').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
optionen=document.getElementById('pdest').options;
for(i=0;i<optionen.length;i++)
{
if(optionen[i].value==67080)
{
optionen[i].setAttribute('selected','selected');
}
}
}</script>
Change
optionen[i].setAttribute('selected','selected');
to
optionen[i].selected = true;
More generally, avoid the use of setAttribute to change DOM properties. Sometimes it works, sometimes it doesn't.
From the MDN :
Using setAttribute() to modify certain attributes, most notably value
in XUL, works inconsistently, as the attribute specifies the default
value. To access or modify the current values, you should use the
properties. For example, use elt.value instead of
elt.setAttribute('value', val).
Did you make sure you close the <script> tag? I can't really see a problem with your code that you posted, so either you didn't close your tag, or your optionen or options variables aren't there or valid
Also too, you should know that chrome has a javascript console that should show you any errors you have. To open it, it's ctrl-shift-j. That should help you a lot.

Android WebView JavaScript onClick Bug

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.

How can I make Jquery code work in IE

I have a script for display of Google suggestions. The script also allows to come down in the suggested list using the arrow keys. When you do so the "text" is filled within the input field. The code for this is:
$("#inp").live("keyup", function(e) {
var search_terms = $("li.current").text();
if(e.keyCode==40)
{
$("#inp").val(search_terms);
}
if(e.keyCode==38)
{
$("#inp").val(search_terms);
}
});
The complete script is over here: jsbin
The problem is that IE8 does not support "oninput" so first of all please test this in IE and replace "oninput" with "onpropertychange" which is an IE only event (so it seems) After doing that you will notice that the script does not respond proper when coming down in the suggestion list. However if you remove the above code than all works very well. But I really need the above code to function in IE, so what should I change in order to make it work properly?
update jquery to latest version :P

Categories