Js Function Named 'Animate' Doesn't Work in Chrome, But Works in Ie

JS function named `animate` doesn't work in Chrome, but works in IE

The problem is that, since you use an event handler content attribute, your global function...

window.animate

...is shadowed by...

Element.prototype.animate

...which was introduced recently in Web Animations:

5.21 Extensions to the Element interface

Since DOM Elements may be the target of an animation, the Element
interface [DOM4] is extended as follows:
Element implements Animatable;
This allows the following kind of usage.
elem.animate({ color: 'red' }, 2000);

This behavior is explained in step 10 of getting the current value of the event handler:

Lexical Environment Scope

If H is an element's event handler, then let Scope be the result of NewObjectEnvironment(document, the global environment).

Otherwise, H is a Window object's event handler: let
Scope be the global environment.

If form owner is not null, let Scope be the result of NewObjectEnvironment(form owner, Scope).

If element is not null, let Scope be the result of NewObjectEnvironment(element, Scope).

Note: NewObjectEnvironment() is defined in ECMAScript edition 5 section 10.2.2.3 NewObjectEnvironment (O, E)

That means that the scope of the target element shadows the global scope.

Therefore, you can

Rename your function

function animate__() {  var div = document.getElementById('demo');  div.style.left = "200px";  div.style.color = "red";}

#demo {  position: absolute;}

<p id='demo' onclick="animate__()">Click me</p>

html code working in IE/FireFox but not in chrome

animate is used both as a function name and an id, which cause it to not work in Chrome.

Also, mentioned in this post, a function alone with the name animate might also not work in Chrome, based on how it is implemented. (see notes below)

<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript">var frame = 2;function animatee(){
if(frame == 1){    frame = frame + 1;    document.getElementById("animate").src = "http://placehold.it/100";}else if (frame == 2){    frame = frame + 1;    document.getElementById("animate").src = "http://placehold.it/100/f00";}else{    frame = 1;    document.getElementById("animate").src = "http://placehold.it/100/00f";}}</script></head><body>  <p> clicking the button will change the image.</p>
  <img id="animate" src="http://placehold.it/100/0f0">
  <button onclick="animatee();">click me to animate</button>
</body></html>

JavaScript Function Working on Chrome but not IE

It looks like your code is a little advanced for IE11 along with some variances in browser implementation.

For arrow functions and some other ES6 features not supported in IE11 you can use a transpiler to transform your JS from ES6 to ES5. Though this will not resolve all issues. The transpiler will not transpile target.closest(). You will need to find a different implementation of searching ancestor elements.

IE11 won't let you use forEach() with a NodeList, an Object, which is what document.querySelectorAll() returns. You can use [].slice.call( document.querySelectorAll() ), or similar method, to convert the NodeList to an array. Once the collection is an array forEach() will work as expected in IE11.

// https://stackoverflow.com/questions/22119673/find-the-closest-ancestor-element-that-has-a-specific-class#22119674function findAncestor(el, cls) {  while ((el = el.parentElement) && !el.classList.contains(cls));  return el;}
function open(e) {  let li = e.target;  li.classList.add('hover');}
function close(e) {  const hoverable = findAncestor(e.target, 'hover');  hoverable.classList.remove('hover');}
const infoBoxListItems = [].slice.call(document.querySelectorAll('.info-boxes li'));const closeButtons = [].slice.call(document.querySelectorAll('.profileclose'));
infoBoxListItems.forEach(function(li) {  li.addEventListener('mouseenter', open);});
closeButtons.forEach(function(btn) {  btn.addEventListener('click', close);});

.everything {  text-align: center;  height: 1000px;}
.everything.hover {  cursor: default;}
#wrapper {  margin: 0 auto;}
#wrapper img {  width: 100%;  /* the image will now scale down as its parent gets smaller */}
.infobox-list {  display: inline-block;  text-align: center;}
ul,ol,li {  margin: 0;  padding: 0;  list-style-position: outside;  list-style-type: none;}
h1,h2,h3,h4,h5,h6,ul,li,ol,form,fieldset {  margin: 0;  padding: 0;}
*,*:before,*:after {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}
ul,menu,dir {  display: block;  list-style-type: disc;  -webkit-margin-before: 1em;  -webkit-margin-after: 1em;  -webkit-margin-start: 0px;  -webkit-margin-end: 0px;  -webkit-padding-start: 0px;}
.hr {  border-color: rgba(255, 255, 255, 0.3);  margin-left: 9px;  width: 210px;}
body {  font-family: Arial, Helvetica, sans-serif;  font-size: 16px;  padding: 0;  margin: 0;  background-color: #fcfcfc;  color: #555;  min-width: 20em;}
.info-boxes li {  width: 310px;  height: 535px;  background: #f2f2f2;  border: 0px solid #efefef;  border-radius: 4px;  margin: 0 0px 0px;  cursor: pointer;  position: relative;  overflow: hidden;  transform: scale(0.75);}
.ptext {  text-align: center;  font-size: 20px;}
.profile {  margin-top: 10%;  margin-left: 1px;  width: 75px;  height: 75px;}
.performance {  margin-left: 1px;  margin-top: 10%;  width: 75px;  height: 75px;}
.learning {  margin-top: 10%;  width: 75px;  height: 75px;}
.team {  margin-top: 10%;  width: 75px;  height: 75px;}
.smallicons {  width: 50px;  height: 50px;}
.profileclose {  margin-top: 215px;}
.infobox-list li {  display: inline-block;}
a {  color: white;  text-decoration: none;  font-weight: lighter;}
.info-boxes li .infobox {  display: table-cell;  text-align: center;  vertical-align: middle;  height: 535px;  width: 310px;}
.info-boxes li .infobox:before {  content: '';  position: absolute;  left: 20%;  width: 160%;  height: 188%;  background-color: rgb(255, 255, 255);  /* fallback */  background-color: rgba(255, 255, 255, 0.2);  top: 0;  -webkit-transform: rotate(46deg);  -moz-transform: rotate(46deg);  transform: rotate(30deg);}
.info-boxes li.hover .shade {  animation-name: windowshade;  cursor: pointer;}
.info-boxes li .shade,.info-boxes li.hover .shade {  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);  animation-duration: 1s;  animation-iteration-count: 1;  animation-fill-mode: forwards;}
section p {  line-height: 1.3em;  color: #6d6e71;  width: 100%;  padding: 0 10px;  margin-top: 5px;  margin-left: 0px;  text-align: left;}
p {  display: block;}
.info-boxes li .shade {  position: absolute;  width: 310px;  height: 555px;  left: 0;  top: 0;  background-color: #6caf46;  color: #fff;  display: table;  vertical-align: middle;  padding: 20px 10px 0;  transform: translateY(-340px);  animation-name: windowshade-out;}
.info-boxes li .shade h3 {  color: #fff;  padding: 10px;  font-weight: bold}
.info-boxes li .shade p {  color: #fff;  line-height: 3em;  font-weight: lighter;}
.ie9 .info-boxes li.hover .shade {  top: 245px}
.info-boxes li.hover a {  text-decoration: none}
@keyframes windowshade {  0% {    transform: translateY(-535px)  }  100% {    transform: translateY(0)  }}
@keyframes windowshade-out {  0% {    transform: translateY(0)  }  100% {    transform: translateY(-535px)  }}

<section class="info-boxes">  <ul class="infobox-list">    <li>      <a href="#">        <div class="infobox">          <table>            <tr>              <img class="profile" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/profile_i0evlz.png"></tr>            <tr>              <p class="ptext">Profile</p>            </tr>          </table>        </div>        <div class="shade">          <table>            <tr>              <td>                <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/About-Me_dudglr.png">              </td>              <td>                <p>About Me</p>                <hr class="hr">              </td>            </tr>            <tr>              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Resume_tb7t02.png"> </td>              <td>                <p>Resume</p>                <hr class="hr">              </td>            </tr>            <tr>              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497280574/Accountabilities_qfdcns.png"> </td>              <td>                <p>Accountabilities                  <p/>                  <hr class="hr">              </td>            </tr>          </table>          <div class="profileclose">Close</div>        </div>      </a>    </li>    <li>      <div class="infobox">        <table>          <tr>            <img class="learning" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/Learning-Icon_hqtc2k.png"></tr>          <tr>            <p class="ptext">Learning</p>          </tr>        </table>      </div>      <div class="shade">        <table>          <tr>            <td>              <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png">            </td>            <td>              <p>Training Plan</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-History_czttv1.png"> </td>            <td>              <p>Training History</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497298863/coursefeedback_qdh1wm.png"> </td>            <td>              <p>Course Feedback</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497299106/Favourites_y9gkce.png"> </td>            <td>              <p>Training Favourites                <p/>                <hr class="hr">            </td>          </tr>        </table>      </div>    </li>
    <li>      <a href="#">        <div class="infobox">          <table>            <tr>              <img class="performance" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/Performance-Icon_ozaldt.png"></tr>            <tr>              <p class="ptext">Performance</p>            </tr>          </table>        </div>        <div class="shade">          <table>            <tr>              <td>                <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png">              </td>              <td>                <p>Goals</p>                <hr class="hr">              </td>            </tr>            <tr>              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284934/EA_n8lvj1.png" </td>                <td>                  <p>Effectiveness Assessment</p>                  <hr class="hr">                </td>            </tr>            <tr>              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png" </td>                <td>                  <p>Development Plan</p>                  <hr class="hr">                </td>            </tr>            <tr>              <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497285433/resources_b3r88g.png"> </td>              <td>                <p>Resources                  <p/>                  <hr class="hr">              </td>            </tr>          </table>        </div>      </a>    </li>
    <li>      <div class="infobox">        <table>          <tr>            <img class="team" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497637065/team_nl2cwh.png"></tr>          <tr>            <p class="ptext">Team</p>          </tr>        </table>      </div>      <div class="shade">        <table>          <tr>            <td>              <img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497300652/Team_iovnl5.png">            </td>            <td>              <p>Team</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/Goals_aw4nso.png"> </td>            <td>              <p>Team Goals</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497284615/development_yfv6o1.png"> </td>            <td>              <p>Team Development</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497297687/Training-Plan_v43ne7.png"> </td>            <td>              <p>Team Training</p>              <hr class="hr">            </td>          </tr>          <tr>            <td><img class="smallicons" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1497301295/Approval_f9y1da.png"> </td>            <td>              <p>Approvals                <p/>                <hr class="hr">            </td>          </tr>        </table>      </div>
    </li>  </ul></section>

Why is this animation working in IE 11 and Edge but not in chrome?

If you change the protocol on your image URL to https, your jsFiddle works in Chrome and Firefox. Modifed and working jsFiddle here.

Likewise, I can only load the bare image into Chrome and Firefox when the URL starts with https.

I see that Chrome is including a header with the original request when using http:

Upgrade-Insecure-Requests:1

You can read about that header here. I wonder if Dropbox is not handling that header appropriately.

animate function works in chrome but not in firefox

I did some testing and found out what's happening. This is reproduced in this fiddle for illustration and demonstration purposes.

In Firefox if you are transitioning the CSS attribute left, it needs to have an initial value to start from. If it doesn't then it won't transition, it'll just assign the value to the attribute.

In Chrome if you don't have the initial value set it apparently just starts from wherever it is and doesn't worry about it.

If you check out the above fiddle in Firefox and click on the first row, it just appears farther over, while the second row transitions over. Only difference is the second row has a left: 0 initially set. On Chrome both work the same.

If you put a left: 0 on your #content div then it will slide like it should in Firefox. (Tested in Firebug and that does fix it).

jQuery scrollTop doesn't animate in FF or IE but working fine in chrome

You're missing the closing ] in your selector so it is throwing an error and not hooking up the click handler.

$('a[href^="#"]').on('click', function (event) {

Working jsFiddle

JavaScript not working in IE and Firefox, works fine in Chrome

Change

$('body').scrollTop()

$(window).scrollTop()

This is usually the recomended way to retrieve the scroll position of the window's content (and so the body as well).

Also I'd suggest to put everything inside the

$(document).ready(function(){
//
});

block. I mean, also the binding of the scroll event to the navbar resize function.

As a side note jQuery allows you to write the above block (with same funcionality) as

$(function() {
//
});

Js Function Named 'Animate' Doesn't Work in Chrome, But Works in Ie