This question already has answers here:
Detect if any kind of IE (MSIE) [duplicate]
(6 answers)
Closed 4 years ago.
Do you know a script for notices or warnings only for internet explorer users?
I need to show a warning only for users in this specific browser.
Please, Can you help me?
I had to do this problem a while back. I ended up using javascript since support for conditional comments was dropped: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
My solution ended up looking like this:
<style>
#ie-banner {
display: none;
/* other styling */
}
</style>
<div id="ie-banner">
<div id="ie-message">
<h5>INCOMPATIBLE BROWSER</h5>
</div>
</div>
<script>
function isOldIE(userAgent) {
var msie = userAgent.indexOf('MSIE');
if (msie > 0) {
// IE 10 or older
return true;
}
// other browser, IE 11, or Edge
return false;
}
if (isOldIE(navigator.userAgent)) {
var ieWarning = document.getElementById('ie-banner');
ieWarning.setAttribute('style', 'display: block;');
// drop off my react app below
// var root = document.getElementById('root');
// document.body.removeChild(root);
}
</script>
Note that I remove the child like that and use older DOM apis because more standards methods simply don't work on IE... big surprise.
If you only care about IE9 and down, then I probably would just use conditional comments. Straight from the link above:
<html>
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
</html>
Related
As Foundation 5 does not support IE8, I am showing a warning message to upgrade the browser with CSS (display:inline;) in conditional tags <!--[if lt IE 9]>, which is hidden on all other browsers (display:none;).
This works as intended. The markup of the message is placed in the body:
<div id="ie8warning" class="ie8warning">
<div>This site does not support <b>Internet Explorer 7 and 8.</b>
<div id="closewarning">×</div>
</div>
</div>
Now, the message contains a small 'X' (<div id="closewarning">×</div>), which should close the window, when it is clicked. I wrote the following JavaScript, which works in all modern browsers. However, the onclick-event is obviously not recognized in IE9 and below. IE9 is not important as the message will not show up, but IE8 and below are essential:
function closeWarning() {
var ie8Warning = document.getElementById('ie8-warning');
ie8Warning.style.display = 'none';
}
var ie8Button = document.getElementById('closewarning');
ie8Button.onclick = closeWarning;
Would appreciate your advice how to get this working in pure JavaScript.
IE8 is a HTML4 browser, hyphens in ids are not allowed. An id in HTML4 browsers can contain any alphanumeric string that begins with a letter. The underscore (_) can also be used.
Currently I'm using jQuery.browser to detect IE7 and lower
if ($.browser.msie && parseInt($.browser.version) <= 7) {
//codes
}
but jQuery.browser was deprecated in jQuery 1.3 and removed in jQuery 1.9, I read from jQuery website that we should use feature detection instead (jQuery.support).
So, how to detect IE7 and lower using jQuery.support?
The best way is to use conditional comments and check it using jQuery's hasClass().
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
And in your jQuery, check for IE 7:
// Check IE 7
if ($('html').hasClass('ie7');
This method cannot be spoofed no matter what. Also see: Conditional Stylesheets by Paul Irish.
This small function will tell you whether the button code is broken:
function isButtonBroken()
{
var b = document.createElement('button');
b.value = 1;
b.appendChild(document.createTextNode('2'));
return b.value === '12';
}
jQuery.Support does not give you the browser. As of jQuery 1.9 the $.browser function is deprecated. If your after a quick was the easiest way is to use the browsers native navigator object.
//check for IE7
if(navigator.appVersion.indexOf("MSIE 7.")!=-1)
Using Modernizr
//check for IE7 or less
if ($('html').hasClass('lt-ie7');
This is not recommended however as the browser can easily "spoof" this object. Using a library such as Moderizer to feature detect is modern approach. For more details info see: 5+ WAYS TO CHECK IE VERSION USING JAVASCRIPT/JQUERY
As others have said trying to detect a browser version is a bad idea and you should rely on feature detection.
That said the only reliable way to detect an IE browser rendering engine is using conditional comments. You can use this little snippet that'll get it for you:
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
Keep in mind that this will only work in IE versions supporting conditional comments and it will not work in IE10 or above.
A no script solution can be based on giving the button a type of submit and a name that is the value you want to submit. Then, at the server, make the action dependent on the value of the name attribute, not the value, e.g.
<button type="submit" name="whatever" value="Click me 0">Click me 0</button>
Now every browser will submit the button as &whatever=Click+me+0. I don't have IE 7 to test with, but from what you've posted, that should work.
If you have multiple buttons in the form, only the one that is clicked to submit the form will be successful, so only that button's name and value will be submitted.
Of course the simplest of all is to use input type submit, but maybe you can't do that.
U Can detect by using following condition.
if (!$.support.leadingWhitespace) {
//IE7 stuff
}
You cannot detect the browser using jQuery.support.
Rather than checking the browser, you should check the feature of browsers you want to use.
For example, if you want to use ajax feature,
you sould check the presence of XMLHttpRequest object by jQuery.support.ajax
var ajaxEnabled = $.support.ajax;
if (ajaxEnabled) {
// do something
}
jQuery.browser document says that
jQuery.browser may be moved to a plugin in a future release of jQuery.
And also says that
Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The $.support property is available for detection of support for particular features rather than relying on $.browser.
You can make your own browser-detection code. See below. But keep in mind that this code is vulnerable to spoofing as jQuery document says.
var ua = navigator.userAgent.toLowerCase();
var isOpera : (ua.indexOf('opera') >= 0) ? true : false;
var isFirefox : (ua.indexOf('firefox') >= 0) ? true : false;
var isMSIE : (ua.indexOf('msie') >= 0) ? true : false;
var isMSIE6 : (ua.indexOf('msie 6.0') >= 0) ? true : false;
var isMSIE7 : (ua.indexOf('msie 7.0') >= 0) ? true : false;
var isMSIE8 : (ua.indexOf('msie 8.0') >= 0) ? true : false;
var isMSIE9 : (ua.indexOf('msie 9.0') >= 0) ? true : false;
// and other browsers...
This question already has answers here:
Detect all Firefox versions in JS
(8 answers)
Closed 3 years ago.
I'm pretty new to Javascript. What I've learned is from just playing around with code.
I'm having trouble getting this to load. Bascially I need a certain div to only show in Firefox. Here is what I have.
<div id="parent" class="control-group"></div>
<script type="text/javascript">
$(document).ready(function() {
switch ( BrowserDetect.browser )
{
case 'Firefox':
$("button[name='btn']").click(function() {
$("#parent").html("<div></div>");
});
});
break;
}
</script>
You probably shouldn't be doing it like this, but if you are absolutely sure you only want to target Firefox:
var browser = navigator.userAgent.toLowerCase();
if (browser.indexOf('firefox') > -1) {
alert('Firefox');
}
fiddle
I'm attempting to work with Javascript through a cross browser platform that is required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.
The goal is to have items that dynamically hide or show depending on the selection of other items. Normally I would just toggle between display:none and display:block but for the work of another developer, I can use the display:none to hide the field, but switching to display:block screws up the layout. The solution is to simply rip out either the display setting in the style, or tear out the style altogether. Unfortunately, I ran into the library problem
Firefox supports everything I've tried so far
IE8 & 6 didn't support getElementById().style.removeProperty('display')
IE6 doesn't support getElementById().removeAttribute('style')
Below is my code as it currently is, working in IE8 and FF...but it is required to also get it working in IE6.
function displayPrevLPQ(bShow) {
if (bShow) {
document.getElementById('prevLPQ').removeAttribute('style');
} else {
document.getElementById('prevLPQ').style.display = 'none';
}
}
function displayBusUnitSub() {
var buVal = document.getElementById('BusinessUnitID').value;
document.getElementById("BusinessCycle").selectedIndex = document.getElementById("BusinessCycle").getAttribute("default");
document.getElementById("Ibap").selectedIndex = document.getElementById("Ibap").getAttribute("default");
document.getElementById("Bca").selectedIndex = document.getElementById("Bca").getAttribute("default");
switch (buVal) {
case '11':
document.getElementById('buSub0').style.display = 'none';
document.getElementById('buSub1').removeAttribute('style');
document.getElementById('buSub2').style.display = 'none';
break;
case '1':
document.getElementById('buSub0').style.display = 'none';
document.getElementById('buSub1').style.display = 'none';
document.getElementById('buSub2').removeAttribute('style');
break;
default:
document.getElementById('buSub0').removeAttribute('style');
document.getElementById('buSub1').style.display = 'none';
document.getElementById('buSub2').style.display = 'none';
break;
}
}
So, the question is...how can I tear out the Style or display properties in a way that will work across all three browsers?
Thanks in Advance.
Use a javascript library like jQuery that already has all the browser compatibility issues sorted and abstracted away.
From the docs it appears to support everything you need:
jQuery supports these browsers:
* Firefox 2.0+
* Internet Explorer 6+
* Safari 3+
* Opera 9+
* Chrome 1+
As for the specific jQuery function to to this - look at .toggle().
...required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.
jQuery, Prototype, and YUI all support those three browsers (and more). I expect many of these others do as well. Closure doesn't (at least, it doesn't claim to and we know Google dropped IE6 support in most of its products), but it's the first major library I know of to wave bye-bye to IE6.
Use a class instead. If you only use one class on your element, it's as simple as this:
CSS:
*.hidden {
display: none;
}
JavaScript:
function show(el) {
el.className = "";
}
function hide(el) {
el.className = "hidden";
}
show(document.getElementById("foo"));
you can still toggle between display:block/none;
target the IEs via conditional comments or IE specific hacks to fix your layout issues.
so lets say that you have width set on id uSub0 of 200px. and its breaking in IEs, you need it to be 190px for them. heres how you can target them. example:
uSub0{width:200px}
/** ie6 only **/
uSub0{width:200px; *width:190px}
/** ie7 only **/
uSub0{width:200px}
:first-child+html #uSub0{width:190px}
/* ie7 only **/
uSub0{width:200px}
+html #uSub0{width:190px}
/* ie6, ie7, ie8 **/
uSub0{width:200px; width: 190px\9}
/** ie7, ie8 **/
uSub0{width:200px; width/*/: 190px}
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
'innerText' works in IE, but not in Firefox
Why the following script work on IE and safari but not in Firefox?
<html>
<head><script type="text/javascript">
function ShowHide(strTag ,strAttribute){
var elem = document.getElementsByTagName(strTag);
var elem1 = evt.srcElement || evt.target;
for (var i=0;i<elem1.children.length;i++){
elem1.children[i].innerText=="4" ? elem1.children
[i].innerText="6":elem1.children[i].innerText="4";
}
for (var i =0;i<elem.length;i++) {
if(elem[i].getAttribute(strAttribute)=="yes") {
elem[i].style.display=='none'? elem[i].style.display='block':elem
[i].style.display='none';
}
}
}
</script>
<div id=div1 onclick="ShowHide('div','exp2');">
<font face=Webdings color=BLACK>4</font> click here for some expandable
divs...</div>
<div id=div2 exp2='yes' style="display:none;">I'm a div!</div>
<div id=div3 exp2='yes' style="display:none;">More of them divs...</div>
<div id=div4 exp2='yes' style="display:none;">Me too! divs...</div>
</body>
</html>
The innerText property does not work on Firefox, that property is IE-specific (although IIRC is supported by Opera/Chrome).
Firefox uses the W3C standard Node::textContent property.
I don't see where "evt" comes from, but event objects are referenced differently in Firefox and IE
Firefox does not have an "innerText" attribute for manipulation
(That "evt" thing makes me wonder how this works even in IE.)
CMS is right but also incomplete.
var elem1 = evt.srcElement || evt.target;
This line fails because 'evt is not defined'
evt is undefined
Unless you're passing in the event object from the onclick handler somewhere not included in your snippet Firefox has no idea what evt is. If you want to find the target in this manner, pass it in as a parameter to the function.