This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Wednesday, January 30, 2008

Tabbed search bar using CSS and Javascript

Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.

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 <input> element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos...).



Take a look at how it works Download this tutorial


HTML code for tabs
I used a <ul> list with <li> element to implement tabs

<ul class="search-options">
<li id="tab1" class="selected"><a href="#" onclick="javascript:setSearchOptions(1);">Web</a></li>
<li id="tab2"><a href="#" onclick="javascript:setSearchOptions(2);">Images</a></li>
<li id="tab3"><a href="#" onclick="javascript:setSearchOptions(3);">Videos</a></li>


You can add other tabs simply adding new <li>elements using a progressive number for ID attribute (tab4, tab5, teab6...). Each tab call a javascript function setSearchOption() which set "active" the selected tab and set the value of the following hidden <input> field to enable search options:

<input type="hidden" name="searchopt" id="searchopt" />


When you submit the form (using PHP or another server side language), if is set the post variable related to this hidden field ($_POST['searchop'] for example) and this variable is equal to some value (an integer or a string), then you can execute a query instead of another one. For example if you select image tab, your query will execute the search only for images.

Javascript setSearchOptions() function
This is the function which set the active tab and change the value of the hidden input element:

function setSearchOptions(idElement){
/* Total Tabs above the input field (in this case there are 3 tabs: web, images, videos) */
tot_tab = 3;
tab = document.getElementById('tab'+idElement);
search_option = document.getElementById('searchopt');
for(i=1; i<=3; i++){
if(i==idElement){
/*set class for active tab */
tab.setAttribute("class","selected");
/*set value for the hidden input element */
search_option.value = idElement;
} else {
/*unset class for non active tabs */
document.getElementById('tab'+i).setAttribute("class","");
}
}
}

For more infos or questions contact me :)

Take a look at how it works Download this tutorial

blog comments powered by Disqus
Nitos said...

Can you use it in blogger???
if you can.. how? i tried and it says its not well written.. or closed..

Anonymous said...

You should add a return false; call in the onClick event so the '#' href is followed by the link - other than that nice work!

Anonymous said...

Great site and nice job on this tabbed search bar!

I'm trying this out but can't get the tabs to line up in IE...is there an easy way of doing this?

Cezary Tomczyk said...

I will try to add some border color changes for every search input, because when users clik on tab the input field don't change and users may think that this don't work, so there is nothing happend.

luca said...

Su internet explorer 6 non funziona ne la visualizzazione corretta dei 3 tab, ne l'eventuale javascript per modificare lo stile ai tab.

Kerala real estate said...

Very helpful

Thank you

Ali said...

hi, i am find it difficult to run the tabbed search script, the problem is i do not how to link it to different searches like google coop and music videos. i want have a search bar like google where you enter the search term and when you click on a maps it uses the term in the search. thanks in advance

Ismail Degani said...

I had some trouble getting IE to render this properly. Just thought I'd help anyone with the same problem. If you want the tabs to line up and the colors to change, you have to use className instead of setAttribute, i.e.

document.getElementById("tab1").className = "selected"

you also have to enable inline display in the css, as shown below:

ul.search-options, ul.search-options li {
padding: 0;
border: 0;
margin: 0;
list-style: none;
display: inline;
}

I'm still trying to figure out how to get rid of the gap between the tabs and the search form in IE. If anyone has any suggestions, please post. Thanks!

Anonymous said...

Hi All,
Thanks for the post.
This works great on FF but tabs are not lined up in IE 6.
Saw Ismail's comment but that fixes partially.
Could some one provide the complete fix for the same on IE6.

Thanks
Salsa

broknspyrl said...

Hey Kids,

I had the non lineup of the tabs in IE so i fixed it lol!! Here below is what i used in an external Js file to detect useragent:

Test.js
//<!--

// Ultimate client-side JavaScript client sniff. Version 3.03

// (C) Netscape Communications 1999-2001. Permission granted to reuse and distribute.

// Revised 17 May 99 to add is_nav5up and is_ie5up (see below).

// Revised 20 Dec 00 to add is_gecko and change is_nav5up to is_nav6up

// also added support for IE5.5 Opera4&5 HotJava3 AOLTV

// Revised 22 Feb 01 to correct Javascript Detection for IE 5.x, Opera 4,

// correct Opera 5 detection

// add support for winME and win2k

// synch with browser-type-oo.js

// Revised 26 Mar 01 to correct Opera detection

// Revised 02 Oct 01 to add IE6 detection

// Everything you always wanted to know about your JavaScript client

// but were afraid to ask. Creates "is_" variables indicating:

// (1) browser vendor:

// is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_TVNavigator, is_AOLTV

// (2) browser version number:

// is_major (integer indicating major version number: 2, 3, 4 ...)

// is_minor (float indicating full version number: 2.02, 3.01, 4.04 ...)

// (3) browser vendor AND major version number

// is_nav2, is_nav3, is_nav4, is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3,

// is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_ie6, is_ie6up, is_hotjava3, is_hotjava3up,

// is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up

// (4) JavaScript version number:

// is_js (float indicating full JavaScript version number: 1, 1.1, 1.2 ...)

// (5) OS platform and version:

// is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k

// is_os2

// is_mac, is_mac68k, is_macppc

// is_unix

// is_sun, is_sun4, is_sun5, is_suni86

// is_irix, is_irix5, is_irix6

// is_hpux, is_hpux9, is_hpux10

// is_aix, is_aix1, is_aix2, is_aix3, is_aix4

// is_linux, is_sco, is_unixware, is_mpras, is_reliant

// is_dec, is_sinix, is_freebsd, is_bsd

// is_vms

//

// See http://www.it97.de/JavaScript/JS_tutorial/bstat/navobj.html and

// http://www.it97.de/JavaScript/JS_tutorial/bstat/Browseraol.html

// for detailed lists of userAgent strings.

//

// Note: you don't want your Nav4 or IE4 code to "turn off" or

// stop working when new versions of browsers are released, so

// in conditional code forks, use is_ie5up ("IE 5.0 or greater")

// is_opera5up ("Opera 5.0 or greater") instead of is_ie5 or is_opera5

// to check version in code which you want to work on future

// versions.

// convert all characters to lowercase to simplify testing

var agt=navigator.userAgent.toLowerCase();

// *** BROWSER VERSION ***

// Note: On IE5, these return 4, so use is_ie5up to detect IE5.

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

// Note: Opera and WebTV spoof Navigator. We do strict client detection.

// If you want to allow spoofing, take out the tests for opera and webtv.

var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)

&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)

&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));

var is_nav2 = (is_nav && (is_major == 2));

var is_nav3 = (is_nav && (is_major == 3));

var is_nav4 = (is_nav && (is_major == 4));

var is_nav4up = (is_nav && (is_major >= 4));

var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) ||

(agt.indexOf("; nav") != -1)) );

var is_nav6 = (is_nav && (is_major == 5));

var is_nav6up = (is_nav && (is_major >= 5));

var is_gecko = (agt.indexOf('gecko') != -1);



var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

var is_ie3 = (is_ie && (is_major < 4));

var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );

var is_ie4up = (is_ie && (is_major >= 4));

var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );

var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));

var is_ie5up = (is_ie && !is_ie3 && !is_ie4);

var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);

var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );

var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);

// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser

// or if this is the first browser window opened. Thus the

// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.

var is_aol = (agt.indexOf("aol") != -1);

var is_aol3 = (is_aol && is_ie3);

var is_aol4 = (is_aol && is_ie4);

var is_aol5 = (agt.indexOf("aol 5") != -1);

var is_aol6 = (agt.indexOf("aol 6") != -1);

var is_opera = (agt.indexOf("opera") != -1);

var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);

var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);

var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);

var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);

var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);

var is_webtv = (agt.indexOf("webtv") != -1);

var is_TVNavigator = ((agt.indexOf("navio") != -1) || (agt.indexOf("navio_aoltv") != -1));

var is_AOLTV = is_TVNavigator;

var is_hotjava = (agt.indexOf("hotjava") != -1);

var is_hotjava3 = (is_hotjava && (is_major == 3));

var is_hotjava3up = (is_hotjava && (is_major >= 3));

// *** JAVASCRIPT VERSION CHECK ***

var is_js;

if (is_nav2 || is_ie3) is_js = 1.0;

else if (is_nav3) is_js = 1.1;

else if (is_opera5up) is_js = 1.3;

else if (is_opera) is_js = 1.1;

else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2;

else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3;

else if (is_hotjava3up) is_js = 1.4;

else if (is_nav6 || is_gecko) is_js = 1.5;

// NOTE: In the future, update this code when newer versions of JS

// are released. For now, we try to provide some upward compatibility

// so that future versions of Nav and IE will show they are at

// *least* JS 1.x capable. Always check for JS version compatibility

// with > or >=.

else if (is_nav6up) is_js = 1.5;

// NOTE: ie5up on mac is 1.4

else if (is_ie5up) is_js = 1.3

// HACK: no idea for other browsers; always check for JS version with > or >=

else is_js = 0.0;

// *** PLATFORM ***

var is_win = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );

// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all

// Win32, so you can't distinguish between Win95 and WinNT.

var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));

// is this a 16 bit compiled version?

var is_win16 = ((agt.indexOf("win16")!=-1) ||

(agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) ||

(agt.indexOf("windows 16-bit")!=-1) );

var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||

(agt.indexOf("windows 16-bit")!=-1));

var is_winme = ((agt.indexOf("win 9x 4.90")!=-1));

var is_win2k = ((agt.indexOf("windows nt 5.0")!=-1));

// NOTE: Reliable detection of Win98 may not be possible. It appears that:

// - On Nav 4.x and before you'll get plain "Windows" in userAgent.

// - On Mercury client, the 32-bit version will return "Win98", but

// the 16-bit version running on Win98 will still return "Win95".

var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));

var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));

var is_win32 = (is_win95 || is_winnt || is_win98 ||

((is_major >= 4) && (navigator.platform == "Win32")) ||

(agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));

var is_os2 = ((agt.indexOf("os/2")!=-1) ||

(navigator.appVersion.indexOf("OS/2")!=-1) ||

(agt.indexOf("ibm-webexplorer")!=-1));

var is_mac = (agt.indexOf("mac")!=-1);

// hack ie5 js version for mac

if (is_mac && is_ie5up) is_js = 1.4;

var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) ||

(agt.indexOf("68000")!=-1)));

var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) ||

(agt.indexOf("powerpc")!=-1)));

var is_sun = (agt.indexOf("sunos")!=-1);

var is_sun4 = (agt.indexOf("sunos 4")!=-1);

var is_sun5 = (agt.indexOf("sunos 5")!=-1);

var is_suni86= (is_sun && (agt.indexOf("i86")!=-1));

var is_irix = (agt.indexOf("irix") !=-1); // SGI

var is_irix5 = (agt.indexOf("irix 5") !=-1);

var is_irix6 = ((agt.indexOf("irix 6") !=-1) || (agt.indexOf("irix6") !=-1));

var is_hpux = (agt.indexOf("hp-ux")!=-1);

var is_hpux9 = (is_hpux && (agt.indexOf("09.")!=-1));

var is_hpux10= (is_hpux && (agt.indexOf("10.")!=-1));

var is_aix = (agt.indexOf("aix") !=-1); // IBM

var is_aix1 = (agt.indexOf("aix 1") !=-1);

var is_aix2 = (agt.indexOf("aix 2") !=-1);

var is_aix3 = (agt.indexOf("aix 3") !=-1);

var is_aix4 = (agt.indexOf("aix 4") !=-1);

var is_linux = (agt.indexOf("inux")!=-1);

var is_sco = (agt.indexOf("sco")!=-1) || (agt.indexOf("unix_sv")!=-1);

var is_unixware = (agt.indexOf("unix_system_v")!=-1);

var is_mpras = (agt.indexOf("ncr")!=-1);

var is_reliant = (agt.indexOf("reliantunix")!=-1);

var is_dec = ((agt.indexOf("dec")!=-1) || (agt.indexOf("osf1")!=-1) ||

(agt.indexOf("dec_alpha")!=-1) || (agt.indexOf("alphaserver")!=-1) ||

(agt.indexOf("ultrix")!=-1) || (agt.indexOf("alphastation")!=-1));

var is_sinix = (agt.indexOf("sinix")!=-1);

var is_freebsd = (agt.indexOf("freebsd")!=-1);

var is_bsd = (agt.indexOf("bsd")!=-1);

var is_unix = ((agt.indexOf("x11")!=-1) || is_sun || is_irix || is_hpux ||

is_sco ||is_unixware || is_mpras || is_reliant ||

is_dec || is_sinix || is_aix || is_linux || is_bsd || is_freebsd);

var is_vms = ((agt.indexOf("vax")!=-1) || (agt.indexOf("openvms")!=-1));

//--> end hide JavaScript


and then for the actual page i used this code:

Searchpage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Woork: Tabbed search bar</title>

<style type="text/css">

body {font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#555555;}

#main{width:600px; margin:0 auto; margin-top:60px;}

a{color:#0066CC;}

h1{color:#000000;}

form, input, h1, p{padding:0; margin:0; border:0;}

p{padding:6px 0 20px 0;}

#search-bar{padding:10px; background:#90b557; clear:both;}

#search-bar .search-style{font-size:16px; color:#999999; border:solid 1px #CCCCCC; padding:4px;}

ul.search-options, ul.search-options li{padding:0; border:0; margin:0; list-style:none; display:inline;}

ul.search-options{clear:both;}

ul.search-options li a{float:left; margin-right:1px; width:auto; background:#b2d281; padding:8px; color:#3b5d14; text-decoration:none; font-weight:bold;}

.selected a{background:#90b557; color:#FFFFFF;}

ul.search-options li.selected a{background:#90b557; color:#FFFFFF;}

</style>

<script language="javascript" src="test.js"></script>

</head>

<script language="javascript">

function init(){

document.getElementById('searchopt').value='1';

}

window.onload = init;

function setSearchOptions(idElement){

/* Total Tabs above the input field */

tot_tab = 3;

/* just to remind you lol

tab = document.getElementById('tab'+idElement);

search_option = document.getElementById('searchopt');*/

for(var i=1; i<=tot_tab; i++){

if(i==idElement){

if (is_ie5up)

{

document.getElementById('tab'+i).setAttribute("className","selected");

} else {

document.getElementById('tab'+i).setAttribute("class","selected");

}

document.getElementById('searchopt').value=i;

} else {

if (is_ie5up)

{

document.getElementById('tab'+i).setAttribute("className","");

} else {

document.getElementById('tab'+i).setAttribute("class","");

}

}

}

}

</script>

<body>

<div id="main">

<h1>Woork: Tabbed search bar</h1>

<p>Read the full story here:</p>

<p>This tutorial explains how to implement a tabbed search bar using CSS and Javascript. When you click over a tab you change the value of an hidden input field which you can use to set searching option (web =1, image = 2, Video = 3...)</p>

<ul class="search-options">

<li id="tab1" class="selected"><a href="#" onclick="javascript:setSearchOptions(1);">Web</a></li>

<li id="tab2"><a href="#" onclick="javascript:setSearchOptions(2);">Images</a></li>

<li id="tab3"><a href="#" onclick="javascript:setSearchOptions(3);">Videos</a></li>

</ul>

<div id="search-bar">

<form id="form1" name="form1" method="post" action="">

<input name="" type="text" class="search-style" id="searchq" size="40"/>

<input type="hidden" name="searchopt" id="searchopt"/>

</form>

</div>

<p>&nbsp;</p>

<p>Take a look at other tutorial here <a href="http://woork.blogspot.com">http://woork.blogspot.com</a></p>

</div>

<p>&nbsp;</p>

</body>

</html>


Hope this helps
Chris

Vasile Rusnac said...

Hey Chris, your solution does work with IE, thx for your effort ;) though the size of your code is about 7kb compared to the original 1kb.
Anyway, I will use your solution 'cause I really need it ;)
Thx again man.

Michelle said...

Thanks. All I was looking for was an easy way to make active tabs change css on click and this is the simplest solution I've found. Took some finagling to make it do exactly what I wanted and make it work in IE, but got it working in the end.

Anonymous said...

Here is little bug fix. Just replace:
---------------------------
tab.setAttribute("class","selected");
---------------------------
---------------------------
tab.className = "selected";
---------------------------

and replace
----------------------------------
document.getElementById('tab'+i).setAttribute("class","");
----------------------------------
document.getElementById('tab'+i).className = "";

Latika said...

Exactly what i am looking for. Thank you so much.

s i a said...

thank you very much for this adaptation!!!

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News