Adaptive like behavior...without adaptive screens

So I’m not sure if this can be a thing.

I need a tab on the right side of my screen that can be hidden. Easy enough. But I need it to show up in the same place on different sized screens. Is there a way to set position similar to what I might do with a shape setting width, height, or position on page load?

Hi!

There’s no built-in way to get the size of the page, which is odd considering you can set the page dimensions (e.g., for iPhone).

You can do this with some javascript. Add javascript by placing it in the “external url” field of the Open Link command. (Press the fx button next to the field and put the javascript in there.) You would do this on page load.

So assuming your tab is named “myTab” and you want it 10 pixels from the right edge of the page, your javascript would look like the following (be sure to include the javascript: part.)

javascript:
{
  const tab = $axure('@myTab');
  tab.moveTo(document.body.clientWidth - tab.width() - 10, undefined, {} );
}

Note that if your page dimensions are set to “auto,” the page size is defined by the right-most widget on your page.

The moveTo command takes three parameters. The first one is the x value (which we’ve set to document.body.clientWidth - tab.width() - 10, where the 10 is how far you want the right edge of the tab from the right edge of the screen. The second one is the y value, which we’ve set to undefined, meaning at the same y position that the tab already is located (you could put a number here for y if you wish). And the third takes an object that describes things like animation, etc., which we just leave empty ({})

1 Like

Doesn’t [[window.width]] give you the page size? Or am I misreading what you’re after?

Hi Jeff:

Window.width gives the width of the browser window, not the width of the web page. Since the question mentioned that he had screens of different sizes, I assumed he meant the width of the page. (E.g., he may be setting the dimensions of the page manually (an option in Axure 9) or the page width may be defined by the width of a toolbar or something if the dimensions are set to auto)

Ah, got it. That makes sense.