Calling two types of jquery - issue in IE

Question

Firefox works fine, Opera is great and Chrome works well also. IE is the issue. It seems to be ANY version of IE.

The site is http://s91532.gridserver.com and no matter where you click, it brings down our javascript menu from the top.

When you hover over the images it shows you the correct path and everything but when you click it just drops down the Ministry Index dropdown

I have removed the offending jquery which was an older version and am now just calling the site.js which is the code below:

jQuery.noConflict();

jQuery(document).ready(function(){
   $('p#minguide-link a').click(function(){
      if ($('#index-wrapper').is(':hidden')) {
         $('#index-wrapper').slideDown('medium');
         $('p#minguide-link a').addClass('down');
         return false;
      } else {
         $('#index-wrapper').slideUp('medium');
         $('p#minguide-link a').removeClass('down');
         return false;
      }
   });

   var group_width = $('li#nav_groups ul').width();
   var group_adj = ((group_width*-1)/2)+79;
   var care_width = $('li#nav_care--serve ul').width();
   var care_adj = ((care_width*-1)/2)+79;
   var sermon_width = $('li#nav_sermons ul').width() + 2;
   var sermon_adj = ((sermon_width*-1)/2)+79;

   $('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
   $('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
   $('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});

With that alone being called nothing happens. It seems that it is now fixed in IE from what I can tell.

Now how do I get site.js to be called correctly so the menu drops down correctly.

Answer 1

Without any useful information (other than the link), all I can do is point you to this article:

http://codex.wordpress.org/Function_Reference/wp_enqueue_javascript/

You should be using 1.4.2. I've never ever had a single problem with it. You're calling conflicting versions of jQuery, so just use the better one.

Also, site.js isn't using jQuery in compatibility mode. You should change that first line to

jQuery(document).ready(function(){

not

$(document).ready(function(){

EDIT

Your site is running in no-conflict mode. You have to get rid of that $ at the beginning of site.js. It's throwing an error before anything happens. To fix that, all you need to do is change the very first $ to jQuery. All the other $s are fine, though.

Here's site.js in jQuery 1.4.2. Just replace the whole file's contents with this:

jQuery(document).ready(function() {
   $('p#minguide-link a').click(function(){
      $('#index-wrapper').slideToggle();
      $('p#minguide-link a').toggleClass('down');
      return false;
   });

   var group_width = $('li#nav_groups ul').width();
   var group_adj = ((group_width*-1)/2)+79;
   var care_width = $('li#nav_care--serve ul').width();
   var care_adj = ((care_width*-1)/2)+79;
   var sermon_width = $('li#nav_sermons ul').width() + 2;
   var sermon_adj = ((sermon_width*-1)/2)+79;

   $('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
   $('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
   $('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});

Additionally, I really suggest you look up jQuery's API. It's super easy to learn and very intuitively organized/layed out. And searching is a breeze.

Answer 2

Matthew, replace the jquery 1.3 script tag for the jquery 1.4 script tag, make sure all other script tags are placed AFTER the jquery script tag ;)

Answer 3

I would echo the strong recommendation that you make everything work with the up-to-date version of the library, but you might try this: include the old jQuery, then right after that line add this:

<script>
  jQuery.noConflict();
</script>

And then include a modified site.js file, changed as follows:

jQuery(function($) {
  // existing code
});