jQuery Forum

When you create a nested list, the sub-pages it creates are nicely auto-generated but I'm having difficulties controlling the styling of these pages since none of the parent page's properties seem to inherit. Specifically I want to change the pages' "header" theme. If, on my main page where the nested list is located, I use a header of:

1. <div data-role="header" data-theme="e">

I was expecting that all auto-generated sub-pages from nested lists would inherit and apply the same header theme to each page but instead it always defaults to the blue theme (theme "b"). In the source of the listview widget, it has an option named "headerTheme" with a default of "b" which is where it gets it... but it doesn't seem like there's actually a way to override this default at all. Has anyone ever been able to use any non-blue theme on a nested list's sub-page header and how??

I was looking into theming a bit more and noticed that if I inner wrap my entire page container (data-role="page") with a div with classes of "ui-body ui-body-a" then all the form controls inside are auto-colored to fit the theme best. I tried instead adding a data-theme="a" to my page container verus adding the inner wrapping div but this doesn't auto-theme the form controls. Is there any way to add a data-theme attribute to a certain container to auto-color form contains inside? Just seems a bit weird to me if only way to achieve this is by adding the extra ui-body div.

In my app I have a few pages where I went back after it was finished and added some extra CSS rules to make them look nicer for whichever orientation mode the phone is currently in. I basically did this by just prefixing my css rules with the class names ".portrait" or ".landscape". It works fine in iPhones but it seems like in Droid phones that orientation rules don't work too well.... they tend to "stick". It will look fine usually in whatever mode it first opens in but when trying to flip it, the old changes remain the same, and flipping again to go back sometimes reapplies the last orientations mode style. I can't seem to find a pattern to it yet and other Droids I've tested behave the same way. Is this just an inherit bug in their mobile browser? Does anyone know any ways to actually make these orientation display changes work... maybe using CSS rules doesn't but there are alternatives? Just trying to figure out if I need to scratch the whole orientation mode changes just because not everyone can handle it correctly... it wouldn't be so bad if it was at least consistent but the partial changes end up mixing states and looking terrible.

Just curious since I couldn't seem to find any solid information of how to do custom theming in jQM. If I wanted to make a completely different color theme, let's say purple, is there a certain process to go about doing this? After looking at the jQM css file, my first thought was to look for groups of classes ending in theme suffixes like "-b" and "-c" and duplicate another set with a new custom suffix and then change hex colors. This about right or anything I'm missing?

I have a simple list that I created which is of course rendered as a listview widget by jQM. One of the list items I actually want to wireup some simple JavaScript functionality using a "click" event. I tried binding directly to the list item I want, using a delegate to do so, etc and no luck. I have even tried binding this after running a die().unbind().undelegate() on the UL of the list itself and still no luck... somehow my click event just won't trigger and I can't seem to find a reason. I ran a .data() on the UL just to check and on the specific LI to check when using bind to test and my event is in there, and the only "click" event... just can't trigger it for some reason. Anyone have any luck with this before?

When using nested lists, if the very last nested list is an ordered list then the numerals for the list items will not display. Anyone notice this and find a workaround?

In the below example, I want the "third tier" items to have their numerals since its declared as an ordered list but it doesn't display them at all:

1.         <ul data-role="listview">
               <li>First Tier - Item One
                   <ol>
                       <li>Second Tier - Item One
                           <ol><li>Third Tier - Item One</li><li>Third Tier - Item Two</li></ol>
                       </li>
                       <li>Second Tier - Item Two
                           <ol><li>Third Tier - Item One</li><li>Third Tier - Item Two</li></ol>
                       </li>
                   </ol>
               </li>
           </ul>
   

In the next below example, the second tier items will not display the numerals either because it's the last nested list in the chain:

1.         <ul data-role="listview">
               <li>First Tier - Item One
                   <ol>
                       <li>Second Tier - Item One</li>
                       <li>Second Tier - Item Two</li>
                   </ol>
               </li>
           </ul>
   

Hey Everyone -

I have been working a lot with the Tabs widget lately and have noticed a few things that caused me trouble/confusion so I was hoping someone could help. Specifically I am using the tabs widget in a "popup"/"lightbox" by having it controlled by another element source to toggle its visibility and the tabs are loaded via the Tabs ajax option for lazy loading content.

The first is the ordering of the events which, as I always read the ordering always follows, is select -> load -> show. The first oddity I was hoping someone could answer is why when I use Tabs with an fx option enabled then everything works fine and the events follow in that order... but if I remove the option for any effects on tab switching does the order change from select (of course) -> show -> load. I figured most, since by default its off, dont use the fx option so it seems the default event ordering is consistently reversed from the expectations. I know they're asynchronous calls so I guess in the case it's a battle of the timing it takes between the fickle ajax call and the static timing on the fx animation. But isn't this still a bit odd or could have been avoided by handling callbacks better in the source?

The second question/actual problem is partly related but specifically about the "show" event. I needed to add a reload capability to my implementation of the tabs which was nothing more than just simple calling .tabs('load', requestedIndex). I take care of all my binding for my UI on the load callback that I set when initializing the tabs. But here is what is giving me a problem... when you call 'load' it does not trigger the 'show' callback I set when initializing as well. I recently needed to add bindings in the content, for in this case, adding a jQuery UI accordion which needs the full height of its parent for initializing since I use it with the option fillSpace set to true. But creating the accordion with the rest of my bindings in the load callback did not work because it tries initializing the accordion before the tab is shown so it starts collapsed due to incorrect heights. When I move the bindings/call to initialize the accordion to the 'show' callback it works like a charm since it occurs after the content is displayed. So this was perfect except my catch 22 of needing to reload a tab... calling reload does not trigger show. So lets say someone clicks a button on my site to open my "tab lightbox"... switching back and forth between tabs the accordion works just fine because the 'show' event is triggered. But I basically lightly wrapped the tabs functionality to my own interface and one option is to specify which tab index as an argument for displaying the "tab lightbox"... so it is quite possible that when someone clicks to open it, they will try opening the same tab and I want to content to refresh via ajax as well no matter what like the others. So basically the only way I could do this was by storing the last tab index viewed and if the current one being selected is the same then it called 'load' instead of 'select' since 'select' wouldn't work anyway detecting that the tab is already active but its previous state was simply hidden. So in this situation of opening the "tab lightbox" to the same tab and trying to reload content... the accordion never can initialize in this situation since my 'show' callback isnt triggered.

Any tricks to get around this other than getting desperate and adding a setTimeout of a second or two to my load callback which always works?... but obviously I don't want to do it in such a sloppy way as that. And is there any good reason why the 'show' callback shouldn't be fired as well from the queue when content is manually reloaded using 'load'? It seems that if you're letting people manually reload content by offering that option then triggering the 'show' event and callback seems like it should naturally occur since, well, after it loads the content will be shown so why not? Any info or tricks would be greatly, greatly appreciated. Thanks!