Hola, a ver si me podéis ayudar. He codificado un grid/list en jquery que me permita mostrar los elementos en grid o en lista. El problema lo tenía al igualar las columnas en el grid, pero lo arreglé con una función. Ahora el asunto es que cuando tengo la vista de lista no deseo igualar los divs. Este es mi code:
Código HTML:
<script language="javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
if ($("#gr").hasClass('gridProductItems')){
equalHeight($(".thumbTitle"));
}else{
$('.thumbTitle').css('height', 'auto');
}
}); </script>
<script>
$(function(){
var default_view = 'grid'; // choose the view to show by default (grid/list)
// check the presence of the cookie, if not create "view" cookie with the default view value
if($.cookie('view') !== 'undefined'){
$.cookie('view', default_view, { expires: 7, path: '/' });
}
function get_grid(){
$("#gr").addClass("gridProductItems");
$(".lis").addClass("gridder");
$("#gr").removeClass("listProductItems");
$(".s3").addClass("span3_grid");
$(".s3").removeClass("span3");
$(".s6").addClass("span6_grid");
$(".s6").removeClass("span6");
$(".h").addClass("btn-primary active");
$(".l").removeClass("btn-primary active");
} // end "get_grid" function
function get_list(){
$("#gr").addClass("listProductItems");
$(".lis").removeClass("gridder");
$("#gr").removeClass("gridProductItems");
$(".s3").addClass("span3");
$(".s3").removeClass("span3_grid");
$(".s6").addClass("span6");
$(".s6").removeClass("span6_grid");
$(".l").addClass("btn-primary active");
$(".h").removeClass("btn-primary active");
} // end "get_list" function
if($.cookie('view') == 'list'){
// we dont use the "get_list" function here to avoid the animation
$("#gr").addClass("listProductItems");
$(".lis").removeClass("gridder");
$("#gr").removeClass("gridProductItems");
$(".s3").addClass("span3");
$(".s3").removeClass("span3_grid");
$(".s6").addClass("span6");
$(".s6").removeClass("span6_grid");
$(".l").addClass("btn-primary active");
$(".h").removeClass("btn-primary active");
$.cookie('view', 'list');
get_list()
}
if($.cookie('view') == 'grid'){
$("#gr").addClass("gridProductItems");
$(".lis").addClass("gridder");
$("#gr").removeClass("listProductItems");
$(".s3").addClass("span3_grid");
$(".s3").removeClass("span3");
$(".s6").addClass("span6_grid");
$(".s6").removeClass("span6");
$(".h").addClass("btn-primary active");
$(".l").removeClass("btn-primary active");
$.cookie('view', 'grid');
get_grid();
}
$('.icon-list').click(function(){
$.removeCookie ('view', { path: '/' });
$.cookie('view', 'list');
get_list()
alert($.cookie('view'));
return false;
});
$('.icon-th').click(function(){
$.removeCookie ('view', { path: '/' });
$.cookie('view', 'grid');
get_grid();
alert($.cookie('view'));
return false;
});
});
</script>