ios addEventListener not working - javascript

Why does this button not work on ios? It works fine on desktop and android. It works on ios if clickHandler is defined as a regular function.
http://codepen.io/CalebEverett/pen/RRmYgx
<html>
<head>
<style>
button {
width: 150px;
height 50px;
}
</style>
</head>
<body>
<div id="testdiv">it doesn't work</div>
<button id="do">Button</button>
</body>
<script>
const clickHandler = () => {
document.getElementById("testdiv").innerHTML = "it works!"
}
document.getElementById("do").addEventListener("click", clickHandler, false);
</script>
<html>

You are using an arrow function, which is an ES6 feature.
Support for ES6 in general and arrow functions specifically is not yet widespread, and is limited to recent versions of some browsers only. Specifically, Safari does not support arrow functions on either Desktop (Mac) or mobile (iOS), but many other browsers will have the same issue (including older Android browsers, IE, etc.).
You'll have to either transpile your ES6 code to something that is supported more widely, or stick to more standard Javascript.

Related

window.customElements is undeifned in older firefox browser [duplicate]

I have this basic custom element example. It is working in Chrome, however not in Firefox. Is there a way to get it working in Firefox (without polymer but maybe some kind of polyfill)?
I also enabled the dom.webcomponents.enabled flag without any success.
Update:
Since this is solved, I created a repository, with the complete code:
https://github.com/peplow/webcomponent-example/
Custom element html file:
<template id="template">
<button id="button">Hallo</button>
<style media="screen">
button{
color:red;
}
</style>
</template>
<script>
var localDoc = document.currentScript.ownerDocument;
class toggleButton extends HTMLElement{
constructor(){
super();
this.shadow = this.attachShadow({mode: 'open'});
var template = localDoc.querySelector('#template');
this.shadow.appendChild(template.content.cloneNode(true));
this.shadow.querySelector('button').onclick = function(){
alert("Hello World");
}
}
static get observedAttributes() {return ['name']; }
attributeChangedCallback(attr, oldValue, newValue) {
if (attr == 'name') {
this.shadow.querySelector('#button').innerHTML = newValue;
}
}
}
customElements.define('x-toggle', toggleButton);
</script>
File where it is used:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="element.html">
<meta charset="utf-8">
</head>
<body>
<x-toggle name="Hello World"></x-toggle>
</body>
</html>
As of June 2018, Firefox support for Custom Elements can be enabled with the following steps
Type in the search bar about:config.
search for dom.webcomponents.shadowdom.enabled click to enable.
serch for dom.webcomponents.customelements.enabled click to enable.
Hope this helps someone out there.
UPDATE:
Now, since Firefox 63, Custom Elements are supported in Firefox by default.
Firefox has not yet shipped Custom Elements v1, which is the latest standard and is what specifies customElements.define() as the way to define an element (as opposed to v0 which used document.registerElement() and is what is available with the dom.webcomponents.enabled flag in Firefox).
Chrome is currently the only browser that supports Custom Elements v1 natively, but all other major browsers are supportive of it.
Firefox has an open bug for Custom Elements v1 support.
In the meantime, your best bet is to use the Custom Elements v1 Polyfill for browsers that don't support it. You can feature-detect Custom Elements v1 support with 'customElements' in window.

How to get started using ES6. Is it automatically enabled in Chrome?

I am writing some Javasript and I'm wondering why I have access to ES6 features automatically. Is it just enabled in Chrome? Here is some code I have... I'm surprised these backticks just work already.
$(function(){
var coin_form_wrapper = $(".coin-form-wrapper")
var add_address_button = $('.add_address_button')
var inputHTML = `
<div>
<input type="text" name="field_name[]" value=""/>
<img src="grumpy_cat.jpg"/>
</div>
`;
This is my erb file:
<html>
<head>
<title>Greeting Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="add_coins.js"></script>
<link rel="stylesheet" href="css/add_coins.css">
</head>
<body>
<div class="logo">
<img src="grumpy_cat.jpg">
</div>
<div class="coin-form-wrapper">
</div>
</body>
</html>
It's a pretty bare Sinatra app. What is going on? Why do I have access to backticks already? I am viewing the page in Chrome.
Will this fail on other browsers? How do I prevent that from happening?
Yes, some browsers have already updated their JavaScript engines to support most ES6 features.
You can learn about most of that support on https://caniuse.com/#search=ES6
You cannot however be sure which browser supports what part of ES6 at any given time, nor opt-out of it AFAIK.
The safest approach is to look at your audience's browser use and then find the common set of JS features that are common to all of them. Some browsers still in use today do not even fully support ES5.

How to target only one browser?

I would like to set a height for a div only for one browser, so it doesn't look weird in Firefox or whatever.
Here is an example:
#example {
height: 200px; <!--How can I target Safari for example?-->
height: 250px; <!--How can I target Firefox for example?-->
height: 300px; <!--How can I target IE for example?-->
width: 250px;
background-color: #FFF;
}
<div id="example">
<img src="example.png">
<p>Just some text.</p>
<p>Click here to visit www.example.com</p>
</div>
I've already tried -moz-height: 250px; but it didn't work.
navigator.appName
it will return always the same value for all browsers. I've tested on Firefox, Chrome, and Safari all browsers show Netscape. But if you want to target specific browsers you can use this code
Firefox navigator.userAgent.includes("Firefox");
Safari navigator.userAgent.includes("Safari");
Chrome navigator.userAgent.includes("Chrome");
You can use conditional comments. So you tell the code to use a certain stylesheet for a particular browser. Here's an article about it.
Here's an example:
<link rel="stylesheet" href="normal_style.css">
<!--[if IE]><link rel="stylesheet" href="ie_style.css"><![endif]-->
Note: this only works with Internet Explorer. If you want to do it for some other browser you need to use JavaScript. Here's an example of JS:
<link rel="stylesheet" id="stylesheet" href="normal_style.css">
if (navigator.appName === "Mozilla Firefox") {
document.getElementById("stylesheet").setAttribute("href", "special_style.css");
}
You can access the navigator object and get the browser.
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
Then
document.getElementById("example").style.height= y;
"y" it is a variable whose value changes depending on the browser.
For this, you can use JavaScript. There is a string that you can access called navigator.appName. You can just put this:
if(navigator.appName === "Google Chrome")
// Do whatever here
replacing Microsoft Internet Explorer with your target browser.
I really hope this helps!

Is there any reason window.matchMedia('screen') would return false in a web browser?

I am running the following code:
var hasMatchMediaSupport = (typeof window.matchMedia !== 'undefined') ? !!window.matchMedia('screen').matches : false;
Is there any reason why this check would return false? This is occurring in Firefox browsers only, across a wide variety of operating systems. One relevant detail is that this code is executing inside of an ad unit, sometimes inside of HTML5 ad units.
This happens in Windows 7, Windows 8, Windows 10, Mac OS X 10.8, and several other operating systems, with versions of Firefox ranging from 36 to 41.
Edit:
Found this bug report here and was able to replicate in Firefox 41 on Mac OS X 10.10 - matchMedia does not run correctly inside of hidden iframes.
The bug has been fixed to now return a non-null value. For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.hidden { display: none; }
</style>
</head>
<body>
<iframe class="hidden" src="data:text/html;charset=utf8;,<script>document.title = window.matchMedia('screen').matches;alert(document.title)</script>" height="200" width="200"></iframe>
</body>
</html>
References
MIME types - HTTP | MDN
Dev guide - Media query listeners - Microsoft Edge Development | Microsoft Docs

Why can't I bind to a click event from a css class in IE 7-8?

Why doesn't this JavaScript work in Internet Explorer 7-8? All I am trying to do is wire up the 'click' event for multiple DIVs by using jQuery to select the DIVs by class name.
It works in Firefox, Chrome, Safari. In IE, it will only work in Browser Mode: IE 9 / Document Mode: IE 9 standards". Can't get it to work in IE 7 or 8.
<!DOCTYPE html>
<head>
<title>IE Click Target Test</title>
</head>
<body>
<div class="ClickTarget">Button 1</div>
<div class="ClickTarget">Button 2</div>
<!-- load jQuery 1.6.4 from CDN -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="application/javascript">
// This works fine in all browsers except IE pre-9.
$(document).ready(function () {
$(".ClickTarget").click(function () {
alert("If you can see me, it worked!");
});
});
</script>
</body>
</html>
Normal disclaimers: I wouldn't HAVE to use jQuery for this example, but it illustrates a problem I am having with a larger solution that does use jQuery 1.6.4. IE is often quirky, I've had to deal with it many years, but that's life.
For some reason, maybe the impending holiday, I'm overlooking something. Any ideas why I can't register the click in IE?
I think it's the type="application/javascript" in your <script> tags -
"text/javascript" is the only type that is supported by all three
browsers. However, you don't actually need to put a type. The type
attribute of a script tag will default to "text/javascript" if it is
not otherwise specified. How that will affect validation, I'm not
sure. But does that really matter anyway?
From - Why doesn't IE8 recognize type="application/javascript" in a script tag?
Try changing script tag's type attribute to text/javascript it should work fine in all the browsers.
As Shankar said originally, it's your script type not being "text/javascript"
I tried this JSFiddle in IE8 and worked fine for me.
http://jsfiddle.net/Nna2T/
This is not an answer but comments can't format code, so just an FYI...
This:
$(document).ready(function () {
...
});
Can be shorted to just:
$(function() {
...
});

Categories