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>
