Correct Page Event to Modify CSS using Jquery Mobile

Question

I want to change my div height dynamically when page ready. (document.ready). So what is the correct page event in Jquery Mobile should I use?

Tried with pagebeforeshow and pageshow events.

Pagebeforeshow events

$(document).on 'pagebeforeshow', ->
  page_id = $.mobile.activePage[0].id

  if page_id == "brands"
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(->
      $(this).height()
    ).get())

    $(".product-image").css("height", maxHeight)
    $(".circle-container").css("height", maxHeight)

maxHeight return 0

Pageshow events

$(document).on 'pageshow', ->
  page_id = $.mobile.activePage[0].id

  if page_id == "brands"
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(->
      $(this).height()
    ).get())

    $(".product-image").css("height", maxHeight)
    $(".circle-container").css("height", maxHeight)

maxHeight will return the correct value.

Although pageshow event return the correct value, all elements will show first then only .css function fired. I can see the .css event fired and look weird on mobile (screen bouncing).

Is there workaround for this?

`pagebeforeshow` should give you the correct height because the page is fully created. Maybe you should be more specific in your selector(s) `$("#brands .product_descriptions")` — Omar, Mar 19 '14 at 09:24

score 0 · Answer 1 · edited May 23 '17 at 11:51

Changing css in "pageshow" and "pagehide" events looks weird, yes, so you are stuck with "pagebeforeshow" event. First of all, if you use JQuery older than 1.7.1 and try to get dimensions of not-hidden element, than you should just try using newer JQuery. If it doesn't help, or you try to get dimensions of hidden element, you can try some weird hacks like this one:

 // object is JQuery object (e.g. $('#myId'))
 function getRealHeight(object)
 {
     var clone = object.clone().show().css({'visibility':'hidden'}).appendTo('body');
     var realHeight = clone.height();
     clone.remove();
     return realHeight;
 }

This works for me, even though on some elements it returns not exact dimensions (for example, 216 instead of final 232). Some more versions of this hacking: jQuery - Get Width of Element when Not Visible (Display: None)

Correct Page Event to Modify CSS using Jquery Mobile

1 Answers1