We Keep Coding

Javascript startsWith not working on iPhone and IE

I'm getting the following error ONLY on mobile Safari and IE.
TypeError: undefined is not a function
The offending code is:
if(window.location.origin.startsWith(shopAddress + "/account/login") &&
sessionStorage.getItem('loggedIn') == "true")
This works beautifully in Chrome and Firefox. Any idea why Safari & IE don't like it?

you can add following polyfill
if(!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position){
return this.substr(position || 0, searchString.length) === searchString;
};
}

How do I detect popup blocker in Chrome?

I have searched many issue in stack overflow and might be duplicate here Detect Popup
But not helped for me while testing in Chrome (tested v26.0.1410.64)
Following Approach Worked in IE and Firefox but not in Chrome
var popup = window.open(winPath,winName,winFeature,true);
if (!popup || popup.closed || typeof popup.closed=='undefined'){
//Worked For IE and Firefox
alert("Popup Blocker is enabled! Please add this site to your exception list.");
window.location.href = 'warning.html';
} else {
//Popup Allowed
window.open('','_self');
window.close();
}
Any better solution that works for Chrome also?

Finally, it success by combining different answer from Stackoverflow's member
This code worked for me & tested in IE, Chrome & Firefox
var popup = window.open(winPath,winName,winFeature,true);
setTimeout( function() {
if(!popup || popup.outerHeight === 0) {
//First Checking Condition Works For IE & Firefox
//Second Checking Condition Works For Chrome
alert("Popup Blocker is enabled! Please add this site to your exception list.");
window.location.href = 'warning.html';
} else {
//Popup Blocker Is Disabled
window.open('','_self');
window.close();
}
}, 25);

Try Below..!!
var pop = window.open("about:blank", "new_window_123", "height=150,width=150");
// Detect pop blocker
setTimeout(function() {
if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0 || pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150){
pop && pop.close();
alert("Popups must be enabled.");
}else{
alert("Popups is enabled.");
pop && pop.close();
}}, 1000);
Look on below question
Detect blocked popup in Chrome
How do I detect whether popups are blocked in chrome
On Google It will more help you..
https://www.google.com/search?q=how+to+detect+a+blocked+popup+in+chrome

I found it much more effective to use try-catch as follows:
var popup = window.open(winPath,winName,winFeature,true);
try {
popup.focus();
} catch (e) {
alert('popup blocked!');
}

I know this is "resolved", but this simple code worked for me detecting "Better Popup Blocker" extension in Chrome:
if (!window.print) {
//display message to disable popup blocker
} else {
window.print();
}
}
Ockham's razor! Or am I missing something and it couldn't possibly be this simple?

I had used this method to open windows from js and not beeing blocked by Chrome.
http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/

The below code works in chrome,safari and firefox. I have used jquery for this.
var popupWindow = window.open("http://www.google.com","directories=no,height=100,width=100");
$(document).ready(function(e) {
detectPopup();
function detectPopup() {
if(!popupWindow) {
alert("popup will be blocked");
} else {
alert("popup will be shown");
window.open('','_self');
window.close();
}
}
});

Cross browser paste capture - Mac Opera issues

I'm working on a cross browser paste capture. I've got this working & tested in Chrome and Firefox (on a mac). It should work on Chrome and Firefox on a PC as well but I have not had a chance to test it yet. Hopefully I'm not reinventing the wheel, I've looked for a good bit for a jQuery plugin or any javascript really that implements document-wide pasting.
This is not yet working in Opera (version 11.52) (on a mac, haven't tested on a PC). My issue is that when the cmd key is pressed, when I press the v key I do not get a keydown event. I'm not sure how to fix the issue as I'm not very framilar with Opera.
Work-in-progress jsfiddle is here.
The javascript below will not work as is, please see the jsfiddle for a working script. To make the script below work you need this os detection plugin.
Question to answer - How do I make this work in Opera?
Comments to leave if you like - Does this work for you? (post browser, os versions in comment)
update - Based on the comment Baez left this is a Opera on mac only issue.
update2 - I've updated the jsfiddle, its simplified the code a bit but still can't get it to work in mac Opera.
javascript (jquery)
$(document).ready(function() {
// Fake paste
var doFakePaste = false;
$(document).on('keyup', function(e) {
$('#status').html('');
if (($.client.os === "Mac" && e.which == 86 && e.metaKey) ||
($.client.os !== "Mac" && e.which == 86 && e.ctrlKey)) {
doFakePaste = false;
$('#paste').blur().remove();
}
}).on('keydown', function(e) {
$('#status').html('which: ' + e.which);
if (($.client.os === "Mac" && e.which == 86 && e.metaKey) ||
($.client.os !== "Mac" && e.which == 86 && e.ctrlKey)) {
doFakePaste = true;
// got a paste
$('<div></div>').attr('contenteditable', '').attr('id', 'paste').appendTo('body').on('paste', function(e) {
setTimeout(function() {
doFakePaste = false;
var html = $('#paste').html();
var text = $('#paste').text();
$('#resultA').text(html);
$('#resultB').text(text);
$('#paste').blur().remove();
}, 1);
}).focus();
}
});
$('#data').html('os: ' + $.client.os + ' browser: ' + $.client.browser);
});
html - Again see the jsfiddle for a working copy
<p>Click in this window and do a paste (ctrl-v or cmd-v). The pasted text will show up in the boxes below. I hope... the left box will be the HTML and the right box will be the TEXT.</p>
<div id="status"></div>
<div id="data"></div>
<div id="resultA"></div>
<div id="resultB"></div>

Not full answer, but part of my experience:
You can remove $.client.os and use e.which == 86 && (e.metaKey || e.ctrlKey)
You binded event on document. Bind event on div[contenteditable="true"] - may be it helps
Your code: attr('contenteditable', ''). contenteditable can be true, false and inherit ( = get value from parent )

How to detect Firefox mobile with javascript?

I'm using the following code to detect whether the browser being used on my mobile site matches a certain crieteria:
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
if (isiPhone){ alert ('iphone');
but if I attempt to do this for Firefox / Mozilla, I can't get it to work. I've tried:
var isFirefox = navigator.userAgent.match(/Mozilla/i != null);
and
var isFirefox = navigator.userAgent.match(/Firefox/i != null);
I visited whatismyuseragent.com and got the following:
Mozilla/5.0 (Android;Linux armv7l; rv6.0) Gecko/20110811 Gecko Firefox/6.0 Fennec/6.0
Any idea how I properly detect this? I need to write some firefox specific code.

You can use the navigator.userAgent to detect the browser and navigator.platform to detect the current platform.
To Detect Firefox:
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
To Detect Android:
var is_android = navigator.platform.toLowerCase().indexOf("android") > -1;
To Detect Both:
if(is_firefox && is_android)
//Do Work
I would recommend using something like modernizr to avoid browser detection and focus on feature detection.

var isFirefox = /Android.+Firefox\//.test(navigator.userAgent);

The mobile version of Firefox is Fennec, so just search for that:
var is_Firefox = navigator.userAgent.toLowerCase().indexOf('fennec') > -1;

None of the above functions were working for me, specifically buriwoy was detecting either android or firefox, this version of his function works:
function detectAndroidFirefox () {
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') >= 0){
if(agent.indexOf("android") >= 0){
return true;
} else{
return false;
}
} else{
return false;
}
}

you can check from user agent if it's contain firefox or android, for this maybe you need some code with regex

Rion's answer doesn't work (at least anymore), because navigator.platform doesn't return Android, it returns Linux.
I wrote a function which seems to work:
function detectAndroidFirefox () {
var agent = navigator.userAgent.toLowerCase();
return (agent.indexOf('firefox') + agent.indexOf("android")) >= 0;
}
Thought maybe someone will need this.

Firebug: Track what script or line of code, which made changes

Is it possible to track what script or what line of code, that ex. set a width on an element?
//KennethBL

On IE you can use the onpropertychanged event to fire an event when the width element is fired.
On IE 9, Chrome and FF you can use the DOMAttrModified:
var elm = document.getElementById ("targetElemntId");
if (elm.addEventListener) { // all browsers except IE before version 9
elm.addEventListener ('DOMAttrModified', checkProperty, false); //FF, Opera, IE
}
if (elm.attachEvent) { // IE & Opera
elm.attachEvent ('onpropertychange', checkProperty); // IE
}
function checkProperty(event) {
var name = event.attrName ? event.attrName : event.propertyName;
if(name == "width") {
alert("width changed");
}
}
Don't know how you would achieve this on chrome though.