Scroll page back to the top

List and Grid view with jQuery and Cookies

List and Grid view with jQuery and Cookies

Today we are going to learn how to create a list of products / articles with the option to change the display view from list to grid and vice versa using jQuery and jQuery Cookie plugin.

JavaScript Tutorial

Sebastian Sulinski on 16th Jul 2011

Download Exercise FilesDemo
 
 

01 : Files and folders (02:33 min)

1  
 

02 : Page structure and content (04:32 min)

2  
 

03 : Styling (06:19 min)

3  
 

04 : Links and cookies (03:58 min)

4  
 
 
 
 

Discussion (10 comments)

  • yuthakun44

    yuthakun44 on Saturday, 23rd July 2011

    good

    Reply

  • Stan Valentin Cristian

    Stan Valentin Cristian on Wednesday, 16th November 2011

    Hello Sebastian,
    Thanks for all your tutorials.
    Can you tell me how to make this script to show me first the Grid view not the List view and how to add time to cookie, because after i close the browser i lose that cookie *(maybe to keep there at least 3 days or something like that)?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Wednesday, 16th November 2011

    Hi Stan,
    To make the cookie expire after say 7 days use the plugin in the following way:

    $.cookie('list_grid', 'g', { expires: 7 });
    

    You can increase or decrease the number of days by changing the number assigned to the expires item.

    In order to show first a Grid rather than List open your index.php and amend the following line by adding grid class to it:

    <div class="grid product">
    

    Then amend your core.js file:

    $(function() {
    	var cc = $.cookie('list_grid');
    	if (cc == 'l') {
    		$('#products').removeClass('grid');		
    	} else {
    		$('#products').addClass('grid');
    	}
    });
    $(document).ready(function() {
    
    	$('#grid').click(function() {
    		$('#products').fadeOut(300, function() {
    			$(this).addClass('grid').fadeIn(300);
    			$.cookie('list_grid', null);			
    		});
    		return false;
    	});
    	
    	$('#list').click(function() {
    		$('#products').fadeOut(300, function() {
    			$(this).removeClass('grid').fadeIn(300);
    			$.cookie('list_grid', 'l', { expires: 7 });
    		});
    		return false;
    	});
    
    });
    

    Now test it - it should now start with the grid as oppose to list.

    The other option would be to re-write your css so that the default one (without any class) shows as grid, but that's a bit more work.

    Reply

  • Stan Valentin Cristian

    Stan Valentin Cristian on Wednesday, 16th November 2011

    Thank you very much for your prompt and good answer
    Everything was ok, with one condition
    It didn't needed to add that "grid" to the div ... if I added that, the list view doesn't work correctly, without that everything is ok now, thanks again

    Reply

  • ValsiS

    ValsiS on Thursday, 17th November 2011

    When I'm in Grid View the js adds the 'grid' class and when I move to List View the js removes that class.
    Can we instead of removing 'grid' class add the 'list' class when in the List view?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Thursday, 17th November 2011

    You can replace 'grid' with 'list' if you want by doing the following:

    if (cc == 'l') {
    	$('#products').removeClass('grid');
    	$('#products').addClass('list');
    } else {
    	$('#products').removeClass('list');
    	$('#products').addClass('grid');
    }
    

    Reply

  • ValsiS

    ValsiS on Thursday, 17th November 2011

    Thanks again, you are the best ...
    I needed to add codes in functions to ... otherwise dosn't worked

    $(function() {
    	var cc = $.cookie('list_grid');
    	if (cc == 'l') {
    		$('#products').removeClass('grid');
    		$('#products').addClass('list');
    	} else {
    		$('#products').removeClass('list');
    		$('#products').addClass('grid');
    	}
    });
    $(document).ready(function() {
    
    	$('#grid').click(function() {
    		$('#products').fadeOut(300, function() {
    			$(this).addClass('grid').fadeIn(300);
    			$(this).removeClass('list').fadeIn(300);
    			$.cookie('list_grid', null);
    		});
    		return false;
    	});
    
    	$('#list').click(function() {
    		$('#products').fadeOut(300, function() {
    			$(this).removeClass('grid').fadeIn(300);
    			$(this).addClass('list').fadeIn(300);
    			$.cookie('list_grid', 'l', { expires: 7 });
    		});
    	return false;
    	});
    
    });
    

    Reply

  • Tutspress

    Tutspress : @tutspress on Saturday, 26th November 2011

    Hi Sebastian,
    Thanks you so much for this tutorial. Can I integrate this list grid system with WordPress?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Sunday, 27th November 2011

    Hi Tutspress,
    Sure you can - feel free to use it for whatever purpose.

    Reply

  • Sherwin Hermogenes

    Sherwin Hermogenes on Monday, 23rd April 2012

    Thanks for this nice and cool tutorials. This is what I'm looking for.

    Reply

  • James

    James on Thursday, 31st May 2012

    The download link seems broken.
    Can you fix it?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Thursday, 31st May 2012

    Hi James,
    Download works ok - make sure you have javascript enabled in your browser or try to refresh the page.

    Reply

  • Davor

    Davor on Tuesday, 12th June 2012

    wow, this is amazing...I looked at all of the tutorials, but I can't seem to get it working in Virtuemart. Any suggestions?

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Monday, 18th June 2012

    Hi Davor,
    I'm not really familiar with Virtuemart - perhaps some existing scripts are interfering?

    Reply

  • Davor

    Davor on Tuesday, 19th June 2012

    Well I got it working, at least a part of it. What I would like to know is if I can reposition the div classes as well. So that when I click on list I have a couple of divs more than in grid. I was trying to do two completely different styles, but I don't know how to do that in one php file.
    Thank you for your help.

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 19th June 2012

    Hi Davor,
    You could by assigning the additional class to the extra two items and when in grid mode hide them from within the javascript, while in the list mode simply show them. I hope this helps.

    Reply

 
Page 1 of 2
 
 
Add a comment
Add Comment