Moving panels using [[Window.width]] instead of pin to browser

Hello, does anyone have any tips on moving panels to the right edge of a window without using the pin to browser feature?

What I would like to do is lock a button to the right side of the window and have it move when you scroll as well.
This is easy to do with HTML - just set margin to 0 - but I’m trying to do it without using Pin to Browser, which prevents scrolling.

I’m thinking these might be a way to do it with [[Window.width]], but I’m struggling at the moment.
I’ve set the button up as a DP within a Master, then under the OnPageLoad, it’s moving to [[Window.width]]

The other thing is I also have another panel within the master set up to 100% width, which I think might be confusing something due to the load order of the page.

Anyone have any ideas?

[ATTACH]4184[/ATTACH]

1 Like

What you mean Pin to Browser prevents scrolling? You should still be able to scroll the page normally while using it.

to avoid to place the same script at multiple places (onPageLoad and onPageScroll) you should add the positioning to a “function” this function is a widget with all the necessary stuff in the onMove-Event. whenever you call the action moveBy(0,0) the function is fired… perfect.

the action is something like:
myPinnedWidget.moveTo(page.width-.moveTo(page.width - myPinnedWidget.width, -PageScrollY);

the action will bne fired, the stuff will be removed and your widget will flicker.

if you want to avoid flickering you can also override the positioning of the widget with jquery.css:

javascript:void($(’[data-label=yourStickyWidget]’).css({position:‘fixed’,right:‘0’,top:‘0’})

i didn’t try but it should work fine.

Sorry - I mean it prevents the object from scrolling - its y position is fixed.

Thanks Gregor. Do you get the JS to fire using an AxShare plugin, or is there another way to get the JS to fire on the page?

openLinkinCurrentWindow -> externalURL and instead of a link the javascript:
javascript:void($(’[data-label=yourStickyWidget]’).css({position:‘fixed’,right:‘0’,top:‘0’})

or an external js…
javascript:void($(‘head’).append(’<script src=“http://url/path/file.js” type=“text/javascript”></script>’)

I understand what you’re looking for now. You want it to be fixed to the right side of the page, no matter the width. I think a single action OnPageLoad should suffice:

move widget to x=[[Window.width - LVAR1.width]], y=[[LVAR1.y]]

In both instances, create a local variable called LVAR1 (or whatever you want, just update the expression) and make it equal to widget, your button widget. It will retain whatever y position you give it in the Axure and scroll normally. It’s X position will be the width of the window minus its width, meaning its right side will be aligned with the right side of the window.

1 Like

You can check out this post: Pin to browser - only horizontal

That was for pinning in the center, but use:

[[Window.width - Target.width]]

to pin it to the right.

Hi Ian,

I’ve tried to get this working on the OnLoad for the panel I want to move, but it ends up moving outside the viewport entirely - I have to scroll horizontally to see it.

I also have another panel elsewhere set to 100%. Could this be confusing it somehow?

I had a similar problem when I tried to get a popup to appear in the middle of the screen using the value [[(Window.width/2) - (Target.width/2)]]. It appeared in the centre perfectly when the page was left aligned but hung off the right hand edge when the page was centre-aligned. The popup in question was in a place-anywhere master.

Not sure if the alignment is making a difference in your case, but could be worth a try.

I think you might be right - having the page centered seems to throw everything out of whack. I think it’s due to the way 0 is handled. An x value of 0 seems to be the left edge of the ‘body’ div, rather than the edge of the window.


1 Like

Another issue I have found is that if you set a DP to be 100% Wide, you would expect the size of this panel to be the same as [[Window.width]] in the browser, but it isn’t.

Axure will still treat it as being whatever the original width was (ie the width it was created at within Axure itself).

Hi Paj,

There is a pretty decent workaround from your original issue. You can pin the browser to the right and then move it to:

[[100 - Window.ScrollY]]

where 100 is the original Y in Page Interactions OnWindowScroll. Sometimes this method is actually better anyway as you are moving the Widget opposite the way you are scrolling it hides any lag that might happen much better on some browsers.

See It Live: StickToRightNoPin
RP File: StickToRightNoPin.rp (55.8 KB)

We’ll look into making this easier to do in the future.

1 Like

I have a similar problem, except I don’t want my element to be sticky and move with scrolling.
I just want to move it to the window 40px x position.
My whole page is centered for other reasons, but I want a responsive header and the logo to be at the same place on the left side.
onPageLoad > move to > x=0 moves it to the centered page left, not to the window left.
How can I move it to Window x=0 coordinate?

I have done this with both resizing and moving objects. To move left to right, you will subtract or add to [[Window.width]]. To move up and down, you will subtract or add to [[Window.height]]. You will often need to also account for any headers/footers if you are moving within a constrained area. To resize objects, you would reference Window height and width as well as your widgets height/width or x, y coordinates - there are various ways you can extrapolate sizing - even storing fixed sized objects as variable values and plugging them into your equation. I would only caution resizing too many items at once (I overloaded the prototype load time doing that).