I'm using a select menu in one of my pages and I'm encountering a really strange side effect: when the select element is present on the page, it causes other JQM elements (such as grids) to become slightly blurry. It may seem like nitpicking, but it was enough to make me check my glasses - it also made a small logo (required) to become completely unreadable.
This effect does not occur in desktop browsers, only on devices. Haven't had a chance to test iPhone yet but its most certainly present on ICS 4.0.3 in Chrome, the default browser and in Dolphin HD.
Has anyone else encountered this? I suspect its a focus issue - its the same kind of "blurriness" you see during scrolling or momentarily on a button press as the page transition starts.
Are there any plugins or has anyone here modified the filter function to search through nested lists (or JSON data)?
I've been working with a software engineer here but his grasp of jQuery (and jQuery Mobile in particular) is sketchy at best- and the function he's given me just seems to have completely broken the filter.
I'm building a jQuery Mobile web-app and I'm doing a bit of code clean-up before my next sprint. I'm wondering what the best practice is for icons in a mobile web environment. The content of the web-app itself isn't very image heavy; the only images are UI elements, but these elements occur a lot (for example, I have extensive nested lists with different icons).
My primary concern is that the majority of the target clients are power users: they tend to cycle through new phones every 6 months or so, and almost all use flagship models. This means that in the next few months (before the app goes out to our clients), most will be using phones like the HTC One X and Galaxy S3 with screen resolutions of 720p. Since the app itself requires quite a lot of server side activity (authentication and so on), I'm concentrating on reducing server load. One method is using CSS sprites; and here's where I'm a bit lost.
Would it be better practice to:
1. Use a large high res sprite for the UI elements and scale each of these elements according to screen resolution (potential client side performance issues?
2. Use separate sprites with appropriate resolutions for each screen resolution category
3. Use one large sprite with UI duplicate elements scaled for all screen resolutions
EDIT: Just to be clear, I'll be designing for 480x320, 800x400, 960x640, 1280x720 to ensure maximum compatibility
I'm trying to make a listview searchable with the data-filter="true" attribute, but the search bar shows up half hidden under the header and can't seem to be focussed. Also have a programmaticaly built list with data-filter="true" which doesn't show any data-filter at all, and inspecting the code after its run in a webpage shows that the search DIV was never created at all. Is anyone else ecountering these issue?
It seems like the ui-state-active property isn't working properly; it will work fine for one cycle (ie navigating from page 1 to page 2 to page 3) but navigation after that it stops highlighting the correct button. Adding the ui-state-persist class seems to have no effect whatsoever. Is there a solution to this or at least a palatable work around?
I'll try separating each page into individual HTML documents (I have a hunch that its something to do with the page load, as refreshing the page will refresh above mentioned cycle) and report back, but in the meantime any advice would be helpful. As stated in a previous thread, button states play an important part in my UI design, so I need to get a reliable fix working ASAP.
Can anyone suggest a way to swap navbar icons depending on its state?
Specifically, my design brief calls for grey icons when the button (?) is in its "up" state, and when its active a colour version of the icon is shown (to indicate that page is active). I suspect there would be a custom function involved?
I'm working on a project in JQuery Mobile and I'm struggling to change any of the default spacing. I've torn into the CSS, written dozens of overrides, tried to style divs directly... all to no effect. My main issue is that form elements have huge vertical spacing, which not only looks ugly but breaks the page aesthetic I'm trying to go for. I've noticed that the huge spacing seems to kick in below a certain pixel width (around 480 I think), but at higher widths it looks fine.
Can someone help me out with this? I feel like I'm missing something obvious, but I'm just not sure what...