Can anyone give me a description of what the Popup Properties options do when you create a link to open in a pop-up window? The width and height dimensions don’t work as I would expect, and I cannot see any affect the other options have on my pop-up, such as Toolbars, Location Bar, Status Bar, Menu Bar, Directories. The Scrollbars option seems to make my popup open in a new tab (I don’t understand that effect at all). Thanks for anyone help you can give!
Popup Properties Options
Alyssa_Axure
#2
Hi! From the sound of it you’re configuring a popup in Axure RP 8 or earlier. Many of those settings no longer work and are now browser-dependent, which is why toggling them doesn’t seem to make a difference. The majority have been removed in the version 9 beta since they have been taken over by the browser, so hopefully in the future when you use version 9 it will be easier to set up your popups!
mbc66
#3
Yes, each browser (and OS version) will handle popup windows differently, and these behaviors are constantly changing. A lot of it is to keep up with issues of security and aggressive advertisers/hackers who can really hose a browser or system with popup window spoofs. For Axure 8 on Windows 10, the location and size of popup windows for most common browsers are close–but not exact–to what is requested by Axure when you open a window in a popup (with some limits of size and location, e.g., a browser likely has a minimum and maximum size allowed for popup windows.) The location is based on the (x, y) coordinates of the screen, not the browser session or viewport. So, if you preview your prototype with preview options of “Chrome” and “Without Sidebar” and in the browser hit the F11 key to view fullscreen, then open your popup, the location should make more sense. For some reason, the Left value is pushed 7 or 8 px to the right, but you can test and accommodate for this if needed.
For fine control of the location and size of a popup, you are better off using an inline frame or dynamic panel to fake the popup window. You can take a screenshot of an empty browser sized as you need it, to use as a background in your dynamic panel and place content over it, and even style it with a dropshadow for a very convincing fake popup. The dynamic panel can even have an inline frame in it with a target of whatever page or URL you need.
Yeah, I ended up just using a dynamic panel. One thing I liked about the pop-up was that it could moved around the screen, which mimics the functionality of the code. I don’t think there’s a way to do that with a dynamic panel, is there? I did not know that you could have an inline frame with a link in the dynamic panel. I’ll have to check that out. Thanks for your help!
mbc66
#5
Yes, you can move a dynamic panel (dp) around. Just use the OnDrag event and “Move This with drag” action. Also, by the way, any widget(s) can be in a dp, even other (nested) dp. All this works on RP8 or 9.
So, the quick steps for you would be:
- Drag an Inline Frame widget onto the stage. (Optional: give it a name)
- Set properties and target for it.
- Right-click it and select “Convert to dynamic panel”. (give it a name)
- Open dp and move the inline frame down a bit (20-50 px to give it some header space) and insert a screenshot of a popup window on your system or widget(s) to simulate it. This is necessary to allow for dragging, otherwise if user tries to drag window from the middle (on top of inline frame content) it would trigger the click/drag for the page loaded in the inline frame. Just like a real popup window, it can only be dragged from the “chrome” of the window frame–namely, the header area.
- Close the dp and in the Properties pane for the dp, double-click “OnDrag”.
- In the Case Editor dialog, click “Move”.
- Click the checkbox for “This Widget”. (or your dp name)
- Keep the default "Move ‘with drag’ " option.
- Click OK.
- Press F5 (Preview) to test it out.
Here is a demo file I made using this approach. I added a set of “x, y” widgets to keep track of the initial starting position so the popup will always start in the same location even if it has been moved and closed. I’ve found this to be very helpful when designing with draggable widgets.
Popup Window as DP.rp (79.9 KB)
One drawback is you won’t be able to move the dp outside the browser window boundaries. With some clever “hacking” you can simulate this if needed. I had to do this years ago to test a “drag file onto the window to upload” experience. My prototype had a background of an image which was the desktop wallpaper and was designed to be run fullscreen so it would look exactly like the actual desktop. On one prototype page there was a dp with a fake browser (again a screenshot with hotspots over the browser buttons, tabs, etc. to make it functional) an inline frame which called a second prototype to fit in the fake browser, and a bunch of “file widgets” converted to dps so they could be dragged around on and off the browser. I even had a Google Chrome icon and MISIE icon on the desktop which could launch other fake browsers. The only problem was it looked so real it would keep faking me out during usability tests.
system
closed
#7
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.