Timed slide in/slide out element

**ksiads** · 07 November 2014, 05:08 PM

I'm looking for a way to have a small box with text (links) and graphic slide in from the edge of my site at a certain time (say, 5 seconds after the page is fully loaded, or once the user scrolls to a certain depth on the page).

The slide in box would remain in place until the user clicked an X in the box's top right-hand corner, or any of the links shown on the slide-in box.

If the user clicked the X, the box would slide back into its original position offscreen.

Has anyone built a slide-in/slide-out element like this (using a similar timing method)?

Any advice is greatly appreciated.

**Acorn** · 07 November 2014, 05:36 PM

This is very feasible with jQuery and CSS events: http://api.jquery.com/delay/ with http://api.jquery.com/category/effects/sliding/.

Acorn

**ksiads** · 07 November 2014, 05:43 PM

I was kind of hoping for a simpler method since I'm not yet comfortable with using jquery. I thought there might be a timing trigger built in to XWDP that could launch a simple javascript call for the sliding box to enter/exit the page.

Or, maybe, XWDP might have a tool already setup for such an effect.

**Acorn** · 07 November 2014, 08:58 PM

Xara is a WYPIWYG tool so any transitions are through Widgets or code.
There's no timed event other than those in picture galleries (using jQuery).

It's probably possible purely is CSS3 but you then have browser incompatibilities; jQuery will be the safer route.

Acorn

**Acorn** · 07 November 2014, 09:17 PM

I forgot this!

This approach will go part of the way to what you are after:

Create your box or a new Layer in the place you want it to stop at.
On the MouseOff layer add a clickable shape/button.
- For this, set its Web Properties > Link > Pop-up layer to the new Layer.
Click its Settings... button.
- Change the transition to Slide in from left.
- Change the Speed to 5.
- Untick Close pop-up automatically.
Click the OK button twice.
Preview

Acorn

**ksiads** · 07 November 2014, 09:34 PM

Thanks, Acorn. I'll give it a shot. If it doesn't work I'll do some speed reading on jQuery and see if I can do it that way. Again, I really appreciate your help and advice.

Kevin