jQuery code not working in Google Chrome...

Question

Hi, I have writen a simple jQuery code to control ajax tabs navigation.. Its working in good on FireFox but in Chrome it working in one page but not in the home page I don't know why...

Its really simple code just a lot of animations and callbacks and stuff like that.. here's the code:

jQuery.fn.tabs = function({movieID, movieTitle}) {

    var tabsWrap =      '#movie_details_wrap';
    var tabsContent =   '#tab_content';
    var firstTab =      '#tab_detalles';
    var postPHP =       'index.php?controlador=pelicula';

    //When page loads... first tab actions
    $('ul.tabs_nav a:first').addClass('active'); //Activate first tab nav

    $.get(postPHP, {"activeTab": firstTab, "movieID": movieID},
        function(response){
            $(tabsContent).html(response); // insert response into the faded out div
            $(tabsWrap).animate({ // animate the wrap div using the new container div height
                height: $(tabsContent).height() + "px"
                    }, function() {
                        $(tabsContent).fadeIn(); // fade in the div with all the info
                    });
        });

    //On Click Event
    $('ul.tabs_nav li').click(function() {

        $('ul.tabs_nav a').removeClass('active'); //Remove any 'active' class
        $(this).find('a').addClass('active'); //Add 'active' class to selected tab

        var activeTab = $(this).find('a').attr('href'); //Find the href attribute value to identify the active tab + content
        var orgHeight = $(tabsContent).height() + 'px'; // get original height

        $(tabsWrap).css('height', orgHeight); // set height with css to freeze the wrap div when we hide the inner div
        $(tabsContent).fadeOut(200, function() { // fade out the inner div
            // send data by ajax (post)
            $.get(postPHP, {"activeTab": activeTab, "movieID": movieID , "movieTitle": movieTitle},
                function(response){
                    $(tabsContent).html(response); // insert response into the faded out div
                        $(tabsWrap).animate({ // animate the wrap div using the new container div height
                            height: $(tabsContent).height() + "px"
                        }, function() {
                            $(tabsContent).fadeIn(); // fade in the div with all the info
                        });
                    });

        });

        return false;
    });
};

Here's the HTML:

<script type="text/javascript">
  $(document).ready(function(){
      $('.tabs_nav').tabs({movieID:'135353', movieTitle: 'Some Title'});
  });
</script>

<!--Navigation-->                   
<ul id="details_nav" class="tabs_nav">
  <li><a href="#tab_detalles">Detalles</a></li>
  <li><a href="#tab_criticas">Criticas</a></li>
  <li><a href="#tab_posters">Posters</a></li>
  <li><a href="#tab_trailers">Trailers</a></li>
</ul>

<div class="border_wrap">
  <div id="movie_details_wrap">
    <div id="tab_content">
      <!--Tabs content here-->
    </div>
  </div>
</div>

Answer 1

The problem is this

jQuery.fn.tabs = function({movieID, movieTitle}) {

The parameter syntax is illegal in Chrome (and IE). The solution would be to do it like this

jQuery.fn.tabs = function( properties ) {

      var movieID = properties.movieID;
      var movieTitle = properties.movieTitle;

I don't know why it works in firefox. Any comments from others on the reason would be great

Answer 2

I've had a similar issue that was solved by referencing the 'widget' element ( $("#element").tabs("widget") ) rather than the element itself when editing CSS values.