100 Percent Wide Dynamic Panel (100% DP, fluid, full browser width, background strip/bar, auto carousel)

#1

1. Set a Dynamic Panel to 100% Wide in Properties pane.

2. Open the Dynamic Panel’s first State and set a Back Image (or Back Color) in the State Formatting pane (pane located where Page Properties usually is).

3. If using Back Image, depending on the height and width of the Image chosen and your expected browser width range you will want to play with the Repeat options:

  • Use Stretch to Contain if you can put this Widget at the bottom of the z-order and make the Height really massive (10,000 pixels if this will be viewed on larger screens). This will maintain the full image and will stretch to the full width.
  • Use Stretch to Cover if you want to make sure the Image is always the full browser width regardless of how much of the image is shown vertically.

See It Live: 100PercentWideBackgroundDynamicPanel
RP File: 100PercentBackgroundDynamicPanels.rp (885 KB)

This shows Back Image, but Back Color is right above it:

00000009.png1169×992

#2

Here is a extremely quick way to make a 100% Wide Carousel in Axure!

See It Live: 100PercentAutoCarousel
RP File: 100PercentAutoCarousel.rp (219 KB)

1. Add a Dynamic Panel with multiple States. Set 100% Wide in the Widget Properties pane (shown above)

2. Enter each State, set the Back Image to and set Repeat to Stretch to Cover

100PercentCarouselState.png1041×907

3. On the Home Page add and OnPageLoad Interaction. Choose “Set Panel State” and select your Dynamic Panel and choose Next. Then set the timing and animation properties. Make sure that “Repeat Every” and “Wrap from last to first” are checked.

100PercentCarouselHome.png1319×1127

4. Preview the file. That’s it! Your 100% Wide Carousel should be working.

#3

Thank you so much! :slight_smile:

#4

Hi Ian,

Can you please share the image you used?
I would like to see the exact dimensions you used.

What’s hard with Axure is that you can’t export or refer to the background image you’ve uploaded so you can investigate the type of image you’ve used.

Thx!

#5

[QUOTE=vinceteodoro;33748]Can you please share the image you used?
I would like to see the exact dimensions you used.[/QUOTE]

Some of the images were a bit big in dimensions and file size, so here they are extracted as jpg in zip format (they should still all be the original aspect ratio so should hopefully give you whatever info you need):
[ATTACH]3707[/ATTACH]

#6

I’ve also experimented with full-screen widths in the past few weeks. See some results here: Facebook Paper Promo Page

Click the “x” to remove the sitemap.

#7

Hi, hellomarcoliver ! It’s amazing! Can you please upload rp file with this example? ) I can’t find the way you’ve done it (

#8

You can download an example with several 100% wide uses here.

#9

Hi Muzzyratti, You can get all the files and more here: Axure Flat UI Kit: The most comprehensive widget library for Axure. Prototype like a star.
It’s a widget library with tons of examples and interactive modules. Go, check it out.

#10

I love the use of background images in DPs; allows for so much more flexibility.

#11

Hi Ian,

Can you tell me how to increase/decrease the opacity of the background image if i have used it as a page background that ends up to be a 100% wide image when previewed in browser?

Thanks,
Sheetanshu

#12

100% wide browser image opacity control

#13

Hi, is it also possible to use 100% height?

#14

Hi Amplified,

Would it help to set a Dynamic Panel’s height to window.height? You could do that via the “Set Panel Size” Action, as shown in the screenshot linked here:

2015-04-21_1654 - window.height

I’m not exactly sure what you’re ultimately looking to build, though, so feel free to elaborate on what you have in mind for your project–we’d be happy to help. Thanks!

Alex

#15

Hi amplified ,
I have posted a related solution, you find it in the following thread.
full-screen bars

Thaks,
Vikram

#16

Hi Ian,

I tried what you taught, it worked but the page’s content is not centered anymore: more on the right than in center, but not totally on the right side as well.

Also, why is it needed to create a dynamic panel and to modify its states?

Thanks for your help.

#17

Could you share your .rp file?

#18

I’ve been trying for a few hours and I can’t get the Panel State Formatting Page - I make a Box 1 I turn into dynamic panel I open state 1 I tick 100% wide (browser only) and I can get the Pen State Formatting at the bottom of my screen. I tried it with an image as well.

#19

Hi PewMewMew,

Welcome to the forums! Are you trying to create a 100% wide image or bar of color? If so, you’ll want to use the dynamic panel state’s “Back Image” or “Back Color” option:


That adds a color or image to the background of the dynamic panel itself, which will stretch to fit the width of the browser when “100% Wide” is selected. (Note: That setting only resized the dynamic panel itself, not its contained widgets.)

I hope this helps!

#20

Doesn’t work for me. I just want a header to be 100% wide, but when I convert a rectangle widget to a dynamic panel and tick the option "100% wide (browser only) nothing happens in the prototype. It just stays the same fixed width. I’ve tried to generate the page repeatedly, closed the doc and re-opened it. Doesn’t change anything. I’ve tried to do the same on other documents but it doesn’t happen there either.