Jump to content

Free Domain Tab Menu - Whois, Transfer, Search

Nerdster

By Nerdster
in Developer Corner

 Share

Recommended Posts

Nerdster Member

Nerdster

Posted
Posted

I've noticed a few people requesting a tab menu that would allow their customers to search for a domain, transfer a domain, and whois a domain with one click.

 

After a bit of research, I found out that there was nothing similar offered, just a few suggestions that didn't get me far.

 

The simple domain search form that is available right now, you can find in your WHMCS manager, under "Utilities > Integration."

 

Hence...

 

http://koowii.com/example-demos/searchtab.html

 

It will require some tweaking, the design will need to be modified, if you want something a bit more sophisticated.

 

You will also need to change the address to where the forms are submitted.

 

The option boxes will also have to be changed to the ones that you currently allow customers to purchase.

 

I'm not going to make a big instruction manual, I think that most people who are interested in doing something similar will find this useful.

 

Steal the code. Enjoy.

 

Feel free to visit the Koowii website. Thanks.

0
Link to comment
Share on other sites
  • 2 months later...
Svann Member

Svann

Posted
Posted
I've noticed a few people requesting a tab menu that would allow their customers to search for a domain, transfer a domain, and whois a domain with one click.

 

After a bit of research, I found out that there was nothing similar offered, just a few suggestions that didn't get me far.

 

The simple domain search form that is available right now, you can find in your WHMCS manager, under "Utilities > Integration."

 

Hence...

 

http://koowii.com/example-demos/searchtab.html

 

It will require some tweaking, the design will need to be modified, if you want something a bit more sophisticated.

 

You will also need to change the address to where the forms are submitted.

 

The option boxes will also have to be changed to the ones that you currently allow customers to purchase.

 

I'm not going to make a big instruction manual, I think that most people who are interested in doing something similar will find this useful.

 

Steal the code. Enjoy.

 

Feel free to visit the Koowii website. Thanks.

 

how can i get that?

0
Link to comment
Share on other sites
thehost5968 Senior Member

thehost5968

Posted
Posted (edited) 

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script v2.2- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>


<style type="text/css">
#simple-tabs{margin:0;padding:0;overflow:hidden;margin-bottom:10px;}
#simple-tabs li a:hover{}
#simple-tabs li a:visited{color:#fff;text-decoration:none;}
#simple-tabs li a{font-size:11px;font-weight:bold;color:#fff;display:block;float:left;background:#426397;margin-right:10px;
padding:0px 8px;line-height:25px;text-decoration:none;}
#simple-tabs li{display:inline}
#simple-tabs li a.selected{background:green}

</style>





<ul id="simple-tabs">
<li><a href="#" rel="simple-tabs-1" class="selected">Domain</a></li>
<li><a href="#" rel="simple-tabs-2">Whois</a></li>
<li><a href="#" rel="simple-tabs-3">Transfer</a></li>
</ul>


<div id="simple-tabs-1" class="tabcontent">
<form target="_blank" action="your doman to whmcs/domainchecker.php" method="post">

<input type="hidden" name="token" value="find this in admin" /> 
<input type="hidden" name="direct" value="true"> 
<input type="text" name="domain" size="40" class="search-field" value="Domain.." onfocus="if(this.value == 'Domain..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Domain..';}"/> 
<select name="ext" class="head-select">
<option>.com</option>
<option>.net</option>
<option>.info</option>
<option>.org</option>
<option>.me</option>
<option>.us</option>
<option>.mobi</option>

<option>.la</option>
<option>.asia</option>
<option>.biz</option>
<option>.com.tw</option>
<option>.tw</option>
<option>.org.tw</option>
<option>.idv.tw</option>
<option>.ca</option>
<option>.cn</option>

<option>.eu</option>
<option>.name</option>
<option>.cc</option>
<option>.ac</option>
<option>.io</option>
<option>.sh</option>
<option>.tv</option>
<option>.bz</option>
<option>.nu</option>

<option>.ws</option>
<option>.kids.us</option>
<option>.com.cn</option>
<option>.net.cn</option>
<option>.org.cn</option>
<option>.de</option>
<option>.be</option>
<option>.tc</option>
<option>.vg</option>

<option>.ms</option>
<option>.gs</option>
<option>.jp</option>
<option>.net.nz</option>
<option>.co.nz</option>
<option>.org.nz</option>
<option>.in</option>
<option>.at</option>
<option>.am</option>

<option>.nl</option>
<option>.fm</option>
<option>.com.au</option>
<option>.net.au</option>
</select>
<input type="submit" value="submit" class="search-go"> 
</form>
</div>


<div id="simple-tabs-2" class="tabcontent"  style="display:none">
<form target="_blank" action="your doman to whmcs/whois.php" method="post">
<input type="text" id="domain1" onchange="document.getElementById('domain').value=document.getElementById('domain1').value + '' + document.getElementById('tld').value;" name="domain1" size="40" class="search-field" value="Whois.." onfocus="if(this.value == 'Whois..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Whois..';}"/> 

<select name="tld" id="tld" onchange="document.getElementById('domain').value=document.getElementById('domain1').value + ' ' + document.getElementById('tld').value;" class="head-select">
<option>.com</option>
<option>.net</option>
<option>.info</option>
<option>.org</option>
<option>.me</option>
<option>.us</option>
<option>.mobi</option>
<option>.la</option>

<option>.asia</option>
<option>.biz</option>
<option>.com.tw</option>
<option>.tw</option>
<option>.org.tw</option>
<option>.idv.tw</option>
<option>.ca</option>
<option>.cn</option>
<option>.eu</option>

<option>.name</option>
<option>.cc</option>
<option>.ac</option>
<option>.io</option>
<option>.sh</option>
<option>.tv</option>
<option>.bz</option>
<option>.nu</option>
<option>.ws</option>

<option>.kids.us</option>
<option>.com.cn</option>
<option>.net.cn</option>
<option>.org.cn</option>
<option>.de</option>
<option>.be</option>
<option>.tc</option>
<option>.vg</option>
<option>.ms</option>

<option>.gs</option>
<option>.jp</option>
<option>.net.nz</option>
<option>.co.nz</option>
<option>.org.nz</option>
<option>.in</option>
<option>.at</option>
<option>.am</option>
<option>.nl</option>

<option>.fm</option>
<option>.com.au</option>
<option>.net.au</option>
</select>
<input type="hidden" name="domain" id="domain" value="" />
<input type="submit" value="submit" class="search-go"> 
</form>
</div>


<div id="simple-tabs-3" class="tabcontent"  style="display:none">
<form target="_blank" action="your doman to whmcs/cart.php?a=add&domain=transfer" method="post">
<input type="text" name="sld" size="40" class="search-field" value="Transfer.." onfocus="if(this.value == 'Transfer..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Transfer..';}"/> 
<select name="tld" class="head-select">

<option>.com</option>
<option>.net</option>
<option>.info</option>
<option>.org</option>
<option>.me</option>
<option>.us</option>
<option>.mobi</option>
<option>.la</option>
<option>.asia</option>

<option>.biz</option>
<option>.com.tw</option>
<option>.tw</option>
<option>.org.tw</option>
<option>.idv.tw</option>
<option>.ca</option>
<option>.cn</option>
<option>.eu</option>
<option>.name</option>

<option>.cc</option>
<option>.ac</option>
<option>.io</option>
<option>.sh</option>
<option>.tv</option>
<option>.bz</option>
<option>.nu</option>
<option>.ws</option>
<option>.kids.us</option>

<option>.com.cn</option>
<option>.net.cn</option>
<option>.org.cn</option>
<option>.de</option>
<option>.be</option>
<option>.tc</option>
<option>.vg</option>
<option>.ms</option>
<option>.gs</option>

<option>.jp</option>
<option>.net.nz</option>
<option>.co.nz</option>
<option>.org.nz</option>
<option>.in</option>
<option>.at</option>
<option>.am</option>
<option>.nl</option>
<option>.fm</option>

<option>.com.au</option>
<option>.net.au</option>
</select>
<input type="submit" value="submit" class="search-go"> 
</form>
</div>




<script type="text/javascript">
var countries=new ddtabcontent("simple-tabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

Edited by thehost5968
0
Link to comment
Share on other sites
thehost5968 Senior Member

thehost5968

Posted
Posted

save this as tabcontent.js

 

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
   this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
   this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
   this.enabletabpersistence=true
   this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
   this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
   this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
   this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
   this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){ 
   var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
   if (document.cookie.match(re)) //if cookie found
       return document.cookie.match(re)[0].split("=")[1] //return its value
   return ""
}

ddtabcontent.setCookie=function(name, value){
   document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

   expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
       this.cancelautorun() //stop auto cycling of tabs (if running)
       var tabref=""
       try{
           if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
               tabref=document.getElementById(tabid_or_position)
           else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
               tabref=this.tabs[tabid_or_position]
       }
       catch(err){alert("Invalid Tab ID or position entered!")}
       if (tabref!="") //if a valid tab is found based on function parameter
           this.expandtab(tabref) //expand this tab
   },

   cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
       if (dir=="next"){
           var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
       }
       else if (dir=="prev"){
           var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
       }
       if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
           this.cancelautorun() //stop auto cycling of tabs (if running)
       this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
   },

   setpersist:function(bool){ //PUBLIC function to toggle persistence feature
           this.enabletabpersistence=bool
   },

   setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
       this.selectedClassTarget=objstr || "link"
   },

   getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
       return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
   },

   urlparamselect:function(tabinterfaceid){
       var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
       return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
   },

   expandtab:function(tabref){
       var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
       //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
       var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
       this.expandsubcontent(subcontentid)
       this.expandrevcontent(associatedrevids)
       for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
           this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
       }
       if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
           ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
       this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
   },

   expandsubcontent:function(subcontentid){
       for (var i=0; i<this.subcontentids.length; i++){
           var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
           subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
       }
   },

   expandrevcontent:function(associatedrevids){
       var allrevids=this.revcontentids
       for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
           //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
           document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
       }
   },

   setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
       for (var i=0; i<this.hottabspositions.length; i++){
           if (tabposition==this.hottabspositions[i]){
               this.currentTabIndex=i
               break
           }
       }
   },

   autorun:function(){ //function to auto cycle through and select tabs based on a set interval
       this.cycleit('next', true)
   },

   cancelautorun:function(){
       if (typeof this.autoruntimer!="undefined")
           clearInterval(this.autoruntimer)
   },

   init:function(automodeperiod){
       var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
       var selectedtab=-1 //Currently selected tab index (-1 meaning none)
       var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
       this.automodeperiod=automodeperiod || 0
       for (var i=0; i<this.tabs.length; i++){
           this.tabs[i].tabposition=i //remember position of tab relative to its peers
           if (this.tabs[i].getAttribute("rel")){
               var tabinstance=this
               this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
               this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
               this.tabs[i].onclick=function(){
                   tabinstance.expandtab(this)
                   tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
                   return false
               }
               if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
                   this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
               }
               if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
                   selectedtab=i //Selected tab index, if found
               }
           }
       } //END for loop
       if (selectedtab!=-1) //if a valid default selected tab index is found
           this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
       else //if no valid default selected index found
           this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
       if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
           this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
       }
   } //END int() function

} //END Prototype assignment

0
Link to comment
Share on other sites
thehost5968 Senior Member

thehost5968

Posted
Posted

inline Styles

#simple-tabs{margin:0;padding:0;overflow:hidden;margin-bottom:10px;}
#simple-tabs li a:hover{}
#simple-tabs li a:visited{color:#fff;text-decoration:none;}
#simple-tabs li a{font-size:11px;font-weight:bold;color:#fff;display:block;float:left;background:#426397;margin-right:10px;
padding:0px 8px;line-height:25px;text-decoration:none;}
#simple-tabs li{display:inline}
#simple-tabs li a.selected{background:green}

 

Thanks for this you are one of the best.

0
Link to comment
Share on other sites
  • 3 months later...
  • 1 year later...
Nerdster Member

Nerdster

Posted
  • Author
Posted

The "searchtab.html"

 

Replace the "ADD TOKEN VALUE" and the "ADD YOUR DOMAIN NAME"

 

<!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" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Title</title>


<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script v2.2- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>


<style type="text/css">
#simple-tabs{margin:0;padding:0;overflow:hidden;margin-bottom:10px;}
#simple-tabs li a:hover{}
#simple-tabs li a:visited{color:#fff;text-decoration:none;}
#simple-tabs li a{font-size:11px;font-weight:bold;color:#fff;display:block;float:left;background:#426397;margin-right:10px;
padding:0px 8px;line-height:25px;text-decoration:none;}
#simple-tabs li{display:inline}
#simple-tabs li a.selected{background:green}
</style>





<ul id="simple-tabs">
<li><a href="#" rel="simple-tabs-1" class="selected">Domain</a></li>
<li><a href="#" rel="simple-tabs-2">Whois</a></li>
<li><a href="#" rel="simple-tabs-3">Transfer</a></li>
</ul>


<div id="simple-tabs-1" class="tabcontent">
<form target="_blank" action="http://ADD YOUR DOMAIN NAME/clients/domainchecker.php" method="post">
<input type="hidden" name="token" value="ADD TOKEN VALUE" /> 
<input type="hidden" name="direct" value="true"> 
<input type="text" name="domain" size="40" class="search-field" value="Domain.." onfocus="if(this.value == 'Domain..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Domain..';}"/> 
<select name="ext" class="head-select">
<option>.com</option>
<option>.net</option>
<option>.info</option>
<option>.org</option>
<option>.me</option>
<option>.us</option>
<option>.mobi</option>
<option>.la</option>
<option>.asia</option>
<option>.biz</option>
<option>.com.tw</option>
<option>.tw</option>
<option>.org.tw</option>
<option>.idv.tw</option>
<option>.ca</option>
<option>.cn</option>
<option>.eu</option>
<option>.name</option>
<option>.cc</option>
<option>.ac</option>
<option>.io</option>
<option>.sh</option>
<option>.tv</option>
<option>.bz</option>
<option>.nu</option>
<option>.ws</option>
<option>.kids.us</option>
<option>.com.cn</option>
<option>.net.cn</option>
<option>.org.cn</option>
<option>.de</option>
<option>.be</option>
<option>.tc</option>
<option>.vg</option>
<option>.ms</option>
<option>.gs</option>
<option>.jp</option>
<option>.net.nz</option>
<option>.co.nz</option>
<option>.org.nz</option>
<option>.in</option>
<option>.at</option>
<option>.am</option>
<option>.nl</option>
<option>.fm</option>
<option>.com.au</option>
<option>.net.au</option>
</select>
<input type="submit" value="submit" class="search-go"> 
</form>
</div>


<div id="simple-tabs-2" class="tabcontent"  style="display:none">
<form target="_blank" action="http://ADD YOUR DOMAIN NAME/clients/whois.php" method="post">
<input type="text" id="domain1" onchange="document.getElementById('domain').value=document.getElementById('domain1').value + '' + document.getElementById('tld').value;" name="domain1" size="40" class="search-field" value="Whois.." onfocus="if(this.value == 'Whois..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Whois..';}"/> 
<select name="tld" id="tld" onchange="document.getElementById('domain').value=document.getElementById('domain1').value + ' ' + document.getElementById('tld').value;" class="head-select">
<option>.com</option>
<option>.net</option>
<option>.info</option>
<option>.org</option>
<option>.me</option>
<option>.us</option>
<option>.mobi</option>
<option>.la</option>
<option>.asia</option>
<option>.biz</option>
<option>.com.tw</option>
<option>.tw</option>
<option>.org.tw</option>
<option>.idv.tw</option>
<option>.ca</option>
<option>.cn</option>
<option>.eu</option>
<option>.name</option>
<option>.cc</option>
<option>.ac</option>
<option>.io</option>
<option>.sh</option>
<option>.tv</option>
<option>.bz</option>
<option>.nu</option>
<option>.ws</option>
<option>.kids.us</option>
<option>.com.cn</option>
<option>.net.cn</option>
<option>.org.cn</option>
<option>.de</option>
<option>.be</option>
<option>.tc</option>
<option>.vg</option>
<option>.ms</option>
<option>.gs</option>
<option>.jp</option>
<option>.net.nz</option>
<option>.co.nz</option>
<option>.org.nz</option>
<option>.in</option>
<option>.at</option>
<option>.am</option>
<option>.nl</option>
<option>.fm</option>
<option>.com.au</option>
<option>.net.au</option>
</select>
<input type="hidden" name="domain" id="domain" value="" />
<input type="submit" value="submit" class="search-go"> 
</form>
</div>


<div id="simple-tabs-3" class="tabcontent"  style="display:none">
<form target="_blank" action="http://ADD YOUR DOMAIN NAME/clients/cart.php?a=add&domain=transfer" method="post">
<input type="text" name="sld" size="40" class="search-field" value="Transfer.." onfocus="if(this.value == 'Transfer..') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Transfer..';}"/> 
<select name="tld" class="head-select">
<option>.com</option>
<option>.net</option>
<option>.info</option>
<option>.org</option>
<option>.me</option>
<option>.us</option>
<option>.mobi</option>
<option>.la</option>
<option>.asia</option>
<option>.biz</option>
<option>.com.tw</option>
<option>.tw</option>
<option>.org.tw</option>
<option>.idv.tw</option>
<option>.ca</option>
<option>.cn</option>
<option>.eu</option>
<option>.name</option>
<option>.cc</option>
<option>.ac</option>
<option>.io</option>
<option>.sh</option>
<option>.tv</option>
<option>.bz</option>
<option>.nu</option>
<option>.ws</option>
<option>.kids.us</option>
<option>.com.cn</option>
<option>.net.cn</option>
<option>.org.cn</option>
<option>.de</option>
<option>.be</option>
<option>.tc</option>
<option>.vg</option>
<option>.ms</option>
<option>.gs</option>
<option>.jp</option>
<option>.net.nz</option>
<option>.co.nz</option>
<option>.org.nz</option>
<option>.in</option>
<option>.at</option>
<option>.am</option>
<option>.nl</option>
<option>.fm</option>
<option>.com.au</option>
<option>.net.au</option>
</select>
<input type="submit" value="submit" class="search-go"> 
</form>
</div>




<script type="text/javascript">
var countries=new ddtabcontent("simple-tabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>	


</body>
</html>

 

The "tabcontent.js"

 

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){ 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
	return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
	this.cancelautorun() //stop auto cycling of tabs (if running)
	var tabref=""
	try{
		if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
			tabref=document.getElementById(tabid_or_position)
		else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
			tabref=this.tabs[tabid_or_position]
	}
	catch(err){alert("Invalid Tab ID or position entered!")}
	if (tabref!="") //if a valid tab is found based on function parameter
		this.expandtab(tabref) //expand this tab
},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
	if (dir=="next"){
		var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
	}
	else if (dir=="prev"){
		var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
	}
	if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
		this.cancelautorun() //stop auto cycling of tabs (if running)
	this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},

setpersist:function(bool){ //PUBLIC function to toggle persistence feature
		this.enabletabpersistence=bool
},

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
	this.selectedClassTarget=objstr || "link"
},

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
	return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},

urlparamselect:function(tabinterfaceid){
	var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
	return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

expandtab:function(tabref){
	var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
	//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
	var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
	this.expandsubcontent(subcontentid)
	this.expandrevcontent(associatedrevids)
	for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
		this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
	}
	if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
		ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
	this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},

expandsubcontent:function(subcontentid){
	for (var i=0; i<this.subcontentids.length; i++){
		var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
		subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
	}
},

expandrevcontent:function(associatedrevids){
	var allrevids=this.revcontentids
	for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
		//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
		document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
	}
},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
	for (var i=0; i<this.hottabspositions.length; i++){
		if (tabposition==this.hottabspositions[i]){
			this.currentTabIndex=i
			break
		}
	}
},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval
	this.cycleit('next', true)
},

cancelautorun:function(){
	if (typeof this.autoruntimer!="undefined")
		clearInterval(this.autoruntimer)
},

init:function(automodeperiod){
	var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
	var selectedtab=-1 //Currently selected tab index (-1 meaning none)
	var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
	this.automodeperiod=automodeperiod || 0
	for (var i=0; i<this.tabs.length; i++){
		this.tabs[i].tabposition=i //remember position of tab relative to its peers
		if (this.tabs[i].getAttribute("rel")){
			var tabinstance=this
			this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
			this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
			this.tabs[i].onclick=function(){
				tabinstance.expandtab(this)
				tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
				return false
			}
			if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
				this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
			}
			if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
				selectedtab=i //Selected tab index, if found
			}
		}
	} //END for loop
	if (selectedtab!=-1) //if a valid default selected tab index is found
		this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
	else //if no valid default selected index found
		this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
	if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
		this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
	}
} //END int() function

} //END Prototype assignment

0
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated

  I accept