jQuery script doesn't run in Internet Explorer (syntax error on line 1 char 1)
html, internet-explorer, javascript, jquery, syntax-error
Solution
Although `const` is a Javascript 1.5 standard feature it is not supported by modern versions of IE (6-10). Only gecko based browsers and Chrome support it.
Variables nowadays in javascript use `var`, not `const` to avoid this problem.
Change this :
const visible = "visible";
const hidden = "hidden";
const open = "open";
To this:
var visible = "visible";
var hidden = "hidden";
var open = "open";
Problem
I'm working on a responsive html mockup for a new project, and it contains some jquery scripts which run perfectly on every browser... Except for Internet Explorer (I'm currently testing it on IE9). I naturally checked IE's javascript console, which gives me the following error message : ``` SCRIPT1002: Syntax error scripts.js, line 1 character 1 ``` I have absolutely no idea where that could come from, as neither DreamWeaver or Komodo Edit detect anything wrong. The mockup is online at the following address : http://zipion-live.be/cal-bw/ And here's the script which causes the error : ``` const visible = "visible"; const hidden = "hidden"; const open = "open"; $(document).ready(function(e) { $(".collapsible_container .links").hide(); showHomeMenu(); $("#home_link").click(showHomeMenu); $("#admin_link").click(showAdminMenu); $("#left_menu .links a").click(function() { $("#left_menu .links").slideUp("fast"); $("#left_menu .collapsible_container").removeClass(open); }); $("section .section_header").click(function() { var sectionContent = $(this).parent("section").children(".section_content"); var sectionHeader = $(this); toggleSection(sectionHeader, sectionContent); }); }); function toggleSection(sectionHeader, sectionContent) { var isOpen = sectionHeader.hasClass(open); if (isOpen) { sectionContent.slideUp("slow", function() { sectionHeader.removeClass(open); }); } else { sectionContent.slideDown("slow"); sectionHeader.addClass(open); } } function setLeftMenuHeight() { var visibleChildren = $("#left_menu .collapsible").not(".hidden") if (visibleChildren.length > 8) { $("aside").removeClass("h100").addClass("h150"); } else if (visibleChildren.length > 4) { $("aside").removeClass("h150").addClass("h100"); } else { $("aside").removeClass("h100").removeClass("h150"); } } function showHomeMenu() { $("#left_menu .admin").addClass("hidden"); $("#left_menu .home").removeClass("hidden"); $("#left_menu .admin h3 a").unbind("click"); setLeftMenuHeight(); $("#left_menu .home h3 a").click(function() { var current = $(this).parent("h3").parent(".collapsible_container").children(".links") animateMenu(current); }); } function showAdminMenu() { $("#left_menu .home").addClass("hidden"); $("#left_menu .admin").removeClass("hidden"); $("#left_menu .home h3 a").unbind("click"); setLeftMenuHeight(); $("#left_menu .admin h3 a").click(function() { var current = $(this).parent("h3").parent(".collapsible_container").children(".links") animateMenu(current); }); } function animateMenu(current) { var isVisible = current.hasClass(visible) $("#left_menu .links").removeClass(visible); $("#left_menu .collapsible_container").removeClass(open); $.when($("#left_menu .links").slideUp("fast")).then(function() { if (!isVisible) { current.slideDown("fast"); current.addClass(visible); current.parent(".collapsible_container").addClass(open); } else { current.parent(".collapsible_container").removeClass(open); } }); } ``` Any idea about this issue ? I'm quite new to jQuery and I'm totally clueless here... P.S. : I'm using jquery in version 1.11.0, in case that's relevant.