JQuery code not working in google chrome

I wrote some simple jQuery code to control the ajax tab input. It works fine on FireFox, but in Chrome it works on one page, but not on the home page. I do not know why...

Its really simple code just a lot of animations and callbacks and the like .. here is 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>

      

+2


a source to share


2 answers


The problem is

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

      

Parameter syntax is prohibited 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 this works in firefox. Any comments from others for a reason would be great

+2


a source


I had a similar problem solved by referencing the "widget" element ($ ("# element"). Tabs ("widget")) rather than the element itself when editing CSS values.



0


a source







All Articles