PDA

View Full Version : Using dropdown list option to select tab menu content



veiga
11-10-2011, 02:22 AM
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/dynamicindex17/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
11-10-2011, 06:28 AM
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
11-10-2011, 01:39 PM
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
11-11-2011, 03:46 AM
Hmm I'm not sure I understand- please elaborate what you mean by placing a link inside a drop down option.

veiga
11-11-2011, 04:35 PM
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