0

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.

  • 2
    They do support it, so the problem is somewhere else. Where is your ` – Ry- Sep 01 '15 at 17:32
  • 2
    In addition to @minitech's comment, make sure that the 'x' button really is located where it is supposed to be on IE8-IE9. Inspect the page elements and make sure things are positioned in the right place. – Hanlet Escaño Sep 01 '15 at 17:33
  • 1
    Maybe this can help: http://stackoverflow.com/a/9769930/5202773 – Benoit Sep 01 '15 at 17:34
  • 3
    error in the console? – epascarello Sep 01 '15 at 17:34
  • try replacing your div element with an input or button element. – Novice Sep 01 '15 at 17:34
  • Script is placed in app.js just before the closing body-tag. Using `window.onload = function () { ... }` to wait for the complete page to be loaded. Debug tool in IE8 throws only JS-errors related to Foundation 5 (which is unspported), but does not return any errors in app.js... –  Sep 01 '15 at 17:49
  • The placement of `#closewarning` is more interesting, is it in `head`? – Teemu Sep 01 '15 at 17:53
  • No, it is placed in the body. Will add the exact markup to the question. –  Sep 01 '15 at 17:54
  • 2
    Could you add a few `console.log`s to check whether the `onclick` assignment runs at all and whether the event handler runs at all? Other errors might be stopping your code from running, or `window.onload` might be overwritten by something else… (note that you have to have the console open while loading the page for `console` to exist in old IEs). – Ry- Sep 01 '15 at 18:16
  • When I run the original JS without the Foundation 5 JS, it works. The message closes. As IE8 cannot handle the Foundation JS, it obviously stops executing JS, which logically stops the event from being detected...What do you do in such a case? Put the script in the conditional tag in the head? –  Sep 01 '15 at 18:58
  • So my guess is the foundation code is causing your code to not get executed. – epascarello Sep 01 '15 at 19:16
  • Try taking it out of `onload` as a first step; since your script is at the bottom of ``, you don’t need to wait for any events to start using elements that exist in ``. – Ry- Sep 01 '15 at 21:14

1 Answers1

1

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.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • I stripped all hyphens from the IDs and changed the CSS and JS accordingly, but the problems persists. The message is not hiding on X click. –  Sep 01 '15 at 18:05
  • @user3046831 No? That's too bad. Have you checked that the onclick really is not fired (logged to the console/alerted sth in the handler)? – Teemu Sep 01 '15 at 18:19
  • `id="ie8warning"` and `id="closewarning"` are unique on each page. Just used `monitorEvents(window);` in the Chrome console and onclick is clearly fired, when the X is clicked. –  Sep 01 '15 at 18:29
  • 1
    @user3046831: In IE 8, not in Chrome. – Ry- Sep 01 '15 at 18:32
  • Running `monitorEvents(window);` in IE8 console throws an error: "Object expected". –  Sep 01 '15 at 18:36
  • The Foundation 5 JS throws errors in IE8, which stops the script from being executed. Putting the script in an extra file in the conditional tag executes the closing correctly. –  Sep 01 '15 at 19:14