Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › show/hide visibility for gallery without Javascript?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 12, 2009 at 2:25 am #25734
    davidliu
    Member

    Hi again everyone,

    It’s always nice and neat to categorize your content into sensible categories, and not show ALL contents at once.

    I am trying to make a gallery with the following categories:
    Asia, Australia, Europe, S. America, N. America, Africa & Middle East

    What I’m trying to achieve is this:
    When I click on Asia, all clickable thumbnail images of Asia will show within the page. Likewise, when I click on Africa, all clilckable thumbnail images of Africa will show up.

    I have a rough idea/theory how this will work, but I don’t understand the concept behind it and how to implement it. I do not have a page to show it in (cos I don’t know how to implement it), but below is the code in my head. Let’s try to keep it purely CSS without Javascript. I think it’s something to do with calling out a hidden divs, or showing/hiding visibility. I know I’m missing so many ideas here.

    Any suggestions/pointers is greatly appreciated!

    <<CSS>>

    Code:
    #continent li {
    list-style-type:none;
    display:inline;
    padding-right:20px;
    background:none;
    color:#663333;
    }

    #hidden_div {
    width:800px;
    height:300px;
    visibility:hidden; (I think)
    }

    <<HTML>>

    Code:

    Not sure if it should be a href="asia.html" because I don’t want to call out a new page. Rather, a hidden div showing up or something like that.
    —

    August 12, 2009 at 4:18 am #62116
    Rob MacKay
    Participant

    well if you want to do funky stuff like dynamically editing your page content – jQuery is by far the easiest way to do it, I think you would be surprised how easy.

    Run through these short screen casts and I’m sure you will be able to accomplish what you need.

    http://blog.themeforest.net/screencasts … eo-series/

    :)

    August 12, 2009 at 4:22 am #62119
    davidliu
    Member

    Hi Rob,

    Thank you for your reference! I’ll be spending the next hour checking it out. By the way I found a great example of what I’m trying to achieve.

    http://friendfeed.com/ <-The ‘Why FriendFeed’, ‘What you can use it for?’, and ‘Testimonials’ area is exactly what I’m trying to achieve.

    Thanks again!
    Dave

    August 12, 2009 at 4:32 am #62120
    Rob MacKay
    Participant

    Ahh yea – I would then say look into jQuery :) plus you can make it much prettier lol.

    August 12, 2009 at 7:40 am #62126
    davidliu
    Member

    Thanks Rob!

    I’m gonna spend the next few days learning from that tutorial. Thanks for pointing out the useful resource!

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