inline-styles bugs with ui.sortable

[iamcalledrob]

jQuery UI (1.7) seems to have a few bugs with its use of inline styles
with ui.sortable.

If I define a helper, with a width and height set in CSS, the helper's
properties are ignored and an inline style is set that overwrites that
data for my helper. So, if my helper is 200x200px, as soon as that
helper is cloned and used, an inline style is applied to make it
completely different dimensions.

The only way to fix this is to define an inline style on the element.

This appears to be because it is checking helper[0].style.width
instead of $(helper[0]).width(), which reads the width correctly.

A similar thing happens when I explicitly define a helper, or use
clone. The original item in the list gets an inline style of display:
none; applied to it, even if I have defined it otherwise.

Here is a testcase:
http://jsbin.com/obale

Here is an example of it working, if I explicitly define an inline
style:
http://jsbin.com/okoti

Rob

[David Muir]

Is it just me, or is there no easy way to determine the index of the
currently selected tab?

The only way i can see is to do something like:

var tabs = $('.tabs');
var selected = null;
tabs.find('li').each(function(i){
if($(this).hasClass('ui-tabs-selected'){
selected = i;
return false;
}
});

Could we add a method for this?
e.g. .tabs('selected') ?

Although it starts bleeding into general jQuery territory, it would be
cool to be able to query tab positions based on other details as well:

.tabs('position', 'href', '#myTab'); //returns the index of the tab
containing href="#myTab"
.tabs('position', 'text', 'My Tab'); //returns the index of the tab with
the title "My Tab"

It's kind of related to http://dev.jqueryui.com/ticket/3171, which
highlights the issues of not being able to easily get the index of a tab.

Let me know if it's worth putting on trac.

Cheers,
David

[David Muir]

I've thought about it some more, and I've come up with this:

If the index is a string, then treat it like a jquery selector,
otherwise, it's a normal index number.
This would give the position method a lot of flexibility, and wouldn't
clutter the interface with a bunch of extra options.
eg:
.tabs('position'); //returns the position of the currently selected tab
.tabs('position', '.ui-tabs-selected'); //same as above
.tabs('position', '[href="#myTab"]'); //using attribute selector
.tabs('position', '#tabWithId'); //using id selector
.tabs('position', ':contains("My Tab")'); //position of tab with text
"My Tab"

This functionality could be expanded to work with all index based methods:
.tabs('disable', '#tabWtihId');
.tabs('select', ':contains("My Tab")');
etc.

I went ahead and made a ticket for this :
http://dev.jqueryui.com/ticket/4354

[Klaus Hartl]

On 17 Mrz., 07:53, David Muir <davidkm...@gmail.com> wrote:
> I've thought about it some more, and I've come up with this:
>
> If the index is a string, then treat it like a jquery selector,
> otherwise, it's a normal index number.
> This would give the position method a lot of flexibility, and wouldn't
> clutter the interface with a bunch of extra options.
> eg:
> .tabs('position'); //returns the position of the currently selected tab
> .tabs('position', '.ui-tabs-selected'); //same as above

$(...).data('selected.tabs');

> .tabs('position', '[href="#myTab"]'); //using attribute selector
> .tabs('position', '#tabWithId'); //using id selector
> .tabs('position', ':contains("My Tab")'); //position of tab with text
> "My Tab"

$('ul.ui-tabs-nav a').index( $('a[href="#myTab"]') );

etc.

> This functionality could be expanded to work with all index based methods:
> .tabs('disable', '#tabWtihId');
> .tabs('select', ':contains("My Tab")');
> etc.
>
> I went ahead and made a ticket for this :http://dev.jqueryui.com/ticket/4354

I don't believe this should be part of the core. As shown, it can be
done easily with what jQuery provides already.

As for selecting a tab by its id, there is already a ticket for this.


--Klaus

[Klaus Hartl]

PS: Please do not hijack threads.

This one has become more or less useless for Rob (since you changed
the subject and not everybody will see his initial post any longer).

--Klaus

On 17 Mrz., 07:53, David Muir <davidkm...@gmail.com> wrote:

> > It's kind of related tohttp://dev.jqueryui.com/ticket/3171, which

[David Muir]

Klaus Hartl wrote:

On 17 Mrz., 07:53, David Muir <davidkm...@gmail.com> wrote:
  

I've thought about it some more, and I've come up with this:

If the index is a string, then treat it like a jquery selector,
otherwise, it's a normal index number.
This would give the position method a lot of flexibility, and wouldn't
clutter the interface with a bunch of extra options.
eg:
.tabs('position'); //returns the position of the currently selected tab
.tabs('position', '.ui-tabs-selected'); //same as above
    

$(...).data('selected.tabs');
  

Are the data keys documented anywhere?
selected.tabs is mentioned in the overview, but I wrongly assumed it returned the tab element itself, not the index.

.tabs('position', '[href="#myTab"]'); //using attribute selector
.tabs('position', '#tabWithId'); //using id selector
.tabs('position', ':contains("My Tab")'); //position of tab with text
"My Tab"
    

$('ul.ui-tabs-nav a').index( $('a[href="#myTab"]') );

etc.
  

Didn't know about the index method. That makes life a lot easier :-)

This functionality could be expanded to work with all index based methods:
.tabs('disable', '#tabWtihId');
.tabs('select', ':contains("My Tab")');
etc.

I went ahead and made a ticket for this :http://dev.jqueryui.com/ticket/4354
    

I don't believe this should be part of the core. As shown, it can be
done easily with what jQuery provides already.

As for selecting a tab by its id, there is already a ticket for this.


--Klaus
  

With .index(), yeah I agree. Feel free to go ahead and close the ticket then as bogus or whatever.
I'll put up a tickets instead to include the index tip in the overview for the Tabs documentation, and to clarify that selected.tabs returns the index of the currently selected tab.

Cheers,
David

[David Muir]

I'll blame this one on Google, since it doesn't post back to the sender.
Also, since nobody had replied to it yet, I figured it was safe...
speaking of which, I never got Rob's post.

[Klaus Hartl]

On 17 Mrz., 08:48, David Muir <davidkm...@gmail.com> wrote:
> Are the data keys documented anywhere?
> selected.tabs is mentioned in the overview, but I wrongly assumed it
> returned the tab element itself, not the index.

Not sure, I think it was once in some "Core" section in the
documentation, but I cannot find it any longer - documentation has
been restructured the other day. Basically for every plugin you can
retrieve every available (namespaced) option like that:

$(...).data("disabled.tabs");
$(...).data("collapsible.tabs");

etc.

> I'll put up a tickets instead to include the index tip in the overview
> for the Tabs documentation, and to clarify that selected.tabs returns
> the index of the currently selected tab.

I've improved the documentation about this:
http://docs.jquery.com/UI/API/1.7/Tabs#...retrieve_the_index_of_the_currently_selected_tab


--Klaus

[Richard D. Worth]

On Tue, Mar 17, 2009 at 5:22 AM, Klaus Hartl <klaus...@googlemail.com> wrote:

On 17 Mrz., 08:48, David Muir <davidkm...@gmail.com> wrote:
> Are the data keys documented anywhere?

Each option includes sample code in the documentation showing how to get and set its value after init. Example:

http://docs.jquery.com/UI/Tabs#option-selected

"
Code examples

Initialize a tabs with the selected option specified.
    $('.selector').tabs({ selected: 3 });

Get or set the selected option, after init.
    //getter
    var selected = $('.selector').tabs('option', 'selected');
    //setter
    $('.selector').tabs('option', 'selected', 3);
"

> selected.tabs is mentioned in the overview, but I wrongly assumed it
> returned the tab element itself, not the index.

Not sure, I think it was once in some "Core" section in the
documentation, but I cannot find it any longer - documentation has
been restructured the other day. Basically for every plugin you can
retrieve every available (namespaced) option like that:

$(...).data("disabled.tabs");
$(...).data("collapsible.tabs");

this syntax is deprecated in 1.7, in favor of

$(...).tabs("option", "disabled");
$(...).tabs("option", "collapsible");

See http://jqueryui.com/docs/Developer_Guide#Setters_and_Getters

- Richard

[David Muir]

Richard D. Worth wrote:

On Tue, Mar 17, 2009 at 5:22 AM, Klaus Hartl <klaus...@googlemail.com> wrote:

On 17 Mrz., 08:48, David Muir <davidkm...@gmail.com> wrote:
> Are the data keys documented anywhere?

Each option includes sample code in the documentation showing how to get and set its value after init. Example:

http://docs.jquery.com/UI/Tabs#option-selected

"
Code examples

Initialize a tabs with the selected option specified.
    $('.selector').tabs({ selected: 3 });

Get or set the selected option, after init.
    //getter
    var selected = $('.selector').tabs('option', 'selected');
    //setter
    $('.selector').tabs('option', 'selected', 3);
"

Sheesh, the more I'm looking at this, the more I'm sounding like a moron. For some reason I was thinking that using $(selector).tabs('option', 'selected') would return the setting used  on init...

> selected.tabs is mentioned in the overview, but I wrongly assumed it
> returned the tab element itself, not the index.

Not sure, I think it was once in some "Core" section in the
documentation, but I cannot find it any longer - documentation has
been restructured the other day. Basically for every plugin you can
retrieve every available (namespaced) option like that:

$(...).data("disabled.tabs");
$(...).data("collapsible.tabs");

this syntax is deprecated in 1.7, in favor of

$(...).tabs("option", "disabled");
$(...).tabs("option", "collapsible");

See http://jqueryui.com/docs/Developer_Guide#Setters_and_Getters

- Richard

It all makes sense now. I think I'll go hide in a corner now...

David

[Scott González]

Hey Rob,

Can you file a ticket for this at http://dev.jqueryui.com/newticket (requires registration)?  Thanks.