Outdated browser pop-up for IE users? Can anyone help?

Design help Custom code
1

I have a current client that is needing the site to work in IE, but some of the sections of the website are near impossible for me to fix for them to look good in IE without sacrificing the design - so our compromise is for there to be a popup notification that appears when a user has IE that prompts them to download an appropriate browser.

Has anyone done this before and have code (plus instructions) of how to implement and make work?

Here is the share link to the project in question.

Any and all help is appreciated, with step-by-step instructions as custom-code is not our forte with Webflow sites.

2

Hello @szimmerman,

you could try using the userAgent.match() method I quickly wrote below. The idea is to check wether the navigator is Edge or Explorer, if it is the case, a popup div is being revealed with the text you wish (the popup can be designed in webflow, just give it an idea of “popup”). If the navigator matches all other browsers, nothing special is being done except log the browser in the console. Wrap the script in its tag and copy it in the custom code section before the end of the tag. Tested on Chrome and Edge, I don’t have Explorer installed… you might want to check yourself :slight_smile:

Here is the codepen for you. If you open the pen in chrome, nothing happens. If you open it in edge of explorer, the popup should appear.

// 🧠 on DOM ready
document.addEventListener("DOMContentLoaded", () => {
  browserCheck();
});

function browserCheck() {
  let popup = document.getElementById("popup"),
    userAgent = navigator.userAgent.match(
      /(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i
    ),
    browser;
  if (
    // broswer is edge or explorer
    navigator.userAgent.match(/Edge/i) ||
    navigator.userAgent.match(/Trident.*rv[ :]*11\./i)
  ) {
    browser = "msie";
    console.log(`🤡 Ooops, looks like you're using ${browser}.`);
    popup.style.display = "flex";
  } else {
    // browser is a modern one
    browser = userAgent[1];
    console.log(`🥳 Yay, you're using ${browser}.`);
  } // end if
} // end browserCheck

hope that helps.

3

Thank you - I will be trying this out and seeing how it works.

4

@szimmerman

I went to the codepen link and got a 404. Did the above instruction work, and if so, how did it look?

Best,

Nathan