3 Replies Latest reply: Apr 5, 2012 3:05 PM by Diachun RSS

    Spry Menu Bar 2.0 conflict with jquery tabs?

    Diachun Community Member

      Hello there,

       

      Thanks to Altruistic Gramps and Nancy O. I found a solution to a recent problem with my Spry menu bar. Same website but a new problem has popped up.

       

      I replaced the old Spry menu with the Spry menu 2.0 versio and fixed up my z-index problem. It works fiine throughout the site EXCEPT for this: The drop downs do not work on any page which ASLO uses spry tabs. I'm thinking there must be a conflist between the two?

       

      For example, the drop down menu works fine on this page: http://oregapet.com/products.html

       

      … but it no longer works on this page (which uses spry tabs as well): http://oregapet.com/products/oil_of_oregano.html

       

       

      I've tried fiddling around with the code but I'm new to jquery so it's more or less hit or miss. I would appreciate any feedback you might have.

       

      Thanks,

      Melody

        • 1. Re: Spry Menu Bar 2.0 conflict with jquery tabs?
          Diachun Community Member

          Update: I figured things out so it now works in most browsers BUT there is still a problem in IE8. Here is some user feedback:

           

          We’re using Internet Explorer 8 and we’re on PC with Windows XP, Version 2002, Service Pack 3. 

           

          I tried the tabs again, using your link below.  Funny thing is ... it’s inconsistent.

           

          As I began scrolling over each tab, the drop down menu would appear but then fade away and I was not able to click on the options – either because it faded away too quickly, or if I was quick enough to try to click on an option, it didn’t work.  Testimonials tab and Welcome tab always work though.  It’s the tabs with the drop down menus I am having issue with.  I refreshed the page, which didn’t help.  Then several moments later I tried the tabs again, and everything worked just fine.

           

          I go back to it every minute or so and again, it’s inconsistent.  It seems – and I’m not 100% sure – but I think that when I click on an arrow for the drop down menu, that it ‘confuses’ the webpage and things don’t work.  A window popped up on my internet explorer page suggesting I use “compatibility view” for older websites that aren’t compatible with Explorer 8.  I clicked on that but it didn’t change anything.

           

           

          Thanks,

          Melody

          • 2. Re: Spry Menu Bar 2.0 conflict with jquery tabs?
            Ben Pleysier CommunityMVP

            I cannot replicate the problem and do not see  a reason why it should exist with the exception of the following

            content {

                width: 870px

            }

            where you have left off the dot ('.') in front of 'content'.

             

            Gramps

            • 3. Re: Spry Menu Bar 2.0 conflict with jquery tabs?
              Diachun Community Member

              Thanks Gramps! Funny thing, this. It turns out it was not a browser compatibility or jquery issue at all. After a few emails back and forth I figured out it was the way the user above was interracting with the menu.

               

              Originally I used a "#" to trigger the dropdowns. Instead of hovering over the title to trigger the drop down ("Product" etc.), the user above was clicking on the title. And since no page was linked nothing would happen for her. All I had to do was link the titles to actual pages. Now if a user clicks on "Company" the "Company: About Us" page will open.

               

              I assumed all users would interract with the menu the way I do. My mistake and a good lesson!

               

              Thanks again for your help!

               

              Melody