Unfound bug

[Acorn]

@Egg, I took the liberty of playing with your navigation: Bus.xar

Acorn

[Egg Bramhill]

Thanks Boy.

Cheers Acorn

I don't know what you did but keep doing it!

Neither do I. Somewhere along the line this xar file became corrupted.

In passing, the contact: paint; code needed to accommodate Variants ....

I can confirm this does indeed work. I've included it in the site (link below). I see no page length issues and the mobile version works fine. All green in PageSpeed Insights.

https://parkeston.com/hc20a/

[Egg Bramhill]

@Egg, I took the liberty of playing with your navigation:

Acorn, no liberty. I like this effect even more than my current navbar.

One thing I can't figure out is the mouseOver buttons are triggered by links on the mouseOff layer:

javascript: ;

How do I add links to the different pages?

Here are two variations of your original:

https://www.parkeston.com/tg/bus-2/

https://www.parkeston.com/tg/bus-3/

What I like about not using the Xara navbar is the fact that there are only 2 images used for all 2 x 7 (14) button states as can be seen in the bus-2 version and they can be named. I've also made the navbar sticky.

One final question is it possible in any way to stop the page flashing as it loads the next page. Perhaps an overlay that is only visible until the page is fully loaded?

Egg

[Chris M]

I apologise for moving everything onto the MouseOff layer (except !selected), but it made more sense to me that way...horses for courses and all that.

Changed the Transition Effect in Export to Scroll Horizontal to smooth out the flicking pages.
Changed the Page Background to Pasteboard Background to eliminate a white border that appeared when changing pages.
Gave the arrows and titles a Fade In Reveal Animation, again to stop a flicking effect.
Removed some hidden rectangles as I couldn't see what they did.
Removed the vans on MouseOver to keep it clean.
Left the Layer !selected and the Website HTML Code (Head) as I presume you did that to reduce the number of images.

I have a horrible feeling I've missed the mark and gone off on a tangent, but have fun with the file anyway.

my-Bus-2a.xar

[Acorn]

@Egg, just change the MOff Link javascript: ; for your required page.
The demo needed a dummy link and as there were no other pages i used this. People often use '#' (wrongly).

I have found this CSS works well for flashing and scaling issues:

<style>
html, body {
animation: fadein 16ms;
}
@keyframes fadein {
0%, 65% { opacity: 0; }
100% { opacity: 1; }
}
</style>

Detail here, https://www.talkgraphics.com/showthr...608#post654608.

Acorn

[Egg Bramhill]

@ Acorn: Spot on, that solves the flashing issue. Talk about missing the bleeding obvious re the links! Why isn't # correct?

@ Chris:

...horses for courses and all that.

Indeed. Using these additional layers is my prefered way of working.

I have a horrible feeling I've missed the mark and gone off on a tangent, but have fun with the file anyway.

Yes you are missing something but I'm off out & will explain later. Thanks for your input.

Latest version

[Acorn]

Why isn't # correct?

Egg, a '#' will move the view to the top of the page. When I am testing, i might not want that. A '#' also invokes Xara code, which may muddy my testing.

Acorn

[Egg Bramhill]

Thanks Acorn

[Egg Bramhill]

@ Chris:

Here's what I think you were missing

https://youtu.be/RzYHcT2MlDY

[Chris M]

Yep, that makes sense. I removed the drop-down buses early on in my playing, as my brain went 'simply everything'. So, in effect, the first thing I did was remove the very thing you wanted. I'm consistent