CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
user1459655
user1459655

Reputation: 1

jQuery UI tabs conflicting with jquery slider in every browser except firefox - multiple jQuery instances

I've been attempting to add jQuery UI tabs to a page using a jquery slider plugin. It looks good in Firefox, but in every other browser the slider isn't working. Also, the slider only work in ff with multiple instances of jQuery (which I know is bad). Also, I'm running google feed control in the tabs. The relevant code is pasted below. you can also see the page at http://bit.ly/M0xIMM and the slider js here: http://bit.ly/KAe8Mf Any help would be appreciated, thanks!

In the head:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
    $(function() {
        var $tabs = $('#tabs').tabs();
        $(".ui-tabs-panel").each(function(i){
          var totalSize = $(".ui-tabs-panel").size() - 1;

          if (i != totalSize) {
              next = i + 2;
                  $(this).append("");
          }

          if (i != 0) {
              prev = i;
              $(this).append("");
          }
        });
    });
</script>

In the body:

<script type="text/javascript" src="/templates/rhuk_milkyway/js/jquery-1.3.2.min.js">    </script>
   <script type="text/javascript" src="/modules/mod_ds_banner_slide/mod_ds_banner_slide/mbScrollable.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery("#dsbs_Homebanner").mbScrollable({
        width: 950,
        elementsInPage: 1,
        elementMargin: 4,
        height: 175,
        controls: "#dsbs_Homebannercontrols",
        slideTimer: 600,
        autoscroll: true,
        scrollTimer: 6000        });
});
</script>

Upvotes: 0

Views: 642

Answers (1)

Dylan Valade
Dylan Valade

Reputation: 5605

You are using an old version of jQuery with a new version of UI. Just use the latest stable version of jQuery and eliminate both of the 1.3.2's. You don't need to be calling any scripts in the head (except maybe Google Analytics). Put all of that Javascript at the end of the body. Mootools is likely conflicting with jQuery. Make sure you call Mootools first

Upvotes: 1

Related Questions