Here is a demo:
auto master banner.rp (100.3 KB)
I created a new Global Variable named, “Cookies” and kept its default value as blank. To do this, I selected Project > Global Variables > Add.
I made the banner out of three widgets (a box, an “X” shape, and a button), then created a dynamic panel from these, then created that as a Master, then I chose to hide this dynamic panel by default. The dynamic panel has a Loaded event that tests the value of “Cookies” and if it does not equal “true” it shows itself (and some “set size” things which I’ll explain later.) The “X” shape simply hides the banner when clicked (as a “dismiss but don’t accept”) whereas the “Accept” button sets the value of “Cookies” to “true” when clicked, then fires the click of the “X” (which hides the banner in same manner as clicking “X”.) In this way, you can see the difference between simply hiding the Master on one page versus setting a global variable before hiding it, which can automatically keep the banner hidden on all pages.
OK, so the default condition is that “Cookies” has a blank (or null) value. When the “cookies banner” loads, it shows itself. If the “X” button is clicked, it hides “cookies banner” --but it only applies to that page “session”. If that page is reloaded or another page is loaded, the banner will still show itself. When the “Accept” button is clicked, “Cookies” is set to “true” and the banner is hidden. If the page reloads or any other page is loaded, the banner is loaded but its “Case 1” is not triggered because the global variable, “Cookies” has a value of “true”. This means that the “cookies banner” dynamic panel stays hidden.
Some extra things I did, more or less to show these possibilities…
The banner stays floating at the top of the window and in front with the option to Pin To Browser (right-click the banner or look at the STYLE panel.) The “pin to” effect is easily turned off if you don’t need it.
The fill for the banner background is set to 66% opacity and has a shadow set, to visually reinforce it is “floating in front”.
The banner’s Loaded event sets the width of the background to the value, ( [[Window.width]] , [[Target.height]] ) so it stretches to fill the full width of the browser window, but does not change its height. The double square brackets are used in Axure to indicate a variable, and there are many built-in variables you can discover in Axure (click the little fx button to right of input fields in the INTERACTIONS code, then click “Insert Variable or Function…”) It also moves the “X” and “Accept” buttons to the right, so they effectively will stay “pinned” to the right edge of the banner with a 10px margin.
I created another master for the page tabs. The page tabs set themselves to “Selected” if the page name contains their text, all in their own Loaded event, so they can take care of themselves in an object-oriented manner. Similarly, the page titles change their text to include the page name. All of this uses another built-in varlable of [[PageName]].
I used the “Fire Event” action on the “Accept” button to show how you can remotely trigger another widget’s actions. I could have simply copied the same “Hide” action and pasted it, but if I later needed to change it, I’d have to then do it in two places. So, let’s say you decide you don’t like the slide-up animation, or get a request to just remove it or change it to a fade-out. You can now do that once for the “X” button and it will work also for the “Accept” button.