Click here to Skip to main content
14,422,139 members
Rate this:
Please Sign up or sign in to vote.
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
Updated 10-Oct-18 3:26am
v4
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.

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100