[Proto-Scripty] Re: How do I "sort" a set of divs slowly.
2009/2/24 david :
>
> Hi richard,
>
> I've done something like that, but very different :))
>
> Here is my SIMPLE solution:
>
> - first clone the desired tab (let's call him cloneTab) and attach
> cloned element to parent, and clonePosition of the cloned tab from the
> creator tab
> - next detach the creator tab, and replace it with an empty element
> with the same dimension (let's call it emptyTab)
> You should also append an empty element as first child of the
> contener (let's call him emptyFirstTab)
> - Next, motion, Effect.Parallel (
> - emptyTab to width=0
> - emptyFirstTab from width=0 to the desired
> width
> - cloneTab should move to its final position
> )
> - Next, detach the emptyTab and the emptyFirstTab, and reattach as
> the first child of the contener the cloneTab.
>
> You don't see any flickering if all attach/detach are grouped in the
> code.
>
> --
> david
>
>
> On 24 fév, 17:47, Richard Quadling wrote:
>> Hi.
>>
>> I've got a set of spans ...
>>
>>
>> User Administration
>> Report Administration
>> Generate Report
>>
>>
>> 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!"
> >
>
That's a bit beyond me at the moment. I think the "sortable"
functionality is what I am looking for. The Effect.Morph demo also
looks promising.
I think I need to determine the current width's and left's of my
"tabs" and then morph them all to new positions, taking into account
the widths.
I'd like to have the active tab slide in front, so I assume some
z-index stuff is also required.
I think.
--
-
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: How do I "sort" a set of divs slowly.
Hi richard,
I've done something like that, but very different :))
Here is my SIMPLE solution:
- first clone the desired tab (let's call him cloneTab) and attach
cloned element to parent, and clonePosition of the cloned tab from the
creator tab
- next detach the creator tab, and replace it with an empty element
with the same dimension (let's call it emptyTab)
You should also append an empty element as first child of the
contener (let's call him emptyFirstTab)
- Next, motion, Effect.Parallel (
- emptyTab to width=0
- emptyFirstTab from width=0 to the desired
width
- cloneTab should move to its final position
)
- Next, detach the emptyTab and the emptyFirstTab, and reattach as
the first child of the contener the cloneTab.
You don't see any flickering if all attach/detach are grouped in the
code.
--
david
On 24 fév, 17:47, Richard Quadling wrote:
> Hi.
>
> I've got a set of spans ...
>
>
> User Administration
> Report Administration
> Generate Report
>
>
> 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
-~--~~~~--~~--~--~---
