Oct
Tabbed search bar using CSS and Javascript
By: Mark Dijkstra In: CSS Forms Javascript Tutorials
Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.
Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.
x
This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set “active” the selected tab and changes the value of an hidden element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos…).
See a demo here
Written by: Mark Dijkstra
Mark Dijkstra is the founder and main writer of OpenSourceHunter.
He's also a passionate freelance web developer and designer. Mark is one of those people that spend too much time on the internet to keep up with all of the trends and tools.
You can follow Mark on twitter @ MarkDijkstra
Related Posts
Keep reading with more great articles!
More Categories
- Adobe AIR
- Advertisement
- AJAX
- Analytics
- Animations
- Announcement
- API
- Bookmark
- Brouwser
- Calendar
- Charts
- CMS
- CSS
- Design
- Desktop
- E-commerce
- Editor
- Fireworks
- Flash
- Forms
- Forum
- Framework
- Gallery
- Gimp
- Giveaway
- Icons
- Illustrator
- Images
- Inspiration
- Javascript
- jQuery
- Layout
- Menu
- MooTools
- Photoshop
- PHP
- Poll
- Popup
- Prototype
- Resources
- RSS
- Script.aculo.us
- Site of the month
- Stats
- Tables
- Template
- Tips and tricks
- Tools
- Tooltip
- Tutorials
- Upload
- Vector
- Video
- Web OS
- Wordpress
-
Two ebooks give away at OpenSourceHunter
-
55 Free and beautiful WordPress themes
-
Three (printed)books from Packt Publishing giveaway
-
A list of very nice and free social buttons
-
22 useful and free icon packs
-
26 cool and useful jQuery tips, tricks & solutions
-
The best 44 photoshop text effects tutorials on the web!
-
Style your forms with jQuery
-
50 useful and free icon packs for your next project
-
111 great and free textures from stock.xchng
-
Google analytics API launched
-
Twitter backgrounds
-
Site update, added some social buttons
-
MooTools CSS styled scrollbar
-
Clicky, a powerfull web 2.0 analyzer
-
BarackSlideshow, an elegant and lightweight slideshow script
-
Vector Magic
-
Free Apple iPad GUI in PSD Format using vectors
-
haXe, an open source programming language
-
NicEdit, a WYSIWYG content editor
6 Comments
Jamie
February 10, 2009
This does not work with IE7
Dan
September 1, 2009
I am VERY upset that this doesn’t work in IE7+!
The Hunter
September 1, 2009
@Dan -
Well for what i can see it is just an layout bug
jamie
September 1, 2009
Will there be a fix for this as I think this will be really helpful for alot of people.
jamie
September 1, 2009
Sorry having a thick one – this is from the woork site.
The Hunter
September 1, 2009
@jamie -
I dont know you beter pm the author of this tutorial.
Add Your Comment
Your name
March 10, 2010
We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!