Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Saturday, May 17, 2008
Development & Programming
Video Tutorial: Tabbed Content - Part 2
Tabbed content appears more and more frequently in web pages, and is an interesting way to simultaneously save page space and effectively present information. In part two of this two-part tutorial on creating tabbed content, Practical eCommerce's online director Brian Getting illustrates how to utilize JavaScript to get our tabbed effect working (Click here to view Part 1).
Software Used: TextMate
Additional Files: tabs_tutorial_2.zip
Click the image below to launch the tutorial.
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Thursday, October 11, 2007
Comments:
There is a link to the first part on the right side of the page (Related Articles), in case anyone else is interested in Part One.
Posted by: Brian Getting
Thursday, October 11, 2007
Loved the tutorial...possible to get a script of the tutorial so someone can read the tutorial as well?
Posted by: Dave W.
Thursday, October 11, 2007
Hey, thanks a lot for that tutorial. It really hit the spot!
Posted by: Isaac S.
Sunday, October 14, 2007
Does anyone have any information on how search engine friendly these tabbed sections are? Will Google follow the tabs and read the content?
Please email me back at ezrider_2001@msn.com
Thanks!
Posted by: Dave Johnson
Monday, October 15, 2007
Very nice sample. I just have a 2 issues.
Tabs does not display in horizontal line using IE6 browser, but get stock on top of each other.
When page get open the first time, all tabs content is displayed ( I have 8 tabs and page get really long), but by clicking on any of them, only one tab is displayed.
Any suggestions what's could be wrong & how to fix it?
Thanks.
Posted by: Armis K.
Friday, October 26, 2007
Very nice tutorial as usual.
Regarding search engines, surely only the first tab will get indexed as all the others are "display:none" and the link is client side, not server side.
Would it not be better to assign a class that the javascript file can change or is that not possible?
Posted by: Simon
Monday, March 10, 2008
Again, great tutorials!!!
Posted by: Jordan P
Thursday, May 01, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Best practice: Put links to previous parts on page..in this case part one
http://www.practicalecommerce.com/articles/568/Video-Tutorial-Tabbed-Content/
Posted by: Steve McAllister
Thursday, October 11, 2007