Download Exercise FilesDemo

Discussion (31 comments)

• 

  yuthakun44 on Saturday, 23rd July 2011

  good

  Reply

• 

  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 : @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 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 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 : @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 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 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 : @designtutorials on Sunday, 27th November 2011

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

  Reply

• 

  Sherwin Hermogenes on Monday, 23rd April 2012

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

  Reply

• 

  James on Thursday, 31st May 2012

  The download link seems broken.
  Can you fix it?

  Reply

• 

  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 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 : @designtutorials on Monday, 18th June 2012

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

  Reply

• 

  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 : @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

Add a comment

Name: *	Email: *
Website:	Twitter:
Comment (no html allowed): *
Add Comment

First name: *
E-mail: *
Subscribe