[?] How To: Disable Tabs on Tab Content Script

[fwhite]

• Script Title: Tab Content Script (v 2.0)
• Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm
• Issue:
  
  I need to disable all other tabs within the Tab Content Script based on specific conditions.
  I have attached screenshots to better explain the situation.
  
  if the "Embed" field is filled, the "Direct Upload" tab should be disabled & not clickable.
  
  
  
  if a file is queued on "Direct Upload", the "Embed" tab should be disabled & not clickable.
  
  
  
  

if anyone can provide sample code to disable the tabs based on the "Embed" field, I should be able to work out the other event handling.

thank you for any advice / direction.

[ddadmin]

It's possible, but how complex the solution turns out to be really depends on exactly the "conditions" in which the other tabs are selected. As is you say:

I need to disable all other tabs within the Tab Content Script based on specific conditions.

The problem with this logic is that by disabling all other tabs, it also means the user is now locked into the lone tab that isn't disabled. What other conditions are there to revive the other tabs again?

Speaking in generalities, when a user clicks on a tab, you can in turn do something with one or more of its peer tabs by doing something like:

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li onClick="countries.tabs[0].style.color='gray'"><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>

In the above example, clicking on the second tab will cause the first tab's text to turn gray. The code:

countries.tabs[0]

is an array, where "countries" is simply the variable you created when initializing this tab content instance (ie: var countries=new ddtabcontent("countrytabs")), and 0 means access the first tab within all the tab links of this instance. Make sure onClick is added to the <LI> of each tab, and not <A>, as that element already has an onClick event assigned dynamically by the script.

[fwhite]

It's possible, but how complex the solution turns out to be really depends on exactly the "conditions" in which the other tabs are selected. As is you say:

The problem with this logic is that by disabling all other tabs, it also means the user is now locked into the lone tab that isn't disabled. What other conditions are there to revive the other tabs again?

thanks for the prompt response.

well, currently there are only two tabs as displayed in the image above.
yes, I would like the user to be locked into a tab, based on:

disable tabs
===========

1. tab1 - text is inserted into the "Embed Code" field (disable other tabs)
2. tab2 - files are queued (disable other tabs)

re-enable tabs
===============

1. tab1 -"Embed Code" field is blank or contains only spaces (enable all other tabs)
2. tab2 - no files are queued (enable all other tabs)

Q: will this changing the tab to "gray" disable selection of it? (I have code to handle these other events, the only thing missing was disabling the tabs.)

thank you.

[fwhite]

sorry to double post,

but I was thinking more of using a DIV as "modal" to cover the other tabs & their content to disable interaction w/ them.
the code you have provided makes the tab gray, but it does not disable interaction:

onClick="countries.tabs[0].style.color='gray'"

maybe I should have mentioned "disable interaction" on the first post.
sorry for the confusion.

please advise.
thank you.

EDIT:

could you please also, state you how to reverse this?

onClick="countries.tabs[0].style.color='gray'"

thanks.

[ddadmin]

Sure, what I had posted above was just a demo of how to programmically access the tabs. Based on your clarification of what you wish to accomplish though, I've modified the script with the following two features:

-Dynamically disable all tabs except a particular one based on its index relative to the other tabs, by calling: tabcontentvar.disabletabs(exception)

-Dynamically re-enable all tabs again, by calling: tabcontentvar.enabletabs()

By calling these two functions as needed, you should be able to have tabs disabled and re-enabled when you see fit.

To use the modified script, first, use the attached tabcontent.js file, then in your HTML, do something like:

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

<style type="text/css">

.disabledtab{
color: gray !important;
}

</style>

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

/***********************************************
* Tab Content script v2.0- © 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>

<body>

<h3>Demo #1- Basic implementation</h3>

<p><a href="javascript: countries.enabletabs()">Enable All tabs</a></p>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li onClick="countries.disabletabs(1)"><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>

Click on the 2nd tab, and all other tabs are disabled (non clickable). Click on the "enable tabs" link at the top, and they are functional again. Note the code in red. The CSS class "disabledtabs" can be used to style the disabled tabs' look. Be sure to add an "!important" suffix to each rule within this selector, to make sure it takes precedence over whatever existing style that's been added to the tabs already. This should be enough to get you where you want to go.

[fwhite]

thank you.
I will try it out tonight.

[fwhite]

I just tried it today & it works.
thank you.