- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › how to let my users display my products in either a grid or a list via a button ?
hi,
im hoping to find a solution here for my problem , I m building a site where I have products displayed in a grid through CSS.. i also have the code to display the same product in a list
I would like to have a button where users can select how they would like to see the products, either in grid or in list..
I have looked into it and it seems the best way is to use Jqeury/ css to do so..
but im unable to make it happen..
link to my site : http://beta.prijsjagers.be/babyfoon~1044.htm
would there be anyone how can explain me step by step what I would need to do exactly to make this work ? ( im not so technical , so any and every help would be very much appreciated)
in a nutshell how can I switch the following two blocks of code to display either in a grid or in a list?
I have a div called
in this class I have several nested div’s for the grid display :
the same for the list display :
I want to be able to switch these two blocks of nested divs
use javascript. use the .addClass and .removeClass functionality. Do a search for those functions.
Hi alphakurt!
You just need to change your switch function to this:
$(document).ready(function(){
$('#switch').click(function(){
$('.ListingRow, .ListingGrid').toggle();
return false;
});
});
last suggestion works like a charm.. soo simple. so stupid of me
thanks a zillion
Mottie, great suggestion!
hmm looks like I cheered to soon..
apparantly the switch gets reset when I move to a new page..
any tips on how to keep the selection when I move to page 2, 3, 4 .. of the grid or list?
thanks
You’ll need to read up on cookies for it to stay after you’ve left the page.
http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html
http://plugins.jquery.com/project/Cookie