0

I have some jQuery running on a mobile web site that does some layout calculations and resizes a few elements.

This was working fine on the browsers we support--even Nokia's--but I then received reports that there were problems on the Nokia.

I then realized that my E72's System software was last updated late last year so went ahead and downloaded the newest version. And, now the bug is there.

After going through the usual JS debug process of adding alerts to the function, I found that if I trigger an alert in the function that's doing all the layout calculations and resizing, then it works! If I omit the alert, nothing happens.

In the past I've had something similar to this happen in IE on occasion, where IE, for whatever reason, needed to have the JS 'pause' for it to catch up. The usual trick was to use wrap the function(s) that I was having trouble with in a setTimeout set to 0.

I tried this on the Nokia, but no luck. I then tried 1 second, 10 seconds, but still, no luck. Only an alert would get it to work.

Any theories on this one? Is there something that a JS alert does in terms of timing JS functions that could potentially be replicated with something other than an alert or setTimeout?

UPDATE:

Per request, the sample code. This is inside a function that it triggered from document ready. 

var extraWidths = $icon.width() + $button.width() + 20 + 5; 
var containerWidth = $panel.width();
var percentWidth = 100 - ( Math.floor((extraWidths/containerWidth)*100) );
$searchInput.css('width',percentWidth+'%');
alert('hello world'); // if I add this, Nokia works correctly.

What I'm doing is that after the document renders, I'm calculating the widths of some elements, subtracting that from the total width of the parent container, then adjusting an input field inside of it to take up the remaining space (set to a percentage width).

This works fine in Webkit, Firefox, BlackBerry (OS5 and OS6) so I don't think it's a code error, but hoping that someone has come across a workaround (aside from the alert).

UPDATE 2:

After more research, I have a new theory: Nokia web browser doesn't properly notivy jQuery that the document is ready.

I've found that wrapping jQuery that needs to calculate dimensions of DOM elements only works when I wrap it inside a setTimeout. And it's not an arbitrary time delay...I need to make sure the time delay is LONGER than the time it takes the browser to render the DOM properly. Since I can't possibly know that given device speeds and network speeds, I have to stick in times of 1-2 seconds, which isn't going to cut it.

So, my new question: Is anyone aware of any issue's with jQuery's document ready and it not working properly on Nokia devices? If so, then we need to rethink our use of jQuery, unfortunately.

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Don't think we'll be able to help without seeing the offending code. Super wild guess - you're making layout changes, then reading back size info from the page before it's laid out. – jfriend00 Jul 25 '11 at 01:07
  • @jfriend00 I added the block of code that's not working without the alert on the Nokia. – DA. Jul 25 '11 at 01:56
  • What code comes after the alert? The alert shouldn't affect the code before it, but it could affect the code after it. I think we need to see what comes after. Are you then reading some sizes off of `$searchInput`? – jfriend00 Jul 25 '11 at 02:32
  • @jfriend00. Nothing comes after. That's the end of the function. The purpose of the function is to set the width of the input field. (cached as $searchInput) – DA. Jul 25 '11 at 02:43
  • Is that the entire end of everything you're doing in document ready? FYI, it looks to me like you might be able to solve this sizing problem with pure HTML/CSS, but I'd need to see the relevant HTML to offer ideas. – jfriend00 Jul 25 '11 at 02:49
  • There's all sorts of other stuff going on elsewhere. But that's the entirety of this one jQuery function. I think we will have to do this with just plain CSS, though we've been trying to cut down on all of our device-centric CSS. (That said, Nokia is is the IE6 of mobile devices, so this won't be the first workaround we've had to target Nokia with) – DA. Jul 25 '11 at 02:55
  • 1
    My theory is that when you have the alert, it allows the document to lay out and incorporate the changes you just applied to they are in effect before all the rest of your code sees the page. Without the alert, the `$searchInput` changes haven't been laid out yet so the rest of your code messes it up somehow. – jfriend00 Jul 25 '11 at 03:02
  • Yea, that's a good theory. Nokia is probably not properly communicating the document ready state to jQuery (or maybe jQuery isn't interpreting it correctly...not that I blame jQuery for not addressing a dying platform...) – DA. Jul 25 '11 at 03:10
  • Aha! It looks like setTimeout will work as an option. Turns out I wasn't wrapping enough of the function inside of the setTimeout initially. I'll get an update with the finished code... – DA. Jul 25 '11 at 04:00

1 Answers1

1

Instead of $(document).ready(function() add an id to your body, and use $(document.getElementById('bourbodyid')).ready(function() .

Maybe not so wrong of a workaround than the other ones.

DisplayName
  • 3,093
  • 5
  • 35
  • 42
zahorvath at gmailll
  • 11
  • 1