Xara Web Design 19 being weird about xl_xr links on animated text

[JAKlife]

Hello, everyone! Hoping someone has a fix for this...

I'm using Xara Web Designer Premium 19.0.0.64291

And I've been working on a website pseudo-game with a "go left" "go right" feature (just with pages, very simple). I figured out a lot, but there's one thing I can't seem to get it to do.

So, I have an image and two squares on top of it that are basically see-through - one on the left and one on the right. When you mouseover either side, "Go Left" or "Go Right" text pops up, and set to "close pop-up automatically." That all works fine.

"Go Left" is currently set to hyperlink to an outside website (another of mine), and that works fine, too.

"Go Right" is set to hyperlink to another of the pages (index.htm#xl_xr_page_shops) - but when the text is clicked, it refuses to load up the page. The navigation bar *says* it's on this new page, but it's not. If I hit refresh, *then* it loads the proper page. If I take away having the pop-up "Go Right" layer text show up (and just add the hyperlink to the square instead), the link works fine.

My gut is telling me this is a Xara problem (since the external link works fine even with the pop-up text), but there might be a code workaround.. so any suggestions would be most welcome!

Thank you so much in advance!

Jamie

[Chris M]

If I'm reading this correctly, which I'm famous for NOT doing, then you are trying to link to another page in the same web project? If so, you should be using the 'Link To' option in Web Properties, and not the full address 'index.htm#xl_xr_page_shops' in the 'Link To Web or Email Address' section.

If you are doing that already, it may be because you are using a non-traditional 'Website' option in 'Export'. If this is the case, use the 'Link To Anchor' option:

Select an object at the top of the page you want to navigate to, or create a shape and set to 99% transparency.
Click the luggage label icon (Utilities > Names) and give the object a name.
Go to 'Utilities > Web Properties > Link (tab) > Link To Anchor' and choose the name you created.

[JAKlife]

It's all good; I'm an over-explainer when it comes to things, but that can also be more confusing instead of helpful, lol

I'm actually doing "link to: page" (shown in your first picture) - I just wanted to give the full name here in case that helped clarify the issue that's happening.

Maybe this will help...

I have a (basically invisible) square with a mouseover function made like this:
Web Animation > Mouse-over > show pop-up layer > pop-up - Right <--(that's the name for the pop-up layer)
with an effect of: Zoom/fade-in (time a few bars in, and "close pop-up automatically" is checked - I've tried this without that checked, same result)

In that pop-up layer, is text that says "Go Right", with hyperlink done this way:
Web Properties > Link To: > Page: shops

You're right on the Export Option part - my transition effect is "zoom in and fade" - which I'd very much like to keep, if at all possible.. lol

If I do all of the above, but the site linked to is external, the link works fine (I don't want to do that, but did it as an initial test to see if the link followed through and it did)

If I apply "Web Properties > Link To: > Page: shops" directly to the (basically invisible) square, the link works fine, as well (even with the zoom in and fade transition)

For some reason, that doesn't seem to work when applied to the pop-up layer. The navigation bar changes in name, but nothing moves.

I actually have this uploaded, if you'd like to see this and test it at any point.

[Chris M]

Would you post your project file (.web)? Just the page itself would do.

Did you try naming an object on the popup layer and using Link To Anchor?

[JAKlife]

Sure! Here you go:

I'm not sure Link To Anchor would work, since the page is part of the index file, but is technically a separate "page".

In that file, to get to what I'm talking about, you have to a few "pages" in:

On the first page, click "I agree" -
on the next page, click on the "enter" sign,
on the next page "start game".

Then, you'll be at the page with the first "go left" and "go right" signs. The left side goes to my outside link, the right is supposed to go to the "shops" sub-page.

Since the backgrounds don't change (since they're missing) it might be hard to tell, but since the page doesn't transition, the error should still be visible.

[Chris M]

All I can do is confirm your suspicions. It's the animation settings in Web Properties > Transition Effects. Set it to Website and all works, choose anything else and it's broken.

But...fear not. I'll bet there's half a dozen lines of code that can be added to the Website HTML Code to give you the effect you want, bypassing Xara's broken option.

I'm a Numpty when it comes to code, but hang around and a non Numpty may well show up.

[JAKlife]

Hey, I appreciate you taking a look at it! And I hear you, I'm a coding numpty, myself, lol!

Funny enough about the transition effects; I wish there was an option where the first page would zoom toward you and fade into the 2nd page, as that would be more accurate - but the transition I picked was the closest.

And there is one other thing I'd like this all to do, come to think of it.. the questions in text that come in at the bottom of the "go left"/"go right" page, there's only a few now, but I originally was hoping there'd be a way to have about 20 of them, and for them to slowly "ticker tape" their way automatically across the screen where they are.


I will say, I continue to be amazed with what Xara can do, even as I find these little hiccups!

[Acorn]

Hey, I appreciate you taking a look at it! And I hear you, I'm a coding numpty, myself, lol!
Funny enough about the transition effects; I wish there was an option where the first page would zoom toward you and fade into the 2nd page, as that would be more accurate - but the transition I picked was the closest.
And there is one other thing I'd like this all to do, come to think of it.. the questions in text that come in at the bottom of the "go left"/"go right" page, there's only a few now, but I originally was hoping there'd be a way to have about 20 of them, and for them to slowly "ticker tape" their way automatically across the screen where they are.
I will say, I continue to be amazed with what Xara can do, even as I find these little hiccups!

JAK, first off, all your pages (note index-a) onwards have the MouseOver layer at the top of the stack; move it to just above MouseOff. Try that and advise back.

Next, I would change the site back to a Conventional one.

To achieve different page 'out' & 'in' effects does require a hell of a lot of code.
I tried to document this in https://www.talkgraphics.com/showthr...tional-Website

I don't know how many pages you are considering but I might instead use an embedded Presentation design as it comes with more transitions and you can include Presentation Steps, which might suit what you are after.
You then make this a Placeholder IFRAME into the one master index page of a separate design file, containing the top links and the bottom rules, etc.

Acorn

[bb2]

Hi Jamie. Please can you try removing the animation from the layer and apply it to the shadow group instead?

1. go to the properties tab for the layer named pop-up right and set the transition effect to be Instant.
2. select the shadow group on the layer. Open web animation properties > Reveal tab and set the animation for the shadow group to be Zoom/Fade-in

[JAKlife]

Hi Jamie. Please can you try removing the animation from the layer and apply it to the shadow group instead?

1. go to the properties tab for the layer named pop-up right and set the transition effect to be Instant.
2. select the shadow group on the layer. Open web animation properties > Reveal tab and set the animation for the shadow group to be Zoom/Fade-in

YES!!!! It worked!!! Thank you thank you thank you!!

Any advice on the tickertape idea? where you see the "Has anyone seen Bella? Which tire tracks did you follow?" etc, I want to do like 20 questions that slowly scroll across the bottom of the screen (and repeat, if that's possible, but not necessary).