Using dropdown list option to select tab menu content

[veiga]

1) Script Title: Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem:

I'm trying to modify the script in such a way i can select tab content using a drop down list, instead of tab. The modifyied script work in Firefox and opera but not in IE, Safari and Crome browsers.

The .js file was not changed. The major change is replacing tab with dropdown list.

The modifyied script is here:
http://www.celestinoveiga.com/testing/menu2/menu.php.

I need help in order to make it working in Safari, IE and Crome browsers.

Thanks in advances.

Celestino

[ddadmin]

Try using the "onChange" event handler of the select element to trigger the selecting of a tab. For example:

<select onChange="countries.expandit(this.selectedIndex)">
<option>Tab 1</option>
<option>Tab 2</option>
<option>Tab 3</option>
<option>Tab 4</option>
</select>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

[veiga]

It work perfectly!! Thanks.

Is there a way to place directly in a dropdown option the links:

<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>

I tryed but it dont work.

Regards,

Celestino

[ddadmin]

Hmm I'm not sure I understand- please elaborate what you mean by placing a link inside a drop down option.

[veiga]

Hello,

in fact i would like the link to work inside the dropdown, because if i have many links i will have many tabs, which take a lot of spaces in web page. I tryed the code below but it dont work.

<select onChange="countries.expandit(this.selectedIndex)">
<option><a href="#" rel="country1" class="selected">Tab 1</a></option>
<option><a href="#" rel="country2">Tab 2</a></option>
<option><a href="#" rel="country3">Tab 3</a></option>
<option><a href="#" rel="country4">Tab 4</a></option>
</select>

Regards,

Celestino