Hello, I would like to modify the listing layout and add grid/list functionality with cookies. I am not sure, but the code isn't working. I added this to the listing.html.tpl.php.
Code:
<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: 31, path: '/' });
}
function get_grid(){
$('.list').removeClass('list-active');
$('.grid').addClass('grid-active');
$('.property-view').animate({opacity:0},function(){
$('.property-view').removeClass('property-list');
$('.property-view').addClass('property-grid');
$('.property-view').stop().animate({opacity:1});
});
} // end "get_grid" function
function get_list(){
$('.grid').removeClass('grid-active');
$('.list').addClass('list-active');
$('.property-view').animate({opacity:0},function(){
$('.property-view').removeClass('property-grid');
$('.property-view').addClass('property-list');
$('.property-view').stop().animate({opacity:1});
});
} // end "get_list" function
if($.cookie('view') == 'list'){
// we dont use the "get_list" function here to avoid the animation
$('.grid').removeClass('grid-active');
$('.list').addClass('list-active');
$('.property_view').animate({opacity:0});
$('.property_view').removeClass('property-grid');
$('.property_view').addClass('property-list');
$('.property_view').stop().animate({opacity:1});
}
if($.cookie('view') == 'grid'){
$('.list').removeClass('list-active');
$('.grid').addClass('grid-active');
$('.property_view').animate({opacity:0});
$('.property_view').removeClass('prod-box-list');
$('.property_view').addClass('prod-box');
$('.property_view').stop().animate({opacity:1});
}
$('#list').click(function(){
$.cookie('view', 'list');
get_list()
});
$('#grid').click(function(){
$.cookie('view', 'grid');
get_grid();
});
/* filter */
$('.category-menu ul li').click(function(){
var CategoryID = $(this).attr('category');
$('.category-menu ul li').removeClass('cat-active');
$(this).addClass('cat-active');
$('.property_view').each(function(){
if(($(this).hasClass(CategoryID)) == false){
$(this).css({'display':'none'});
};
});
$('.'+CategoryID).fadeIn();
});
});
</script>
and I added this to the index.php of the main joomla template head
Code:
<link href="<?php echo $templateUrl; ?>/css/grid-list.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $templateUrl; ?>/jquery.cookie.js"></script>
What am I missing?
Thanks
