We Keep Coding

IE doesn't recognise Javascript Class and breaks

I wrote some Javascript code that works perfectly in all major browsers. Of course I made sure that none of this would be executed by Internet Explorer by creating a function that figures out what browser the user is using.
Here's the problem however: Even if I told IE not to execute the code, the browser still reads all of my Javascript and since it finds something it doesn't recognise it stops running any other Javascript.
The only thing I could think of doing was creating a function that would return if the user is using IE, but that doesn't seem to work since I think the problem comes from IE initially parsing my script and not being able to understand modern JS syntax.
Here's a simplified version of my code:
class Section {
constructor(dom, startPosition, endPosition, backgroundPosition) {
this.dom = dom;
this.startPosition = startPosition;
this.endPosition = endPosition;
this.backgroundPosition = backgroundPosition;
}
}
function isIE() {
ua = navigator.userAgent;
/* MSIE used to detect old browsers and Trident used to newer ones*/
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
return is_ie;
}
let sections = [];
function sectionParallax() {
if (!isIE()) {
sections.push( new Section("test", 123, 123, 123))
}
}
IE's console reports:
SCRIPT1002: Syntax error
On class Section.
I'm completely out of ideas on what to do here. How do I make sure IE doesn't load this part of the code?

JavaScript classes and constructor not support IE browser, so, in the IE browser, it will show the "SCRIPT1002: Syntax error" error.
You could modify your code as below:
var Section = /** #class */ (function () {
function Section(dom, startPosition, endPosition, backgroundPosition) {
this.dom = dom;
this.startPosition = startPosition;
this.endPosition = endPosition;
this.backgroundPosition = backgroundPosition;
}
return Section;
}());
function isIE() {
ua = navigator.userAgent;
/* MSIE used to detect old browsers and Trident used to newer ones*/
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
return is_ie;
}
var sections = [];
function sectionParallax() {
if (!isIE()) {
/*If not using IE browser. */
var newsection = new Section("test", 123, 123, 123);
sections.push(newsection);
}
}

The JS parser has to parse the JavaScript you tell it to load, even if it is a function that never executes.
If you want to stop IE from loading it, then don't load the <script> which contains it. This means you need to dynamically add the <script> if the browser does support the feature.
If you need to support IE, then don't deliver JS to the browser that uses syntax IE doesn't recognise. Consider using a tool like Babel to transpile it to an older version of JavaScript which IE does support.

You could check for IE before loading the script with a Conditional Comment :
<!--[if !IE]>-->
<script src="script.js"></script>
<!--<![endif]-->

Check for "-ms-expand" support

i'm trying to make a little script to style "select" tags in my html testing for the support of the "appearance" style property:
if ("webkitAppearance" in select.style ||
"MozAppearance" in select.style ||
"oAppearance" in select.style ||
"appearance" in select.style ||
"-ms-expand" in select.style) {
return;
}
// else apply wrapper and style it.
The problem is that i don't know how to check for -ms-expand property, because it's not working and i don't want to user browser version sniffing in this case.

You can't check -ms-expand in javascript, because it is pseudo-element, and it do not affect to content. You can't detect it like ::before/::after in Modernizr, but -ms-expand is enabled in IE 10+, so better will be to detect is IE 10 or higher by javascript:
Detection IE 11:
!window.ActiveXObject && "ActiveXObject" in window
Detection IE 10:
var isIE10 = false;
/*#cc_on
if (/^10/.test(#_jscript_version)) {
isIE10 = true;
}
#*/

Not the most optimal solution in terms of performance, but you could try this:
var expandSupport = (function(){
try{
var style = document.createElement("style");
style.textContent = "#ie10-test::-ms-expand{ }";
document.body.appendChild(style);
var supported = !!style.sheet.rules.length;
document.body.removeChild(style);
return supported;
} catch(e){ return false; }
}());
document.body.appendChild(document.createTextNode(expandSupport ? "Your browser appears to support the -ms-expand pseudo-element" : "Your browser doesn't appear to support the -ms-expand pseudo-element"));
Fiddle here.
The reason this works is because browsers will discard any selectors they don't support or can't interpret, which means any browser that doesn't understand what the "::-ms-expand" pseudo-element is probably isn't IE10 or up.
Essentially, all that this code is doing is creating a dummy <style> tag, adding a ruleset that only IE10+ is expected to support, and reporting back the number of rules found in it.

Substitute for ALLOW_KEYBOARD_INPUT javascript full screen

I have been searching on the internet for a reason why my fullscreen javascript doesn't work in Safari, but yet works in webkit browser Chrome. It seems to that safari doesn't support the element.ALLOW_KEYBOARD_INPUT add-on for webkitRequestFullScreen.
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen(el.ALLOW_KEYBOARD_INPUT) || el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFull() {
var elem = document.body; // Make the body go full screen.
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen(document);
} else {
requestFullScreen(elem);
}
return false;
}
Does anybody know a way to make safari accept fullscreen yet still be able to handle keyboard inputs?

According to Apple's documentation, this is supposed to work in Safari 5.1 and later, but obviously it doesn't. I filed a bug report with Apple (which they don't make public), and the reply was as follows:
Engineering has determined that this issue behaves as intended based on the following:
We intentionally disable keyboard access in full screen for security reasons.
I have replied asking that they at least update the documentation and make the lack of feature support detectable somehow. I will update here if I get a reply.
Unfortunately, there isn't a good way to even do feature detection, since element.ALLOW_KEYBOARD_INPUT is defined in Safari, and the function call with that flag doesn't throw an error. The only remaining option is to parse the user agent string (try this library).
Obviously, Apple doesn't yet document which version supports this, but according to this, it stopped working as of v5.1.2. That would leave a very small number of people using 5.1 un-patched, if it ever even worked at all. So it's probably not even worth detecting the version.
As a fallback, I would expand the desired DOM element to fill the browser window by setting CSS height and width to 100% and position to "fixed" or "absolute".
Update: It looks like the documentation has been corrected and no longer mentions the ALLOW_KEYBOARD_INPUT flag.

This has been fixed in Safari 10.1!
Under the "Safari Browser Behavior" section.

Class Name not getting changed in IE 7, 8 and chrome

I am trying to change class name of two elements during onload.
Here is my code for the same :
var browserName=navigator.appName;
var tfElem = document.getElementById("TTlExpct");
var blTfElem = document.getElementById("BTLExpct");
if (browserName=="Microsoft Internet Explorer")
{
tfElem.className ="pn-tf";
blTfElem.className ="pn-tf active";
}
else
{
tfElem.setAttribute('class', 'pn-tf');
blTfElem.setAttribute('class', 'pn-tf active');
}
The else block takes care of the code if its not IE, in mozilla, this is working fine, class name is getting set.
Its not working in IE7 and IE8
and
in chrome, it works only if i reload the page again.
Any help will be appreciated .

There is a bug in the implementation of setAttribute in old versions of IE. In newer versions of IE that bug may be emulated if you do not use a Doctype that triggers standards mode.
Replace:
foo.setAttribute('class', value);
With:
foo.className = value;
Do this everywhere. Don't try to do browser detection. All browsers that support setAttribute('class', value) also support foo.className = value.
The code in your question should be rewritten as:
var tfElem = document.getElementById("TTlExpct");
var blTfElem = document.getElementById("BTLExpct");
tfElem.className ="pn-tf";
blTfElem.className ="pn-tf active";

The select box dynamic add option not working in firefox3.6

I am having the below code for population the select box dynamically.THis works fine in all browsers except FireFox 3.6
var option25 = document.createElement("option");
option25.text = '25 miles';
option25.value = 25;
if(rad == '25')
{
option25.selected = 'selected';
}
var combo = document.getElementById('ddlProximity_' + controlId);
combo.add(option25); //not working in FF3.6
Any suggestions

The add method on select elements takes two arguments in Gecko versions older than 7 (MDN).
In IE it only takes one argument, or two if it's IE 8 in IE 8 standards mode, or something MSDN.
If we take krg's code and check the arity before calling add it works in Firefox 3.6.28, Firefox 15.0.1, and IE 9:
if (typeof combo.add === 'function') {
if (combo.add.arity === 1) {
combo.add(option25);
} else {
combo.add(option25, null);
}
} else if (typeof combo.appendChild === 'function') {
combo.appendChild(option25);
}
​

Assuming combo is a select menu, see this jsFiddle example.
if (typeof combo.add === 'function') {
combo.add(option25);
} else if (typeof combo.appendChild === 'function') {
combo.appendChild(option25);
}
​

If you would like to ensure that your JS code works across a wide spectrum of browsers, I would use a JavaScript framework such as jQuery to perform the DOM manipulation. JS frameworks have worked out most of the cross-browser problems and abstracted away the handling of them, so that you don't have to worry about writing code to address problems in a specific browser. Here's jQuery's site: http://jquery.com/.
Now to accomplish what your example says in jQuery, you would do the following:
var option25 = $('<option>').val(25).text('25 miles');
if (rad == '25') {
option25.attr('selected', 'selected');
}
var combo = $('#ddlProximity_' + controlId);
combo.append(option25); // Will work in all browsers supported by jQuery
If you really want to do this without any JS frameworks, I would take a look here: http://www.w3schools.com/jsref/met_select_add.asp . The add method should work, but there are some caveats in IE versions prior to 8 and your page must have a proper DOCTYPE declaration. You can also try appendChild, but I would test it in a few browsers to see if that accomplishes what you need.