Pin to browser - only horizontal

Hi, I have a problem with option “Pin to browser”

I have do something like this:

Pin a slider but only to the right side to the browser (not also top or bottom), because if I’ll scroll browser vertical to the bottom, I don’t want to have visible that slider - so the slider should be on the same vertical position relative to other elements on the site.

And when “edit dynamic panel” --> “pin to browser” I have to set both horizontal and vertical position

I hope you know what I mean

Yup, this is actually a limitation of CSS fixed positioning, CSS Positioning.

However, this is definitely on our minds and are thinking about methods to allow for only horizontal or vertical pinning.

just wanted to bump this and ask if there was any development on overcoming this limitation :smiley:

Thanks!

The only way I know to center a widget is to turn it into a dynamic panel and pin it - middle. The problem with this is the panel will not scroll with the page…it’s stuck. Is there a way to center, right, left align a widget to the browser window and let it scroll with the page?

1 Like

Edit: Whoops, this is so much simpler now in Axure 7.0, check out the next post!

Sorry there is no way to do this yet, but it is still definitely something we are considering for the future.

In the meantime I whipped up a pretty hacky solution, using a timer and testing against another pinned dynamic panel. It’s pretty herky jerky and gets stuck sometimes, but if you wanted to spend more time on it you could make it nicer.

See It Live!
PinHorizontallyOnly.rp (49.6 KB)

2 Likes

Whoops, that last example was something that I had prepared way back for 6.5. Didn’t even think about it, but I just realized that we have added a lot of functionality in Axure 7.0, Update To Latest Version | Axure, that makes this so much simpler.

Just add an Action to OnPageLoad to Move the Dynamic Panel to X: [[(Window.width - Target.width)/2]] and keep Y: [[Target.Y]]

Then copy this Action to the new OnWindowResize event, so that it will remain centered if the user resizes the browser.

See It Live: Center Dynamic Panel
RP File: CenteredDynamicPanel.rp (64.6 KB)

This example was for centering you can easily pin right by changing the math of the X: [[Window.width - Target.width - 20]]

2 Likes

Hi Ian,

Could you explain what the role of Target.width is here?

I’m trying to combine this action with a resize - so the panel starts at a certain size, and onClick it gets wider and then centers itself, but its not working as expected.

I’m also trying to use some of the techniques in this thread to get the animation smoother.

Zoom From Center Animation (zoom images question)

Ahhh, I see. Target.Width is the width of the Dynamic Panel, if you simply used Window.Width/2 you would place the left edge of the DP at the center of the Window when you probably want center of the DP at the center of the Window. This could quickly look odd for larger panels.

Imagine a 1000 px window and 800 px DP. You want the DP to be at 100 - 900 px not 500 - 1300 px (it would be falling off the right edge of the screen). But depending on your design and where you want it pinned you might want to move it around a bit.

OK, I think I get that.
So is Target.width identical to something like LVAR1.width (where LVAR1 is the dynamic panel itself)?

Yep, “Target” is just an automatic Variable for the Widget you are interacting on. Just a shortcut so you don’t have to set up a Local Variable.

Described solution for right aligned widget (moving it to [[Window.width - Target.width - 20]]) does not work for me if Page Align is Center. Observed on attached file CenteredDynamicPanel.rp. Any ideas? (Using Axure 7.0.0.3174).

No attachment…

Sorry, I didn’t mention that the file is attached to one of Ian’s comments.

I know why this is happening - what Axure does to centre align content is: It works out the width of the designed page and sets the <body> element at this width, then adds margin: 0 auto; to set it in the centre. This will effectively throw elements positioned in the manner described here by [[(Window.width - <body>.width)/2]] to the right. It’s a pain.

@Ian Gardner was a great help when I was trying to work out how to get around this on my thread found here. I would guess that the answer may well be found in the formula he gave me there, but it will take a little bit of digging.

2 Likes

Thanks thePsycho79, finally I came to workaround that is quite similar to yours by trial-and-error method, but I didn’t realize the reason for this behaviour. The linked explanation is very helpful for me.

[QUOTE=Ian Gardner;32194]

See It Live: Center Dynamic Panel
RP File: CenteredDynamicPanel.rp (64.6 KB)

thanks for those math lines :slight_smile:

Hello,
I have been trying al formulas to resolve a pining problem.

I have a mobile version of a site.
the site has a table with columns and lines.
the view of the table will be movable swiping on the the table. (I have resolved that issue)

The problem is that I would need to pin the background to the right or center so when I swipe the table I can see it completely.

You need to visualise its directly from a smart phone (iPhone 8) to see what is happening.
Axure does not let me pin only horizontally and therefore the whole page moves when I swipe the table

here is my rp

any hints/ help will be great!!

thanx!swipe-tabella.rp (397.6 KB)

Did you expect to do something like that:
swipe-tabella_V2.rp (399.7 KB) ?

1 Like

THANK YOU Pierre_J!

its exactly what I was trying g to do.

Nice,

Have fun prototyping ! :smile: