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.
Related
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>
Friends I need some help to fix IE 7 issues. This is my code.
<div id="thumb-slider-tabs">
<ul class="ibm-tabs">
<li class="active"><a href="#slide1" rel="0" class="no-mobile show-tab"><img
src="/i/slider/featured_icon_1.jpg" alt=""/></a><span class="icon-overlay"></span><span>Announcement</span></li>
this is how I target my href using the following:
dojo.query('#thumb-slider-tabs a').onclick(function(event){
var test = dojo.attr(event.currentTarget, 'rel');
alert(test);
switchTabs(dojo.attr(event.currentTarget, 'rel'), this.parentNode);
sliderClick = true;
});
IE 7 does not recognize the onclick and does not alert also it does not display the rel attribute in test.
Any suggestions please let me know what I can do to fix this issue in IE 7. This works in Chrome, Safari, Firefox, IE 8 & 9. I need to get it to work on IE 7.
I had two elements with ID thumb-slider-tabs, which is xhtml violation. In IE dojo finds the first node only and ignores the second one, hence dojo.query('#thumb-slider-tabs a') targets first 3 links on page, not the others as in firefox, chrome and safari. Bottom line, my 'onclick' handler is never attached to the actual nodes and thus the clicks were not being triggered on the tabs.
var anchors = dojo.query('[id="thumb-slider-tabs"] a').forEach(function(element){
dojo.connect(element, 'onclick', function(ev){
dojo.stopEvent(ev);
switchTabs( dojo.attr(element, 'rel'), element.parentNode);
sliderClick = true;
console.log(sliderClick + " " + "sliderClick value");
});
});
I made this change to my code and the onclick event handler triggers when I click the tabs.
In my battles to find a solution to printing just one area of the page that works within WordPress, I came across an excellent little script that meets my needs perfectly.. but only in IE browser. For some reason Firefox doesn't want to play ball.
The script is:
function printURL(sHref) {
if(document.getElementById && document.all && sHref) {
if(!self.oPrintElm) {
var aHeads = document.getElementsByTagName('HEAD');
if(!aHeads || !aHeads.length)
return false;
if(!self.oPrintElm)
self.oPrintElm = document.createElement('LINK');
self.oPrintElm.rel = 'alternate';
self.oPrintElm.media = 'print';
aHeads[0].appendChild(self.oPrintElm);
}
self.oPrintElm.href = sHref;
self.focus();
self.print();
return true;
}
else
return false;
}
Called by:
<a onclick="printURL(this.href); return false;" href="http://printstuff.com" target="_blank">print</a>
This is working in IE, but not FF. I don't know much about JavaScript, so would appreciate if you could tell me if there's anything you see that's giving Firefox headaches.
By the way - I have to go a javascript route instead of using a print CSS file, as the area I want to print (a coupon) is set in a table which is obviously set in the WordPress theme's container and wrapper divs which makes it difficult to isolate it for printing.
I've also experimented with iframe printing, which I made some headway with, but IE gives me problems there (rolleyes). So this script above seems a good answer to me, except Firefox does nothing when I click 'print'. Thanks a lot.
document.all tests false in all browsers other than IE. So your code is very explicitly only running the self.print() line in IE only.
It seems I can't really append elements to a new window in Firefox 4 beta (tested with beta 10). It works fine in Firefox 3, Opera, Chrome and IE6, but it seems FF beta 4 broke it.
Here's a simple demonstration HTML page
<html>
<head>
<script type="text/javascript">
function c() {
var o = window.open("", "", "status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=1,width=400,height=400");
if(!o.document.body) {
var b = o.document.createElement("body");
o.document.body = o.document.appendChild(b);
}
var e = o.document.createElement("div");
o.document.body.appendChild(e);
e.innerHTML="abc";
}
</script>
</head>
<body>
abc
</body>
</html>
Basically, it's a page with a link, when clicked, pops up a new window with the text "abc" in it.
In Firefox beta 4, it pops up with the window, but nothing is displayed in it. Using Firebug, it appears the nodes are created, but everything under the tag, (including the tag itself) is faded out in the tree, similar to invisible elements. However, the computed CSS show that display and visibility styles are fine.
Does anyone have any idea on how to make it work in Firefox beta 4?
According to this bug report, a fix should have been pushed to the repository, some days after the release of 4.0. This means that this behavior is expected to be fixed in next version of Firefox.
I m creating app. in facebook in that i m trying to show message to user while image is not completely loaded, the message is disappears when image is loaded completely and displayed to user. I used following code:
function imageloaded()
{
document.getElementById('testing').setStyle('visibility','hidden');
}
<div id="testing">
<font size="5" color="red">
Please wait to load image completely ......
</font>
</div>
<image src="" onLoad="imageloaded();">
The code works properly in mozilla, google crome but it doesn't work in IE. Please help me...
Instead of:
document.getElementById('testing').setStyle('visibility','hidden');
Try:
document.getElementById('testing').setStyle('display','none');
Note: In IE8 mode, getElementById performs a case-sensitive match on the ID attribute only. In IE7 mode and previous modes, this method performs a case-insensitive match on both the ID and NAME attributes, which might produce unexpected results.
'visibility: hidden' hides the element, but it still takes up space in the layout.
'display: none' removes the element completely from the document. It does not take up any space, even though the HTML for it is still present in the source code.
Both of these worked in 'IE 8' and 'Firefox 3.6.8':
function imageloaded() {
var element = document.getElementById('testing');
element.setAttribute("style", "visibility: hidden");
}
function imageloaded() {
var element = document.getElementById('testing');
element.setAttribute("style", "display: none");
}
EDIT:
In response to the comment below, I tested the following online using 'http://browsershots.org' and although I couldn't check this in real-time, the text was not visible in the final output:
Firefox 3.6.8
MSIE 6.0 Windows XP
MSIE 7.0 Windows XP
MSIE 8.0 Windows XP
Safari 4.0 Windows XP
Safari 5.0 Mac OS X 10.5
So this should do the trick:
HTML Sample:
<div id="testing">
<font size="5" color="red">
Please wait for the image to load completely...
</font>
</div>
<img src="img/test.jpg" alt="" onload="imageLoaded();">
JavaScript Sample:
<script type="text/javascript">
function imageLoaded() {
var element = document.getElementById('testing');
element.style.cssText = 'display:none;';
}
</script>
Hope this helps!