Question regarding "Waiting..." message in IE

[dmwhipp]

Hello,
On a template I've been working on, I had two scripts that were conflicting:

• <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> from the Slippry slideshow
• http://www.dwwebdesigns.com//custom/...y-1.8.3.min.js from the Responsee menu

When I removed jquery-1.8.3.min.js, the slideshow worked, but the responsive menu no longer worked properly. However when I removed jquery/1.10.2/jquery.min.js, the slideshow and menu both pass all of the device and browser tests I've run so far: http://www.dwwebdesigns.com/custom/cis.html

But when viewing the site in IE, the page tab displays a "Waiting for...." message. I'm wondering if this is due to the removal of the //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js and if there is some way to rectify this (see image below).


Thank you,
Deborah

[jscheuer1]

Generally you only need one version of jQuery per page, but it must come before all other scripts that use it. Working from the page http://www.dwwebdesigns.com/custom/cis.html as it currently is, moving:

<script type="text/javascript" src="/custom/js/jquery-1.8.3.min.js"></script>

to here:

<link rel="stylesheet" href="/custom/css/components.css">
<link rel="stylesheet" href="/custom/ciscss.css">
<link rel="stylesheet" href="/custom/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="/custom/owl-carousel/owl.theme.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/custom/js/jquery-1.8.3.min.js"></script>

<!-- Slippry Start -->
    <script src="/custom/js/slippry/slippry.min.js"></script>
    <link rel="stylesheet" href="/custom/js/slippry/demo.css">
    <link rel="stylesheet" href="/custom/js/slippry/slippry.css">
<!-- Slippry End -->

seems to do the trick as far as I can see. The differences between jQuery 1.10.2 and 1.8.3 are not all that great though, so putting either version of jQuery there should work for most scripts that need either version, though of course, whichever version of jQuery you decide to use should be the only version of jQuery used for the page. Generally that would be the later or higher version, in this case 1.10.2 (also seems to work), but I tried it with 1.11.1 and that seemed to work fine too.

Basic rule though is only one version of jQuery per page, and it must come before any other scripts that need it.

As far as the "waiting for" message in IE goes, there's a little trick that often works and seems to in this case, add the defer attribute to the scripts using jQuery:

<script type="text/javascript" src="/custom/js/jquery-1.8.3.min.js"></script>

<!-- Slippry Start -->
    <script defer src="/custom/js/slippry/slippry.min.js"></script>
    <link rel="stylesheet" href="/custom/js/slippry/demo.css">
    <link rel="stylesheet" href="/custom/js/slippry/slippry.css">
<!-- Slippry End -->

<script defer type="text/javascript" src="/custom/js/jquery-ui.min.js"></script>    
<script defer type="text/javascript" src="/custom/js/modernizr.js"></script>
<script defer type="text/javascript" src="/custom/js/responsee.js"></script>
<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

BTW, the scripts in the lt IE 9 comment block appear not to exist, and - since almost no one uses IE 8 or less any longer, you can probably safely remove that part (highlighted).

[dmwhipp]

Thank you so much for your help John - I learned a lot from that post! Putting the script in the correct place and adding the defer attribute has the page testing correctly for me: http://www.dwwebdesigns.com/custom/cis.html

I tried using newer versions of jQuery, but the accordion function of the menu when in responsive mode stopped working. When you click About Us in responsive mode, the child elements appear, but when clicking About Us again, they no longer disappear as they should: http://www.dwwebdesigns.com/custom/cisjquery.html.

[jscheuer1]

Ah well, I just sort of checked that the menu was still responsive (changed versions) at different screen sizes and that when at full size seemed to work along with the slippry and owl scripts.

If you ever have to use a later version of jQuery for one script and an earlier one for another, that can be done, but's sometimes tricky, and obviously adds a lot of code to a page. So at that point it's usually better to find scripts that play well together, or to try fixing/changing/updating whatever it is in the older script(s) that cannot handle the later version of jQuery.

[dmwhipp]

Hi John,
Thanks so much for your help in figuring this out. I hadn't even thought about script conflicts when trying to figure out which framework to try to work with to learn responsive. I looked at Foundation and Bootstrap too. They both had tons of documentation, but seemed pretty code heavy compared to Responsee. Unfortunately the developers of Responsee appear to be working out of Slovakia and, while they've been helpful, I do wish they had support forums like this, but I've been fortunate to have your knowledge and assistance.
Thanks again!
Deborah

[jscheuer1]

Your welcome!