Automatically load popup layer for set amount of time

[Frodo]

Hi guys,

Okay, so Acorn's method works perfectly for the banner popping up and then fading off after 8 seconds. My apologies, I should have been more specific though. I want that banner to:
1. Be able to stretch across the screen if possible
2. Be clickable
3. The clickable area needs to "go away" after the banner fades out.

WHAT I HAVE TRIED TO LOOK AT
I created a rectangular block, the same size as my banner image, and gave that block a 99% Opacity and saved it as a PNG image.
Then I used the Xara Slideshow Widget, removed arrows, removed the bullets, removed any gradients, removed the background, stopped it from looping and gave the slides an 8 second delay. Then I added my "popup" banner as the first image and added my 99% opacity image as the 2nd image and bam, you have the same effect, you can even stretch it. Now if there was a way that I could just put a link on the first image of the banner that would be great! I know most CMS sliders have that functionality.

Have a look at the actual website below, utilising Acorns method: All I really need is for the "popup" banner to be clickable, maybe it would make more sense then?
www.swanplastics.co.za

[Acorn]

All still CSS: CSS - One-off Timed Popup.xar

Acorn

[Frodo]

Acorn, that is so simple and so awesome! Thank you so much. I do have a couple of questions though. I don't seem to be able to recreate this for the below reasons:

1. How did you stretch the "image" banner?
2. How did you stretch the "link" banner?
3. How did you outline the "link" banner? The outline thickness dynamically changes so that it stays visible and "clickable" inside the project, but when you preview it, you can't see the outlines at all.

I have been contemplating my living conditions, because either you have magical voodoo that you are applying or I am living under a rock.... I suspect it's the latter though.

[Acorn]

Acorn, that is so simple and so awesome! Thank you so much. I do have a couple of questions though. I don't seem to be able to recreate this for the below reasons:

1. How did you stretch the "image" banner?
2. How did you stretch the "link" banner?
3. How did you outline the "link" banner? The outline thickness dynamically changes so that it stays visible and "clickable" inside the project, but when you preview it, you can't see the outlines at all.

I have been contemplating my living conditions, because either you have magical voodoo that you are applying or I am living under a rock.... I suspect it's the latter though.

Frodo

Here is my design approach:

• Stuff Layer - what the One-off click action opens.
  
  • I included the Name htmlclass="popupAndFade" and found it had an interesting side-effect of also closing after 8s.
  • Without this, you need a close layer event, hence the red eye icon with Link, popup: close "Stuff".
  
  
• Banner Layer - the rainbow box is a Text Area.
  
  • The Rectangle alone has a Stretch Full width; you use the Page & Layer gallery to select it separately. This prevents the text stretching.
  • Both have Name htmlclass="popupAndFade" and Link Pop-up layer: Stuff.
  • Finally, there is a empty box with LinkPop-up Layer: Stuff. Earlier version might need a Fill colour and Transparency of 99.5%.
    
    • Without it, the Stretched Text Area only has a Link action on the Pasteboard.
    • If you give it a 0px Line width, this shows in the design but not on rendering. This is not the same as Line width: None.
  
  
• MouseOff Layer - is empty apart from the green eye icon.
  
  • This has a Link popup: open "Stuff".
  
  
• Website HTML Code (head) - using CSS and @keyframes allows the code to animate any CSS animable style.

All the bold bits are mostly undocumented features (magical voodoo) of the XDA. You can add more steps and apply many, many CSS styles.

Acorn

[Frodo]

Frodo

Here is my design approach:

• Stuff Layer - what the One-off click action opens.
  
  • I included the Name htmlclass="popupAndFade" and found it had an interesting side-effect of also closing after 8s.
  • Without this, you need a close layer event, hence the red eye icon with Link, popup: close "Stuff".
  
  
• Banner Layer - the rainbow box is a Text Area.
  
  • The Rectangle alone has a Stretch Full width; you use the Page & Layer gallery to select it separately. This prevents the text stretching.
  • Both have Name htmlclass="popupAndFade" and Link Pop-up layer: Stuff.
  • Finally, there is a empty box with LinkPop-up Layer: Stuff. Earlier version might need a Fill colour and Transparency of 99.5%.
    
    • Without it, the Stretched Text Area only has a Link action on the Pasteboard.
    • If you give it a 0px Line width, this shows in the design but not on rendering. This is not the same as Line width: None.
  
  
• MouseOff Layer - is empty apart from the green eye icon.
  
  • This has a Link popup: open "Stuff".
  
  
• Website HTML Code (head) - using CSS and @keyframes allows the code to animate any CSS animable style.

All the bold bits are mostly undocumented features (magical voodoo) of the XDA. You can add more steps and apply many, many CSS styles.

Acorn

Ah... okay, that all makes perfect sense now. Was able to recreate, although it was slightly trickier, because I needed an image to popup. Fortunately it has a solid background colour, so I could make a stretchy layer with that same solid colour. I only say trickier because when it fades out, you could clearly see the edges of the image being darker than the stretched solid colour rectangle, as the opacities faded out. Just ended up recreating the image with a transparent background instead. I also didn't need to make use of the close layer events as i was linking to an anchor on another page.

I wasn't aware of the 0px line width attribute, which is super useful. I'm sure I'll be making lots of use of that.

Thank you so much for all your assistance, this was a very brilliant solution and layout to the solution. Thanks again. I'm sure I'll be posing more questions in the near future.