Hi.

I've got a set of spans ...

<div class="tabHs">
 <span id="tabH_UserAdmin" class="tabHE">User Administration</span>
 <span id="tabH_ReportAdmin" class="tabHE">Report Administration</span>
 <span id="tabH_ReportGenerator" class="tabHE tabHA">Generate Report</span>
</div>

They are styled to look like tabs. There is CSS dealing with hovering,
active/inactive, enabled/disabled.

I've got an onClick handler on the class of tabHs (so I can have
multiple tab controls).

function tabHeadClick(ev){
        console.group('tabHeadClick(', arguments, ')');

        var el = ('click' === ev.type) ? ev.element() : ev;

        // Don't process disabled tabs.
        if (false == el.hasClassName('tabHD')){
                // Update the tab header.
                el
                        .addClassName('tabHA')
                        .siblings()
                        .without(el)
                        .invoke('removeClassName', 'tabHA');

                // Update the tab sheets.
                var a_IdParts = el.id.split('_');
                var o_TabSheet = $('tabS_' + a_IdParts[1]);

                // Upda the required tab sheet if it exists and it is not 
currently active.
                if (o_TabSheet && !o_TabSheet.hasClassName('tabSA')){
                        // Make all other tabSheets inactive
                        el
                                .up('.tabC')
                                .down('.tabSs')
                                .childElements()
                                .without(o_TabSheet)
                                .invoke('addClassName', 'tabSI')
                                .invoke('removeClassName', 'tabSA');

                        // Make this tabSheet active.
                        sizeElements(
                                o_TabSheet
                                        .addClassName('tabSA')
                                        .removeClassName('tabSI')
                        );
                }
        }

        console.groupEnd();
}


What I want to do is, when they click a span is to slide that
o_TabSheet to the top of the list.

The user isn't dragging the tab, I just want the active tab to be the
first in the list. A nice sliding effect would be what I would like to
see, but I have no idea at all how to do such a thing.

Regards,

Richard.


-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to