jQuery.width() is returning percentage width instead of pixel width
Question
Please have a look at the following 2 jsFiddle examples:
Example number 1
The first one is pure html and a single call to the Jquery width function which then return the width as expected in pixels.
Demo with pure HTML
HTML :
<body class="ui-mobile-viewport ui-overlay-a" data-pinterest-extension-installed="cr1.38.2" style="background-color: rgb(255, 182, 50);">
<div data-role="page" data-theme="b" id="mailiPage" style="">
<div id="mainDiv" data-role="content" class="ui-content" data-theme="b" style="text-align:center;background-color:#ffb632;background-image:none;height:100%">
<div class="ui-grid-b">
<div id="left" class="ui-block-a" style="width:5%;"></div>
<div id="center" class="ui-block-b" style="width:90%;"></div>
<div id="right" class="ui-block-c" style="width:5%;"></div>
</div>
</div>
</div>
</body>
JAVASCRIPT:
alert('this width of the center div is in pixels: ' + $('#center').width() + '\n');
Example number 2
The second example include the javascript that is used to write the html dynamically and than a call to the width function which in this case return the percentage value and not the pixel width.
Demo with only Javascript
JAVASCRIPT:
var strPage = ""
var leftSideColumnsWidth = 5;
var rightSideColumnsWidth = 5;
var centerColumnsWidth = 90;
$("body").empty();
strPage = strPage + "<div data-role='page' data-theme='b' id='mailiPage' style=''>"
strPage = strPage + "<div id='mainDiv' data-role='content' class='ui-content' data-theme='b' style='text-align:center;background-color:#ffb632;background-image:none;height:100%'>" //padding-top: 56px;'>"
strPage = strPage + "<div class='ui-grid-b'>"
strPage = strPage + "<div id='left' class='ui-block-a' style='width:" + leftSideColumnsWidth + "%;'>"
strPage = strPage + "</div>"
strPage = strPage + "<div id='center' class='ui-block-b' style='width:" + centerColumnsWidth + "%;'>"
strPage = strPage + "</div>"
strPage = strPage + "<div id='right' class='ui-block-c' style='width:" + rightSideColumnsWidth + "%;'>"
strPage = strPage + "</div>"
strPage = strPage + "</div>"
strPage = strPage + "</div>"
strPage = strPage + "</div>"
$("body").append(strPage);
alert('this width of the center div is not in pixels but in percentage: ' +$('#center').width()+'\n');
Any idea why is it deffer?
UPDATE:
In the dynamic version if you mark out the first div which define the JQM page and include "data-role='page'", the width function will return the value in pixels!! Now the question remains WHY?
1 answers
solution1
4 ACCPTED 2015-07-21 11:30:49
jQuery Mobile pages ie div elements with [data-role=page] are initially hidden. And for hidden elements:
The value reported by
.width()is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using.width(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
Having said that, you might want to look at this example , which hooks pageshow events to determine if the page (and therefore the element) is visible.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.