0

I am trying to get the width of a collapsible element created by JQuery Mobile.

Here is the code for the element:

<div id="sales" class="graph" data-inline="true" data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" data-dividertheme="a">

However, whenever I do

$(".graph).width()

it displays the width of the element as if it were collapsed, instead of expanded. How do I get the width of the element when it is expanded?

Thanks

Ash
  • 25
  • 1
  • 5
  • Whether the collapsible is expanded, you'll get the same value. What are you trying to achieve? – Omar Jul 14 '14 at 21:13
  • I want the width of the div when it is expanded. Currently, I can only get the width when it is collapsed, regardless of whether the div is expanded or collapsed. – Ash Jul 15 '14 at 01:56
  • Ok, but the width of the collapsible is the same whether it's collapsed or expanded. Anyway, you need to listen to `collapsibleexpand` event and do whatever you want. – Omar Jul 15 '14 at 02:10
  • The width changes based on what is inside the element. For example, if the collapsible element had the heading "Page", and the collapsible content "Page 2 is full of information," the div would widen when expanded and shrink to just "Page" when collapsed. – Ash Jul 15 '14 at 02:33
  • Can you post a full example of one collapsible? – Omar Jul 15 '14 at 02:45
  • Yes, here it is: http://jsfiddle.net/ninebolt/MYAW2/ I need to keep the two collapsed headers next to each other. Either I need to find a way to get the width when it is expanded. I think the problem is that the width is set as a property of the DOM at the creation of the document and is set as the collapsible width. – Ash Jul 17 '14 at 01:13
  • Which JQM version are you using? – Omar Jul 17 '14 at 01:17
  • JQM v1.3.1 JQuery v1.8.3 – Ash Jul 17 '14 at 01:21
  • you mean something like this? http://jsfiddle.net/MYAW2/5/ – Omar Jul 17 '14 at 01:31
  • I can't use ui-block-grid because my website will have collapsible headers of different sizes, not 2 of the same size. Also, the goal is to hide collapsible divs and the screen size lessens. – Ash Jul 17 '14 at 01:38
  • Oh man, it works! I didn't expect that creating the function on page initiation would work! I found out that I get the correct widths when I tie my getWidths() to a button. This is just an extension of that. Thanks! – Ash Jul 17 '14 at 02:15

1 Answers1

0

You cannot read the size of something dependent of a particular state without putting it in that state.

So if the item is not expanded, you will need to expand it, read the width, the collapse it again. If you're worried about messing up the UI you can always move it off-screen, do the flip, then put it back.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176