Javascript works in chrome but not in IE

Question

0.00/5 (No votes)

See more:

Just learning JS but I've got this simple HTML, using JQuery, with embedded JS, that works fully in latest Chrome but not in IE11?

<html>
<head>
  <link rel='stylesheet' type='text/css' href='css/styles.css'>
  <script type='text/javascript' src='jquery.js'></script>
  <script type='text/javascript'>
  function main() {
  $('.skillset').hide();
  $('.skillset').fadeIn(1000);
  
  $('.projects').hide();
  
  $('.projects-button').on('click', function() {
  	//$(this).next().toggle();
    $(this).next().slideToggle(250);
    $(this).toggleClass('active');
    $(this).text('Projects Viewed');
	});
  }   
  </script>
</head>
<body>
  <h1>Proficient in:</h1>
  <div class='skillset'>
    <div class='skill-html'>
      <h1>HTML & CSS</h1>
      <p class='description'>
        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>
          <li>Broadway</li>
          <li>MOVE</li>
        </ul>
      </p>
    </div>

    <div class='skill-js'>
      <h1>JavaScript</h1>
      <p class='description'>
        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>
          <li>Password Validator</li>
          <li>Whale Talk</li>
        </ul>
      </p>
    </div>

    <div class='skill-jquery'>
      <h1>jQuery</h1>
      <p class='description'>
        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>
          <li>Coming soon...</li>
        </ul>
      </p>
    </div>
  </div>
<script type='text/javascript'>
$(document).ready(main);
</script>
</body>
</html>

CSS file ...

body {
  font-family: Helvetica;
  padding: 2em;
  background-color: whitesmoke;
}

h1 {
  font-size: 2.5em;
}

.skillset {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.skill-html {
  background-color: #E55126;
}

.skill-js {
  background-color: #E5A227;
}

.skill-jquery {
  background-color: #0C73B8;
}

.skill-html,
.skill-js,
.skill-jquery {
  width: 100%;
  padding: 1em 3em 2em 2em;
  margin: 0.5em;
  color: whitesmoke;
}

.projects-button {
  padding: 0.75em 1.25em;
  background-color: whitesmoke;
  opacity: 0.9;
  width: 10em;
  color: black;
}

ul {
  list-style: none;
  padding: 0;
}

.projects {
  margin: 1em 0;
}

.active {
  background-color: #333333;
  color: whitesmoke;
}

What I have tried:

nothing because I don't know why one browser works and another does not.

Posted 10-Oct-18 1:29am

ninjaef

Updated 13-Feb-20 12:03pm

v4

Add a Solution

Comments

jsc42 10-Oct-18 7:53am

How are you invoking the page? If you have it locally and are double-clicking its filename from Windows Explorer or right-clicking and using 'Run Using ...', it will load with a 'file:' protocol. This does not seem to be honoured in Edge but is honoured in Chrome. I do not know if it works in IE11 - it used to work in earlier versions of IE. If you are running it through a web server, then I cannot help.

ninjaef 10-Oct-18 8:22am

It is running from local disk. Double clicking it. But have also entered the full C:\test\index.html in the nav bar in IE, same behaviour - it doesnt work (in IE) but is flawless in chrome.
I'm using IE11

ninjaef 10-Oct-18 8:27am

FIXED IT !!

<meta http-equiv="X-UA-Compatible" content="IE=edge">

at the top of the HTML file, but can someone explain what this is doing. I found the solution just goolging tens of "jquery not working IE"

however, this is legacy stuff for IE11 and so I switched to the following, but it still didnt work. Only the meta tag works:

<!doctype html>

Mohibur Rashid 10-Oct-18 8:45am

https://www.lifewire.com/xua-compatible-meta-tag-3469059

Serious question, what's the version of your browser

Richard Deeming 11-Oct-18 9:27am

Your page is being forced into an IE compatibility mode for some reason, which makes it behave like an old version of IE. Adding the meta tag forces it back into IE11 mode.

At a guess, you're using a version of jQuery which doesn't support older versions of IE. The current version only supports IE9 or later[^], so if your page was rendering in IE7 mode, it wouldn't work.

When you have a problem with the Javascript code on your page, press F12 to open the developer tools. The debugger will show you the details of any script errors.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 14744139 · Answer 1 · 2020-02-13T12:03:00

Solution 2

ninjaef - your solution saved me days of work! Brilliant work! thanks.

Posted 13-Feb-20 12:03pm

Member 14744139