How can one expand an associated widget?

Thanks to JosephxBrick, I’ve been able to push the entire footer of the webpage down when one of the articles in a column of articles is expanded (thanks again Joseph). As a final touch to the graphic design, I’d like the left green box widget which holds the menu items to expand as the other widgets are dropped down. That is, I’d like the green box widget to expand in order to fill down to the footer.

While I suspect that it can be accomplished with dynamic panels, I can’t figure out how to nest them in such a way as to make it actually work.

Any and all assistance is greatly appreciated : )

Expand Test.rp (1.2 MB)


What you can do is use the OnMove event for your footer dynamic panel. So, whenever it moves you can use its location to calculate the size of your left green box. Since that left box is at y=0, this calculation is easy. Here is the code and the updated .rp file.

Expand Test.rp (1.2 MB)

Wow! Thanks — I’d never have gotten there on my own!

Is that sort of code discussed somewhere in Axure’s documentation? Is this a specific language?

Again, many thanks!

mbc66 — So, the next question: I’ve added a header so now the ‘green box’ isn’t at y=0 (more like y=480). I’ve mucked around with a few different tries but can’t get the green box to stop at the top of the footer, it extends below it by quite a bit (I’m guessing around 480px). How can I adjust the bottom edge to stop correctly when y≠0?

mbc66 – Finally figured it out! It is the height of the Footer, not the Header, that I needed to deal with. In this case, [[ - 259]] (which provides the 1px overlap of +1).

Still interested in what coding language this is so I can learn more : )

The code is just native Axure Interactions. It is pretty light and some might consider “pseudo-code”… utilizes some aspects of javascript. You can certainly learn more with the quick and easy tutorials on as well as the reference pages, especially the sections on interactions, conditional logic and functions.

There are a few different approaches you could take to control the position and sizes of your header, footer and side bar areas. Just kind of depends on how you’d like them to look and behave. For instance, you could pin your header (as a dynamic panel) to the top of the browser window, which is common in web designs these days. Likewise, you could pin your side bar to the left and footer to the bottom. You can search this forum for “floating header” and “pin” for lots of examples and discussion about this. Either way, you’ll likely want to resize the background rectangle for that sidebar by subtracting the y-position (top) of the footer and the height of the header. It’s usually better to use dynamic references rather than hard numbers so that you can tweak sizes and locations later on and still have it function properly. Also lets you port the same code to other projects with less changes needed.

Many thanks!

Much appreciated.

Taking my OnMove issue to another level.

I’m using the footer master on a number of pages. Rather than putting the OnMove code into each footer after breaking it away from the Master Footer, I’m trying to embed it into the Master Footer itself. After reading through the Axure reference pages, I’m thinking that there might be a way through Raised Events. That said, I need to reference the ‘green box’ widget that doesn’t exist in the Master Footer.

Would I need to include the ‘green box’ widget on the Footer Master, then adjust it on each page?

I’m just looking for ways to avoid tedious repeated work on each example page.

Yes, better to put the move and resize events in the Masters themselves. If you use raised events then you will have to handle code for each event on each unique page, so that won’t save you from any tediousness…

Including all together in one Master (which can be made of multiple sub-Masters) may be your best approach–as long as they are not too complex–it can slow things down on page load. If separate Masters that need to refer to each other and/or each other’s position, then you could use global variable(s) like “FooterY” for example, which would get set with the Footer’s OnMove event. You may have to put in some Wait delays to ensure your sidebar Master is reading the global variable after it gets set (or repeatedly test it, waiting for a non-blank value.)

Or, if your header and footer have solid fill backgrounds, you could place the sidebar behind them (or use a “send This to back” on its OnLoad event) and just set its height to the window height. Depends on total height of content in side bar, I suppose.

One more question before the week ends — presuming you don’t mind : ) You just shot waaay-past my pay grade.

In trying to create a single Master with the Footer Master & Menu Background, I can’t figure out how to add an OnMove action to begin with (appears you can’t add such things to a Master). I’ve attempted a couple things with the Global Variables, with no success.

As I’m using the Footer on every page (though not necessarily the Menu Background), keeping the Master Footer intact (active) as a Master on each page has advantages. Primarily, it would make any changes to the Footer Master appear universally on every page. I can set up the OnMove in the Footer Master with the Menu Background, but as I need to adjust the Menu Background on each page, I need to Break Away in order to do so. That breaks the Master connection to the Footer.

While I’m probably spending more time than it would take to effect any possible changes to the footer that would come along, I like to figure out how things (might) work. If you’re willing to make another suggestion, I’m most appreciative.

To do this you have to select everything in your Master and put it in a dynamic panel (select all, right-click, create dp) then use the OnMove and OnLoad events. Or, you should be able to do same by creating a group instead of dp. I can’t recall exactly if groups get an OnMove event—I’m only on my phone right now.

So, here’s what I’m presuming my problem is: I can’t keep the Footer as a Master if I want to adjust the Menu Background when applying the OnMove. If I want to keep the Footer as a Master, I can’t pre-apply the OnMove on the Menu Background.

If I make the Footer + Menu Background a Dynamic Panel, I need to Breakaway in order to adjust the Menu Background’s height.

It appears that I’m spinning my wheels here (I hate unsolved problems). It seems it would save me time to re-apply the Footer + MB to all pages in the event I make further changes to the footer.