jQuery Forum

I just had a first look at a jQM website using a Windows 8 phone and it looks BAD. The big thing that I noticed was that the linked listviews items (<ul data-role="listview">... <li><a href="#">...</a></li>... </ul>) get all bulky and ugly. You can see below how the right arrow drops down to the next line instead of being all tidy off to the right, and there is lots of padding and/or spacing

The jQuery mobile website does a magnificent job of doing a splitview style rendering: two columns on big screens, one column (hide the nav) on a small screen. Are there any instructions on how to replicated this sort of approach? You'd think that if the JQM site is doing it, it should be both doable and hopefully readily-replicable, but I don't see how

The "splitview" plugin is a lovely (if under-documented) approach, but it completely fails in IE: http://asyraf9.github.com/jquery-mobile/
The primary advantage of the splitview, to my mind, is the possibility of using the same code for mobile and non-mobile browsers, but that doesn't work if the site won't load in IE.

OTOH, the JQM website *does* work in IE, making it (to my mind) the preferable approach. I found a few hacks online, but nothing very straightforward. Any ideas?

This is kind of a two-part question. 

On a non-mobile authenticated website, I might have 5 or 10 different pages, and each time one loads it might check to see that not more than 5,10,15 minutes has passed since the last page load, and the session might time out if too much time has elapsed.

I've got a question about how jQuery (and maybe JS as a whole) decides when to execute commands on an event. I have script that I'd like to behave like this:

1. User clicks a button.
2. A "please wait" animation displays
3. A long-ish non-Ajax jQuery command runs (takes a few seconds)
4. Animation ends, life goes on as usual

But instead what happens is that step 2 doesn't occur until step 3 has completed, so in effect the animation never appears. Is this a feature? Is jQuery/JS trying to do me a favor by not executing any of the onClick functionality until it's all ready to go?

Is there a way to force it to do step 2 before it moves on to step 3? If step 3 were an Ajax event, there are all sorts of ways to handle this. Is there a non-ajax equivalent to ajaxStart() and ajaxStop()?

The code in question is at: http://www6b.wittenberg.edu/lib/public/non-ajax-throbber.php

Thanks!

I have a script that works nicely but sometimes takes several seconds to run. (It has to iterate through every line of a table, so it runs long if the table has a lot of contents.)

I'm ok with the wait, but I'd like to provide some feedback to the user so they know it's working. The normal throbber/startAjax functions only work on ajax calls; this isn't an Ajax call, so it's not detected by those methods. It's just a JS process that takes a few seconds to run. I thought I could just do something like this:

$('#button').click(function () {  // when the user clicks the button
  $('#throbber').show();             // start the throbber before iterating thru the table
  $('table tr').each(function() {
      // do some stuff
  });
  $('#throbber').hide();                // hide throbber after iterating thru table
}); // end onClick

Unfortunately, this doesn't work. If I leave the throbber.hide() method off, the throbber starts displaying *after* the whole click(function()) runs its course. If I add the .hide() method back in, then the throbber never shows up at all.

So: Is there a way to say this? :
1. Show the throbber before you start iterating
2. Do the iteration
3. Hide throbber when done

You can see my live code at : http://www6b.wittenberg.edu/lib/public/non-ajax-throbber.php
(the functionality of the page is: click some of the table contents to select those entries, then click the button at the top of the page to limit to those entries. that click is where it takes a while)

Any help would be much appreciated! Thanks.