CODEWITHSUNDEEP
jqueryjquery-ui
sairn
sairn

Reputation: 490

After switching from jquery-ui 1.8.x to 1.10.3, "tabs()" do not work as expected....--Is there a workaround to enable the "tab key" work again?

After switching from jquery-ui 1.8.x to 1.10.3, "tabs()" do not work as expected....

Question: Is there a workaround to enable the "tab key" work again?

Notes:

The user formerly was able to use the "tab key" to move thru each tab/panel. --This no longer works, and has become a bit of a "508 compliance" issue.

(Note: this app does not use a <base> url tag.)

UPDATE:

So, it turns out that "tab" key is tabbing, but, because, for whatever reason the focused tab is no longer detectable (or, highlighted/outlined). This makes it appear as if it is not working.

(would this be due to CSS change when switching to the new version of jQuery-ui) ?

I've tried various css entries to gain control...

The only one that appears to have an effect is this selector: 

    .ui-widget :focus     
    { 
        border-style: inset !important;
        border-width: 5px !important;
    }

However this selector too broad and impacts other widgets. I only want to "highlight" the focused tab - not other elements.

So, how can I select, and effect change (on focus) to the "tabs" only?
(did the "tab"-related class names change in the new jquery-ui version, I wonder...)

Perhaps - since this is a different question, I should create a new post?

Upvotes: 2

Views: 774

Answers (1)

Popsyjunior
Popsyjunior

Reputation: 305

You need to use the full URL of the site in the hash links. Here's an example:

<div id="loginTabs">    
    <ul class="nav nav-tabs">
        <li><a href="<?php echo $_SERVER["REQUEST_URI"]; ?>#parent-login">Parent Login</a></li>
        <li><a href="<?php echo $_SERVER["REQUEST_URI"]; ?>#staff-login">Staff Login</a></li>
        <li><a href="<?php echo $_SERVER["REQUEST_URI"]; ?>#student-login">Student Login</a></li>
    </ul>

    <div id="parent-login">
        <?php $this->showLoginForm("parent"); ?>
    </div>

    <div id="student-login">
        <?php $this->showLoginForm("student"); ?>
    </div>

    <div id="staff-login">
        <?php $this->showLoginForm("staff"); ?>
    </div>
</div>

I'll recommend you use version 1.8.x for your project, since it doesn't have this issue.

Upvotes: 1

Related Questions