jQuery's document ready faulty on Nokia? (Alert fixes jQuery in Nokia. Suggest alternatives?)
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.
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.
精彩评论