I’m building web site with some text and graphics sliding on and off the page from right to left; initially the content is off-page, i.e. to the right of the right hand boundary of the page. I have used Scriptaculous to achieve this but I need to be able to mask the page area so that the ‘off page’ content is not visible prior to it sliding on.
Draw an HTML box the size you want your stage area to be. In the Inspector, change its Overflow setting to Hidden. Make a note of the name that Freeway (or you) assigned to that box in the Title field of the Inspector. Click on the header over the top of the Site pane so it changes to Page. Locate the element you are moving with Scriptaculous in the list of elements, and then drag it so that it is directly beneath, and slightly to the right of the HTML box you just drew. You will see the name of the HTML box highlight and embolden to indicate that it is becoming the parent of the element you’re moving.
Now you may need to fiddle with the settings you used in Scriptaculous as far as initial and ending position are concerned after this change, but what you have done is changed the sprite (moving element) from a child of the page to a child of this HTML box. Since the box has Overflow:Hidden, anything that it contains which is moved outside of its bounds will disappear from view.
Walter
On Dec 8, 2011, at 7:36 PM, Andrew Barton wrote:
Hi guys,
I’m building web site with some text and graphics sliding on and off the page from right to left; initially the content is off-page, i.e. to the right of the right hand boundary of the page. I have used Scriptaculous to achieve this but I need to be able to mask the page area so that the ‘off page’ content is not visible prior to it sliding on.
Why are things so easy when you know the answer!!
That was just what I needed.
Now, is there a way to make the edges of the HTML box have a feathered edge? I’ve tried playing with adding a PNG with transparency but didn’t get very far…
If you mean the HTML box you are trying to fly around the page, then yes. If you mean the one you are using to mask your flying element, then either No or Maybe, depending on how this trick works:
Make a transparent 24-bit PNG that is the same size as your “mask” HTML box, and is essentially a solid block of your page background color with a feathered hole in the center.
Click on your outer HTML box and use the Style tab of the Inspector to add your PNG as the background image. No repeat, center, center for the positioning.
Now click on your sprite element, and choose Item / Extended from the main menu. Press New, and in the sub-dialog, enter Name: z-index Value: -1 and okay out of the stack of dialogs.
Preview in a browser and see if it worked. Negative z-index may (I’m not sure it will) place the sprite behind the background image of the parent box. Note that this may not work at all, your sprite may be totally missing in action, it may work in some browsers and not others, etc.
Another way to do this would be to draw another HTML box directly over the first one (not as a child, but as a separate layer) and apply your “donut” background to that. The only down-side to that construction would be that any links in the sprite would be un-clickable. Come to think of it, that might be the case in the first technique as well.
Walter
On Dec 9, 2011, at 1:39 PM, Andrew Barton wrote:
Now, is there a way to make the edges of the HTML box have a feathered edge? I’ve tried playing with adding a PNG with transparency but didn’t get very far…