Following up on my last post, it seems like the code you suggested should make the panel remain resizable even after any/all of the tabs are clicked on more than once. But it's clearly not doing that - once a tab is clicked on twice the .ui-tabs-panel is no longer resizable (http://www.imbunche.com/jquery/tabs/tabs-ajax-load.html). Do I need to call that load function again at some point?
The odd thing is this was working perfectly until I started pulling the content in dynamically. That is, if I made the .ui-tabs-panel resizable at load it would stay resizable once any of the other tabs were clicked (http://www.imbunche.com/jquery/tabs/tabs.html). But obviously I need to make it work with dynamic content. On Apr 8, 5:22 am, Klaus Hartl <[email protected]> wrote: > Oh, I think it's still making it resizable more than once... try: > > $('#tabs').tabs({ > load: function(event, ui) { > var panel = $(ui.panel); > if (!panel.hasClass('ui-resizable')) { > panel.resizable(); > } > } > > }); > > Shorter version: > > $('#tabs').tabs({ > load: function(event, ui) { > $(ui.panel).not('.ui-resizable').resizable(); > } > > }); > > --Klaus > > On 8 Apr., 07:13, imbunche <[email protected]> wrote: > > > Thanks again for the help. So this is another small step forward. I > > swapped in the new code here: > > >http://imbunche.com/jquery/tabs/tabs-ajax-load.html > > > With that change in place things are working as I'd like, but only the > > FIRST time I click on one of the tabs. Once I click on a tab for the > > second time (for example, if I load the page, click on Tab 2, and then > > click back to Tab 1) the resize handle vanishes and I can no longer > > resize the panel. I want the ability to resize the panel to persist > > for all the tabs, no matter how many times you click on them. > > > On Apr 8, 1:00 am, Klaus Hartl <[email protected]> wrote: > > > > Try: > > > > $('#tabs').tabs({ > > > load: function(event, ui) { > > > $(ui.panel).resizable(); > > > } > > > > }); > > > > You only need to make the one panel resizable that has jsut been > > > loaded. Does it work? > > > > --Klaus > > > > On 8 Apr., 00:51, imbunche <[email protected]> wrote: > > > > > Thanks! I think I'm almost there. I added the load function and now > > > > when I first load the page I'm able to resize the .ui-tabs-panel div, > > > > but when I click on any of the other tabs and/or click back to the > > > > first tab the handle (and, along with it, the ability to resize the > > > > panel) disappears. See here: > > > > >http://imbunche.com/jquery/tabs/tabs-ajax-load.html > > > > > I want to make it so you can resize that panel once you've clicked on > > > > one of the tabs, not just when the page loads. Along with that I'd > > > > like to keep the newly re-sized panel the same height for each tab. > > > > > On Apr 7, 5:15 pm, Klaus Hartl <[email protected]> wrote: > > > > > > Since you pulling in new content with every load you need to make it > > > > > resizable after every load... something like: > > > > > > $('#whatever').tabs({ > > > > > load: function() { > > > > > // make resizable here... > > > > > } > > > > > > }); > > > > > > --Klaus > > > > > > On 7 Apr., 16:52, imbunche <[email protected]> wrote: > > > > > > > Thanks for the suggestion. Unfortunately in the "much more > > > > > > complicated layout" I mentioned above I can't make the entire #tabs > > > > > > div resizable. In that set of tabs, the tab list items are stacked > > > > > > one on top of the other to the left of the tab content. What I need > > > > > > is to be able to resize the div that the AJAX content gets loaded > > > > > > into > > > > > > (.ui-tabs-content) and not the entire #tabs div. > > > > > > > The odd thing is this works - making the .ui-tabs-content div > > > > > > resizable - as long as the content of .ui-tabs-content isn't getting > > > > > > pulled in dynamically. I'm just wondering if I'm missing something > > > > > > to > > > > > > do with theming static vs. dynamic tabs. It looks like the markup > > > > > > that's generated is the same, but it's definitely not working as > > > > > > expected. > > > > > > > On Apr 7, 7:36 am, Shedokan <[email protected]> wrote: > > > > > > > > Why don't you use $('#tabs').resizable();? > > > > > > > > On 7 אפריל, 09:14, imbunche <[email protected]> wrote: > > > > > > > > > I setup two really basic pages to try to troubleshoot a problem > > > > > > > > I'm > > > > > > > > having on a much more complicated layout. > > > > > > > > >http://imbunche.com/jquery/tabs/tabs.htmlhttp://imbunche.com/jquery/t... > > > > > > > > > On the first page I'm using the example code for UI Tabs > > > > > > > > (stripped out > > > > > > > > of the index page that comes with a full download of the latest > > > > > > > > version). All I've added is the code to make the > > > > > > > > .ui-tabs-panel (the > > > > > > > > panel beneath the tabs) resizable. It's a little bit wonky, > > > > > > > > but the > > > > > > > > handle shows up in the bottom right corner and the panel is > > > > > > > > indeed > > > > > > > > resizable. > > > > > > > > > On the second page I've switched the tabs so they pull their > > > > > > > > content > > > > > > > > from other html files - so-called AJAX Mode > > > > > > > > (http://docs.jquery.com/UI/ > > > > > > > > Tabs#Ajax_mode). The tabs themselves work, but even though > > > > > > > > .ui-tabs- > > > > > > > > panel is still the class given to these dynamically loaded divs > > > > > > > > they're no longer resizable. > > > > > > > > > I'm guessing there's something really obvious I'm missing, but > > > > > > > > I've > > > > > > > > been at it for hours so any help would be appreciated. > > > > > > > > > Cheers, > > > > > > > > Chris --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
