Getting computed (not CSS) width() in jquery-mobile

Question

I have a div id="XYZ" with CSS specified width: 37%;

I then wish to use the px width of this div to set other widths, but I can only access the given css% value and not the computed px width of the div in the DOM. What am I doing wrong?

$( document ).on( "pagecreate", "#page", function( event ) {

        var divWidth = $("#XYZ").width();
        console.log('div XYZ width is ' + divWidth); 

});

It outputs 37. Which is the css % value, but jquery width() SHOULD give me the computed width in px, shouldn-t it?

I was thinking that maybe the problem is that I-m asking at 'pagecreate' (same result in deprecated 'pageinit').

How can I get the computed width of the div?

i think this link help you SEE stackoverflow.com/questions/17305707/… — Gaurang s
– Gaurang s, Commented Apr 26, 2014 at 10:21
@vivek, you are not telling me anything. Why do you think I need to read the api again? What am I not seeing? — EnglishAdam
– EnglishAdam, Commented Apr 26, 2014 at 10:35
use pagecontainershow (if you're using jQM 1.4) event to get computed width. At pagecreate event, elements are invisible and still page has not taken full shape. — Omar
– Omar, Commented Apr 26, 2014 at 11:51
Page is created but still hidden, not visible at this stage. It's visible when pagecontainershow fires. jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events — Omar
– Omar, Commented Apr 26, 2014 at 22:28

Omar · Accepted Answer · 2014-04-27 13:18:58Z

1

Using pagecreate to retrieve actual .width(), .height(), .offest(), etc., won't return the computed value since page and elements within it are are all hidden.

To retrieve such data, you need to use pagecontainertransition when transition between previous page and next page is complete, or pagecontainerhide when previous page is completely hidden, or pagecontainershow when next page is completely visible.

However, note that those events can't be attached to a specific page. As of jQM 1.4, "page events" are replaced with "PageContainer Events". Thus, - unfortunately - you ought to use if statement or switch/case.

$( document ).on( "pagecontainershow" , function( event, ui ) {
  var divWidth = $( "#XYZ" ).width();
  console.log('div XYZ width is ' + divWidth);
});

answered Apr 27, 2014 at 13:18

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-04-26 10:48:11Z

0

You can use getComputedStyle

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

Use

var divWidth = document.defaultView.getComputedStyle($("#XYZ")[0], null).width;

Or

var divWidth = window.getComputedStyle($("#XYZ")[0], null).width;

answered Apr 26, 2014 at 10:48

Satpal

134k13 gold badges168 silver badges171 bronze badges

1 Comment

EnglishAdam Over a year ago

THANKS, however I am still getting the 37% value for both. The problem may well lie with JQM order of page events.

Collectives™ on Stack Overflow

Getting computed (not CSS) width() in jquery-mobile

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related