jQuery Mobile Beta: can no longer use $('[data-role=header]')?

Question

I used to be able to get hold of

$('[data-role=header]').first().height()

in alpha with jQuery 1.5.2, but no longer can in beta with jQuery 1.6.1. Has something changed?

Full code - this writes 0 to console.log...

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Page Title</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 <script type="text/javascript"
  src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 console.log($('[data-role=header]').first().height());
 });
 </script>
</head> 
<body> 
<div data-role="page" id="home">

       <div data-role="header">
       <h1>Header</h1>
       </div>
 <div data-role="content">
         //lots of code
        </div>
 </div>
 </body>
</html>

However, change this to jQuery 1.5.2 and jQuery Mobile alpha:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

and it writes the non-zero height of the header div.

Incidentally, it is also non-zero with jQuery 1.6.1 but without jQuery Mobile. So it's something to do with the jQuery Mobile rendering.

Can't see anything in the release notes to suggest what might have happened, but I'm no jQuery expert.

what does it write in Alpha/Beta, or what did you expect it to write? — Phill Pafford, Jul 01 '11 at 14:22
In alpha it writes something non-zero, because the div has a non-zero height. In beta it's zero. Incidentally with jQuery 1.6.1 but *without* jQuery Mobile it's also non-zero (have edited question to reflect this). — Richard, Jul 01 '11 at 14:25
Could you try this: $('[data-role="header"]').first().height() — Phill Pafford, Jul 01 '11 at 14:32

score 3 · Answer 1 · edited May 23 '17 at 11:48

~~The change that is causing the difference is "Responsive design helper classes: Now deprecated"~~

We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.

Basically, the page is getting min-height set to the current page height in the beta which is overriding the .landscape { min-height: 300px; } in the alpha.

It looks like you need to use CSS Media Queries if you want a page layout that changes or you could just add CSS style="height:43px" on the the header if you need a fixed height.

Seems like the page is not ready when you query the height(). There is no document.ready for jQuery.mobile. It doesn't explain why there is a difference between alpha and beta, but I guess a code path changed that exposed the issue.

Wrapping the query in a different event, returns the height as expected.

$("div:jqmData(role='page')").live('pageshow',function(){
    console.log($('[data-role=header]').first().height());
});

I found this by examining the offsetHeight of the DOM element in the Chrome console which was non-zero but, as you reported, the height() was always reporting 0. I then created an link when clicked output the height and it was non-zero. I then realised that the height() was being called before the page was fully ready.

Relevant - jQuery mobile $(document).ready equivalent

score 2 · Accepted Answer · answered Jul 01 '11 at 14:39

Looks like they did change some of the syntax, Docs:

http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.

Try this:

$("div:jqmData(role='header')").first().height()

jQuery Mobile Beta: can no longer use $('[data-role=header]')?

2 Answers2

Linked