We Keep Coding

leaflet remove layer is not working in internet explorer 11 using javascript

I use below script to update my image dynamically, its working fine in chrome and Edge but in internet explorer new image get added unable to remove old image, no error in console.
In below script its passing this condition if(oldhandle != null && map.hasLayer(oldhandle ))
var layerHandle;
var map;
function updateLayer(){
var bounds=XXX;
var imageUrl=XXX;
var oldhandle = layerHandle;
layerHandle = L.imageOverlay(imageUrl, bounds).on("load",function(){
if(oldhandle != null && map.hasLayer(oldhandle ))
map.removeLayer(oldhandle);
});
layerHandle.addTo(map);
}

I have the same problem, however I resolved my issue like this:
var map;
function updateLayer(){
var bounds=XXX;
var imageUrl=XXX;
var imageName="myImage";
layerHandle = L.imageOverlay(imageUrl, bounds, {className:imageName}).on("load",function(){
});
removeMyLayer(imageName);
layerHandle.addTo(map);
}
function removeMyLayer(imageName){
map.eachLayers(function(layer){
if(layer.options && layer.options.className==imageName){
map.removeLayer(layer);
}
})
}

How to set cursor position at the end of input text in Google Chrome

I'm trying to set the cursor in a text field with a focus function. I've made some research but none of the provided solutions seemed to work in Google Chrome. In Internet Explorer and Firefox this solution is working fine:
The js:
$('#Search').focus(function() {
var SearchInput = $('#Search');
var strLength= SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});
The HTML:
<input type="text" id="Search" value="Hello World" />
Here's the link to my jsfiddle.
Is there any way to make this work in Google Chrome too?

It seems like the focus event is fired before the cursor is placed when you focus an input, a hacky workaround would be to use a setTimeout like so:
$('#Search').focus(function() {
setTimeout((function(el) {
var strLength = el.value.length;
return function() {
if(el.setSelectionRange !== undefined) {
el.setSelectionRange(strLength, strLength);
} else {
$(el).val(el.value);
}
}}(this)), 0);
});
Try this fiddle: http://jsfiddle.net/esnvh/26/
Edited to 0ms timeout, as #SparK pointed out this is enough to push to end of execution queue.

Updated code
Reference: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
setSelectionRange is not supported on IE, Opera & Safari
I suggest you to make something like this (works on IE, Chrome, Safari, Firefox).
$('#Search').on('mouseup', function() {
var element = $(this)[0];
if (this.setSelectionRange) {
var len = $(this).val().length * 2;
element.setSelectionRange(len, len);
}
else {
$(this).val($(this).val());
$(this).focus();
}
element.scrollTop = 9999;
});
Try this: http://jsfiddle.net/r5UVW/4/

Use mouseup event for that:
$("#Search").mouseup(function () {
this.setSelectionRange(this.value.length, this.value.length);
});

Without jQuery :)
private focusOnLastInput(): void {
const items = this.fields.querySelectorAll('input');
const lastInput = items[items.length - 1];
const valueLength = lastInput.value.length;
lastInput.focus();
lastInput.setSelectionRange(valueLength, valueLength);
}

FYI, currently the number input doesn't support setSelectionRange(), so a quick solution is to simply select the text using .select(). On desktop browsers this highlights the text, on mobiles this moves the cursor straight to the end of the text.

Show a message if the browser is not internet explorer 9 or greater

I would like to show my users a bar that looks like this, if:
Browser is not IE; or
Browser is IE but is version 8 or earlier
(Note that the screenshot is just for illustration - IE 9 is supported for my site.)
I found this nice jQuery plugin, but I don't want to use popups.
http://jreject.turnwheel.com/
The site where I will implement this is a Sharepoint 2013 site, so I will use a content editor webpart to include the HTML content you provide and the bar should be at the top of everything else.
Please include CSS if needed to make it look as the screenshot?

HTML
IE 9 and earlier (down to, I think, IE 4) can be identified using conditional comments in HTML.
As #Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:
<!--[if lte IE 8]>
BANNER HERE
<![endif]-->
However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.
jQuery
jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.
if ( !$.browser.msie || $.browser.version < 9 ) {
// Add banner to the page here.
}
Browser Detection in general
Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.
These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.
As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.
If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.

I found the question interesting. So i worked out a script for myself, but maybe someone else can benefit from it. So that's why I posted it as an answer. It returns an object with browser and OS information.
browser = {};
if (/edge\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "edge";
browser.majorVersion = parseInt(/edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "chrome";
browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "firefox";
browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "opera";
browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = 11;
browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
browser.agent = "safari";
browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
browser.agent = false;
browser.majorVersion = false;
browser.version = false;
}
if (/Windows\ NT/.test(navigator.userAgent)) {
browser.os = "windows";
var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
switch(winver) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
case 6.3:
browser.osversion = "8.1";
break;
case 10.0:
browser.osversion = "10";
break;
default:
browser.osversion = false;
}
} else if (/OS\ X\ /.test(navigator.userAgent)) {
browser.os = "os x"; //
browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "linux";
browser.osversion = false;
}

EDIT: This directly answers the OP.
I have updated Dany's answer with two updates tested in (IE 6,7,8,9,10,11), Chrome, and Edge. Primarily because the updates are very hard to read in the comments.
Pure javascript - No jQuery required
IE10 reports IE 10 vs IE 1
This now reports Edge
No specific HTML elements required to pre-exist (other than a body)
Tested in IE6, IE7, IE8, IE9, IE11, Chrome v62, and Edge
TODO: get it working properly in OSX Sierra, and iPhone
The test for edge must be first as it claims to be everything. :/
All this being said Browser detection "is what it is" and we can hope that the need for it will go away soon.
browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
browser.agent = "MSIE";
browser.version = 11;
} else {
browser.agent = false;
browser.version = false;
}
if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "Windows";
switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
default:
browser.osversion = false;
}
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "OS X";
browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "Linux";
browser.osversion = false;
}
if (browser.agent === "MSIE" && browser.version <= 9) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
document.body.insertBefore(newDiv, document.body.firstChild);
}

I like the simple conditional html. (Simpler always seems better.)
Another more comprehensive javascript alert can be found at: http://www.browser-update.org

Checking if browser engine is Trident 6+ (IE 9, 10, 11) should do (demo):
(function () {
var trident = {
string: navigator.userAgent.match(/Trident\/(\d+)/)
};
trident.version = trident.string ? parseInt(trident.string[1], 10) : null;
if (!trident.string || trident.version < 6) {
document.body.innerHTML = '<div class="alert">Not supported.</div>' +
document.body.innerHTML;
}
})();
However, the sniffing may break in IE 11 final or future versions if Microsoft will decide to change userAgent string.

You could use conditional compiling in conjunction with conditional comments
Here a short overview of how this could work.
Always show the bar
Set a flag in javascript. IEMinor=false
Set the flag to true if IE <= 9, by using a script tag and conditional comments
Use conditional compiling to hide the bar if #_jscript_version > 9 (actually not needed) and IEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
/*#cc_on #*/
/*#if (#_jscript_version > 9)
if (!IEMinor)
document.getElementById("bar").style.display = "none";
/*#end #*/
</script>
I was too lazy to add the script type...
Here is an example on JSBin which doesn't show the bar in IE 10+ (untested). And shows it in other cases.
Note: I didn't make it look exactly like in the screenshot, you should get that part working
Edit: Using the browsermode of IE to test against IE<10 seems to work
Edit2: Whoops i thought from the picture IE9 is unsupported too, to allow IE9 change lte IE 9 to lt IE 9 and #_jscript_version > 9 to >= 9

Actually in SharePoint (OP mentioned that) there is a built-in variable browseris. It's available in the global window scope. Answering OP question:
Browser is not IE;
use browseris.ie
Browser is IE but is version 8 or earlier
use browseris.ie8down
(tested in SP2013 on-prem)

This is tested for IE 10 and 11. Head on to this link for more description.
<div id="noSupport"></div>
<script>
function isIE() {
return /Trident\/|MSIE/.test(window.navigator.userAgent); // IE 10 and IE 11
}
if (isIE()) {
document.getElementById('noSupport').innerHTML = 'IE not supported'
}
</script>

check this code, its working as expected.
if (navigator.userAgent.includes('Trident')) {
alert('This site is not supported by your Internet Explorer, please use Microsoft Edge or Google Chrome.');
}

I don't suggest you to use client side as some browsers might trick you by passing wrong values to pass website tests.
So i guess your using PHP as a server side you can detect the browser using the get_browser() function that give you a lot of information about the browser here is a nice turtoeial:
Part 1:
http://thenewboston.org/watch.php?cat=11&number=67
Part 2:
http://thenewboston.org/watch.php?cat=11&number=68
if your using another language all server side language has this functunality just google it or reference some sort of a turtorial
From the client side you can detect if it is compatible like that:
function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById('test').style.borderRadius;
if(browser !== 'Microsoft Internet Explorer'){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert('Compatible');
}else{
alert('uncompatible');
}
HTML:
<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->
FIDDLE:
Test it and it works:
http://jsfiddle.net/Z7fvb/

JQuery Code works in Firefox, Opera but not working in Chrome and IE

I have the following code which works in Firefox-20 and Opera but not in Chrome-26 or IE-10. The keyup functions adds Indian commas to the amounts.
$(document).ready(function() {
$("#readyArea").on('change', function() {
$("#underConstArea").val($(this).val()).trigger('change');
});
$('.comma').on('keyup', this, function commaFormatted(){
var delimiter = ","; // replace comma if desired
var amount = $(this).val().replace(/\,/g,'');
var a = amount.split('.',2);
var d = a[1];
var i = parseInt(a[0],10);
if(isNaN(i)) { return ''; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
var n = new String(i);
var a = [];
var cnt=0;
while(n.length > 2)
{
if(cnt == 0)
{
var nn = n.substr(n.length-3);
n = n.substr(0,n.length-3);
cnt++;
}
else
{
var nn = n.substr(n.length-2);
n = n.substr(0,n.length-2);
}
a.unshift(nn);
}
if(n.length > 0)
{
a.unshift(n);
}
n = a.join(delimiter);
amount = n;
amount = minus + amount;
$(this).val(amount);
});
});
Here is the JSFiddle link. (As I said if I open this link in Firefox or Opera the js works but not in Chrome or IE). There are no js errors on the console either. Do I need to do something specific for Chrome and IE?
EDIT
Just to clarify, it is the onChange event that is not firing in Chrome and IE. The same is firing in Firefox and Opera.

I tested on Chrome, and the commas did fine, but I never saw the underConstArea update, while I did see it do so on Firefox after leaving the textbox.
I'm not sure what is happening there, but I have several ways of fixing it.
First, it seems that whether $("#readyArea").on('change') fires is browser dependent. I don't know why, but it seems that Chrome doesn't throw a change event when you're changing the code. Maybe it's trying to avoid an infinite loop of changes; I'm not really sure.
If you're happy with the underConstArea only updating when the number is done (as it behaves in firefox), you can do so on focusout instead of on change. I changed your top lines to
$("#readyArea").on('focusout', function() {
$("#underConstArea").val($(this).val());
});
and it worked fine for me in Chrome and Firefox. Here's an updated fiddle.
Alternatively, if you want it to update every time the user types, just update underConstArea within your commaFormatted function. Just add
$("#underConstArea").val(amount);
at the bottom of your function.
And the link to the second option I offered. Note that I removed any event catching on #readyArea.

Get control properties with javascript in firefox

I'm trying to access control's properties and although it works great in IE6, in FF3, it fails. I'm doing:
alert(document.getElementById(gridViewCtlId).style.display);
alert(document.getElementById(gridViewCtlId).style);
And the first one shows a blank popup while the second shows 'undefined'.
I do
alert(document.getElementById(gridViewCtlId).id);
and I get the proper ID of the box along with:
alert(document.getElementById(gridViewCtlId));
and I get that in an HTML table.
This works perfectly in IE but not FF. What do I need to do to get this functioning?
Edit: gridViewCtlId is defined as:
var gridViewCtlId = '<%=GridView.ClientID%>';
Here is the full code:
var itemVisible= '<%=ItemVisible.ClientID%>';
function onGridViewRowSelected(rowIdx)
{
alert(document.getElementById(gridViewCtlId).style.display);
alert(document.getElementById(gridViewCtlId).style);
if (document.getElementById(gridViewCtlId).disabled == false)
{
alert("hi1");
var selRowCCA = getSelectedRow(rowIdx);
if (curSelRow != null)
{
alert("hi2");
var previousRow = getSelectedRow(previousRowIndx);
var CountIdx = previousRowIndx % 2;
if (document.getElementById(itemVisible) == null)
{
if (CountIdx == 0)
{
alert("hi");
previousRow.style.backgroundColor = 'Silver';
}
else
{
previousRow.style.backgroundColor = 'White';
}
}
}
if (null != selRow)
{
alert("new");
previousRowIndx = rowIdx;
curSelRow = selRow;
selRow.style.backgroundColor = 'Red';
}
}
}
It's pretty much an onClick where I have to call that function to turn it back to its original color (using alternating color rows). IE, this works fine. If i do the first alert
alert(document.getElementById(gridViewCtlId).disabled);
I would get either true or false.
The reason it's like this is because someone is going to enter something in a text box and the first gridview is going to populate depending on whats in that textbox. Then when someone selected something in the first gridview, that gridview is going to become disabled and then populate a second. So i'm having an issue checking for the disabled part of the gridview.

<div id="test">
</div>
<script type="text/javascript">
var gridViewCtlIdCCA = 'test';
alert(document.getElementById(gridViewCtlIdCCA).style);
</script>
Alerts [object CSSStyleDefintion] in Firefox 2 and 3.
If .style where undefined, .style.display would produce an error, not alert an empty dialog (unless you are capturing window.onerror).
Can you create an SSCCE that demonstrates the problem. More information about SSCCE available here.