Forums

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 ?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33411
    alphakurt
    Participant

    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

    #83102
    stevendeeds
    Member

    use javascript. use the .addClass and .removeClass functionality. Do a search for those functions.

    #83109
    Mottie
    Member

    Hi alphakurt!

    You just need to change your switch function to this:

    $(document).ready(function(){
    $('#switch').click(function(){
    $('.ListingRow, .ListingGrid').toggle();
    return false;
    });
    });
    #83106
    alphakurt
    Participant

    last suggestion works like a charm.. soo simple. so stupid of me

    thanks a zillion

    #83122
    stevendeeds
    Member

    Mottie, great suggestion!

    #83147
    alphakurt
    Participant

    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

    #83143
    TheDoc
    Member

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.