1) The problem may occur if you have something like the following javascript code in your web page:
<script src="js/jquery-1.4.1.min.js" ></script>Now if the "reveal" function is called using the <select onchange="reveal(...)"> as shown above, the call to the show() function will sometimes not have the desired effect of changing the display style of the div from "none" to "block".
<script>
$(document).ready( function() {
$('div.features').hide(); // hide all divs of class="features"
$('div.features').first().show(); // show the first div of class "features"
});
</script>
<script>
function reveal(featureId) {
$('div.features').hide(); // hide all divs of class="features"
$('div#' + featureId).show(); // show the div with id=featureId
}
</script>
...
<select onchange="reveal(this.options[selectedIndex].value)" >
<option value="feature1" >BB Browser feature 1</option>
<option value="feature2" >BB Browser feature 2</option>
<option value="feature3" >BB Browser feature 3</option>
</select>
<div id="feature1" class="features">BB Browser feature 1</div>
<div id="feature2" class="features">BB Browser feature 2</div>
<div id="feature3" class="features">BB Browser feature 3</div>
...
2) My suggested solution or fix for this:
Use .css("display", "block") instead of .show()
3) Why is this happening only on my BlackBerry?
It appears that on the BlackBerry browser (at least the version noted) there is a race condition that causes this as follows:
a) Sometimes jQuery's data cache of the display values is set before the $(document).ready function is called, and so the styles are all cached as "display:block" which results in the expected behavior.There may be some magic jQuery function that could be called in $(document).ready function before the hide(s) take place to make sure that jQuery's data cache is populated with the desired values first, but I'll leave that and any other errors in this discription of the issue to the jQuery experts in the comments below :-)
b) but sometimes jQuery's data cache of the display values occurs after the $(document).ready function is called, and so the styles are cached as "display:none" (except for the first one in this example). Which results in only being able to "reveal" the first feature ... jQuery's show() function is in fact getting called in any case. It is simply setting the display style to the cached value which is "none" in this case.
c) It appears that this issue starts occurring only after returning to the page a few times, or by returning to the page using a bookmark. You can try it here with your BlackBerry browser.
Hope that helps.
NOTE: This was discovered while testing with a BlackBerry 8350i running v4.6.1.204 of the BlackBerry OS using the jQuery.fn.show function with javascript turned on, of course.
NOTE: This was discovered using jquery-1.4.1.min.js
NOTE: Could not reproduce this issue using a BlackBerry 9700 running v5.0.0.330 of the BlackBerry OS ... it just works fine.
thanks, i think this is the same issue i am having.
ReplyDeleteGenerally I don't learn post on blogs, but I would like to
ReplyDeletesay that this write-up very compelled me to take a look at
and do it! Your writing style has been surprised me. Thank
you, Very Great Post.Also visit my page