Forums

davidliu

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

#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>>

<ul id=\"continent\">
<li href=\"asia.html\"><a href=\"asia.html\">Asia</a></li>
<li href=\"australia.html\"><a href=\"asia.html\">Australia</a></li>
<li href=\"middle_east.html\"><a href=\"asia.html\">Middle East</a></li>
<li href=\"africa.html\"><a href=\"asia.html\">Africa</a></li>
<li href=\"europe.html\"><a href=\"asia.html\">Europe</a></li>
<li href=\"n_america.html\"><a href=\"asia.html\">North America</a></li>
<li href=\"s_america.html\"><a href=\"asia.html\">South America</a></li>
</ul>

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.
---

Robskiwarrior

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/

:)

davidliu

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

Robskiwarrior

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

davidliu

Thanks Rob!

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

treehouse : what would you like to learn today?

Forums

show/hide visibility for gallery without Javascript?