Get the pixel width of a string that is set at runtime

Axure RP 8
1

Hi!

Has anyone come up with a way to get the pixel width of a string that is set at runtime? I notice that if you set a shape to “Auto Fit Width,” the shape’s width does not change accommodate a string that is set (using “Set Text”) at runtime. Thus, I can’t use the width of the shape to measure the width of the new string.

I’m looking to set the width of a dynamic panel based on the width of a string without resorting to a fixed-width font. Does anyone have solution?

Thanks!

  • Joseph
2

repeater with adjustable height?

my examples there will explain it. start with the reposition below file, it explains step by step. just replace height by width.

1 Like
3

That is exactly what I needed. Thank you, Gregor!

4

Hi Gregor -

I used your code sample from this thread to set a global variable to the pixel width of a textfield, which worked great:

javascript:void($axure.setGlobalVariable(“w1”,$( “[data-label=lenTest] .text span”).width()));

In general, though, I avoid using global variables (where possible) and instead use the text of a shape, so I was hoping to put the pixel length result into the text of a shape instead.

I saw on another of your posts an example where you set the text on a shape through javascript, so I tried to hobble together the two examples. (Disclaimer, I know next to nothing about javascript, especially in regards to adding it to Axure.)

I came up with code below with no success. The shape lenTest has the string I want the pixel length of, and the shape textLen will receive that length in its text:

javascript:void($axure(’@textLen’).text($( “[data-label=lenTest] .text span”).width()));

Note that if I change it to simply set textLen’s text to a string, that works fine:

javascript:void($axure(’@textLen’).text(‘hello’));

Can you see what I’m doing wrong? Also, do you have advice on a good place for me to start (in addition to becoming more familiar with javascript) in learning incorporate js into Axure?

Thanks!

  • Joseph
5

it looks right, i’ve no idea why it does not work.

you don’t have to start with javascript. have a look on a jquery tutorial. i think this will quickly enlighten you.

1 Like