| |||||||
| Technology & Technical Skills Computer skills, hardware, software, internet topics, gadgets, programming |
 |
| | Thread Tools | Display Modes |
11-29-2007, 02:10 PM
| #1 (permalink) |
| Senior Member Join Date: Sep 2007
Posts: 124
 |  How is this done? (Site Design question)
How do websites have a table that has tabs on the top which allow you switch between it. Usually this is used to have tabs for a "most popular", "most emailed", etc. type section. I would really like to add this to my site but have no idea how it's done. Is it javascript? CSS? Here is an example taken off the NYTimes.com incase I didn't properly explain what I'm asking about.  |
|      |
|
11-30-2007, 02:17 AM
| #3 (permalink) |
| Senior Member Join Date: Nov 2006
Posts: 292
|
This is a cool feature. It's impressive that the content of the box changes without reloading of the page. No idea how it's done, i've only started using CSS. This site has got examples of CSS lists (see horizontal lists for tabs). Change of the content is not explained, though. Listamatic: one list, many options - Using CSS and a simple list to create radically different list options Hint: If you are using the Firefox browser, install the Web Developer plugin. It's great to sneak around in a page's (CSS) structure. If no one posts a solution i will ask a colleague at work on monday. He's a professional web designer. |
|
| |
|
11-30-2007, 04:47 AM
| #5 (permalink) |
| Senior Member Join Date: Nov 2006 Location: Moscow, Russia
Posts: 452
|
Yes this widget consists of three lists formatted with css and a javascript that allows switching between the lists. The page doesn't reload, because all three lists are present on the page at the same time, but not displayed.
|
|
| |
|
11-30-2007, 12:14 PM
| #6 (permalink) |
| Senior Member Join Date: Nov 2006 Location: Ballarat, Victoria, Australia
Posts: 287
|
Javascript (most likely a JS framework), some XHTML and CSS. There are an absolute ton of open source javascript libraries/frameworks with which people have built tab plugins for. Here is a page full of examples.... http://www.ajaxrain.com/search.php?seVal=tabs This one here ... http://www.silverscripting.com/mootabs/basicAjax.html ... is based on the Mootools library. Although the demo looks quite bland, it can be extensively styled to look just about any way you'd like. It also has a pretty cool 'bounce' effect. |
|
| |
|
11-30-2007, 12:19 PM
| #7 (permalink) |
| Senior Member Join Date: Nov 2006 Location: Ballarat, Victoria, Australia
Posts: 287
|
Yahoo User Interface (YUI) library has a pretty robust tab example too YUI Library Examples: TabView Control: Skinning TabView . Since it is made by Yahoo, it is the same as all the tabbed panels you see on the yahoo search and news sites. |
|
| |
|
11-30-2007, 03:23 PM
| #8 (permalink) |
| Junior Member Join Date: Sep 2007
Posts: 28
| This is the actual implementation they use, called DOMTab . Just drop it into your page and load it up with content, works out of the box. Trivial to set up. It loads all the content into multiple divs when the page loads, then it just hides/shows the div based on which tab was clicked.
|
|
| |
|
| Bookmarks |
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Similar Threads | ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Request for Feedback: Personal Development Site Review Site | Mark Lapierre | Technology & Technical Skills | 4 | 09-19-2007 12:03 AM |
| Building an SEO site from scratch | mustard76 | Business & Financial | 9 | 06-20-2007 09:23 PM |
| Learning Basic Web Design Newbie Questions | Kiwib | Technology & Technical Skills | 16 | 06-13-2007 09:39 PM |
| Mastering HTML, CSS, web design -- practice exercises, or just start your own site? | Tasaio | Technology & Technical Skills | 5 | 03-29-2007 11:22 AM |
All times are GMT. The time now is 12:08 PM.