Why does jquery work for a Sharepoint 2010 site in Chrome but not IE?

advertisements

I have a txt file containing this code inside of a Sharepoint 2010 webpart and it works correctly in Chrome but not in IE 11. I click on my "li" elements and animations occur in chrome but nothing happens in IE. I tried adding this tag to the site in Sharepoint Designer but it didn't help: meta http-equiv="X-UA-Compatible" content="IE=Edge". Does anyone know what would solve this?

<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->

<script type="text/javascript">

$(document).ready(function(){

$("li").click(function(){
 $("li").animate({backgroundColor:"#F5F5F5"}, "fast");
 $("li").css("color", "#676767");
 $(this).animate({backgroundColor:"#3A7CD2"}, "fast");
 $(this).css("color", "#FFFFFF");
$("#RightContentsContainer").slideUp(300);
$("#RightContentsContainer").show("slide", { direction: "left", easing: 'swing'}, 600);
});

$("#ListItem1").click(function(){$("#GuildCategoryHeader").hide().html("AFM").fadeIn(500);});
$("#ListItem2").click(function(){$("#GuildCategoryHeader").hide().html("ASA").fadeIn(500);});
$("#ListItem3").click(function(){$("#GuildCategoryHeader").hide().html("Chicago IA/Teamsters").fadeIn(500);});
$("#ListItem4").click(function(){$("#GuildCategoryHeader").hide().html("Commercials").fadeIn(500);});
$("#ListItem5").click(function(){$("#GuildCategoryHeader").hide().html("DGA").fadeIn(500);});
$("#ListItem6").click(function(){$("#GuildCategoryHeader").hide().html("Dues").fadeIn(500);});
$("#ListItem7").click(function(){$("#GuildCategoryHeader").hide().html("Hollywood Basic Crafts").fadeIn(500);});
$("#ListItem8").click(function(){$("#GuildCategoryHeader").hide().html("Hollywood IA").fadeIn(500);});
$("#ListItem9").click(function(){$("#GuildCategoryHeader").hide().html("Labor Contracts").fadeIn(500);});
$("#ListItem10").click(function(){$("#GuildCategoryHeader").hide().html("Other Unions").fadeIn(500);});
$("#ListItem11").click(function(){$("#GuildCategoryHeader").hide().html("National IA").fadeIn(500);});
$("#ListItem12").click(function(){$("#GuildCategoryHeader").hide().html("New York IA/Teamsters").fadeIn(500);});
$("#ListItem13").click(function(){$("#GuildCategoryHeader").hide().html("Non-Affiliate").fadeIn(500);});
$("#ListItem14").click(function(){$("#GuildCategoryHeader").hide().html("Non-Union").fadeIn(500);});
$("#ListItem15").click(function(){$("#GuildCategoryHeader").hide().html("SAG-AFTRA").fadeIn(500);});
$("#ListItem16").click(function(){$("#GuildCategoryHeader").hide().html("San Francisco").fadeIn(500);});
$("#ListItem17").click(function(){$("#GuildCategoryHeader").hide().html("Studio-Specific Contracts").fadeIn(500);});
$("#ListItem18").click(function(){$("#GuildCategoryHeader").hide().html("WGA").fadeIn(500);});
});
</script>

<style type="text/css">

a li{text-decoration: none;color:#676767;}

#guildlinesDiv{border: 2px solid #5A7EAD !important;}
#FAQDiv{border: 2px solid #5A7EAD !important;}
#headlinesDiv{border: 2px solid #5A7EAD !important;}
#contractsDiv{border: 2px solid #5A7EAD !important;}
#archivesDiv{border: 2px solid #5A7EAD !important;}

#ListItem1{background-color:#3A7CD2;color:#FFFFFF;}
#ListItem2{background-color:#F6F8FE;}
#ListItem3{background-color:#F6F8FE;}
#ListItem4{background-color:#F6F8FE;}
#ListItem5{background-color:#F6F8FE;}
#ListItem6{background-color:#F6F8FE;}
#ListItem7{background-color:#F6F8FE;}
#ListItem8{background-color:#F6F8FE;}

</style>

<div id="LeftHandAbsoluteMenuContainer" style="position: relative; top: 0px; left:15px; height:380px; width:290px ">
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/DropDownArrow.png" style="position: absolute; top: 7px; left:18px; height:28px;width:28px; z-index: 1;"/>
<p style="position: absolute; top: 9px; left:76px; z-index: 1; font-size: 17px;">Select Category</p>
<ul style="position: absolute; top: 41px; left:-18px; width: 245px; z-index: 1; font-size: 14px; list-style-type: none;">

<a style="text-decoration:none;" href="#"><li id="ListItem1">AFM</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem2">ASA</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem3">Chicago IA/Teamsters</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem4">Commercials</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem5">DGA</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem6">Dues</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem7">Hollywood Basic Crafts</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem8">Hollywood IA</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem9">Labor Contracts</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem10">Other Unions</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem11">National IA</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem12">New York IA/Teamsters</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem13">Non-Affiliate</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem14">Non-Union</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem15">SAG-AFTRA</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem16">San Francisco</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem17">Studio-Specific Contracts</li></a>
<a style="text-decoration:none;" href="#"><li id="ListItem18">WGA</li></a>

</ul>
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/CurvedCornerRectangle.png" style="position: relative; top: 0x; left:0px; height:41px;width:290px;"/>
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/CurvedCornerSquare.png" style="position: relative; top: 0px; left:0px; height:332px;width:290px;"/>
</div>

<p style="position: absolute; left:335px; top:118px; width:505px; font-size: 14px;">This site is designed to provide access to Labor Contracts and Payroll Guidelines. We are always looking for ways to provide better tools to facilitate our work. Please send any suggestions to <a href="mailto: [email protected]?Subject=Labor%20Relations%20site%20suggestions">Bob Pucher</a>.</p>
<p id="GuildCategoryHeader" style="position: absolute; left:352px; top:182px; width:445px; font-size: 14px; font-weight:bold;text-align:center;color:#215582">AFM</p>

<div id="RightContentsContainer" style="position: absolute; left:342px;top:216px; height: 310px;" >
<div id="contractsDiv" style="float: left; height:116px; margin-left:10px; text-align: center;">
<div style="height:24px; font-size: 16px; margin-top: 2px;color:#215582;">Contracts</div>
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/contract.jpg" alt=""/>
</div>
<div id="guildlinesDiv" style="float: left; height:116px; margin-left:20px; text-align: center;">
<div style="height:24px; font-size: 16px; margin-top: 2px; color:#215582;">Guidelines</div>
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/guidelines.jpg" alt=""/>
</div>
<div id="archivesDiv" style="float: left; height:116px; margin-left:20px; text-align: center;">
<div style="height:24px; font-size: 16px; margin-top: 2px;color:#215582;">Archives</div>
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/archive.jpg" alt=""/>
</div>


First at all, using a simple "li" selector in a Sharepoint page may be a bad idea. You could affinate a little more your selector with a class or an id.

And secondly, I prefer to use .on("click", "li", function() {} ) than .click(). I have a better experience with that. You could give it a try.

More information : http://api.jquery.com/on/