Way too late in the night for me to try and translate what you said. I'll stare at it in earnest in between jobs tomorrow.
Way too late in the night for me to try and translate what you said. I'll stare at it in earnest in between jobs tomorrow.
Chris, I am also admitting a cop-out.
The original intent was to make the numbered jumps go to the page number.
I extracted next and prev from a deeper location where I had accounted for the zero-based JS arithmetic. When I brought them out to main(), I failed to check these jumps again.
So, at the moment, they will be one out. You will have to reduce their current values by one.
Doing it this way does keep the code cleaner and smaller.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Acorn, I've removed the individual page CCS effects and replaced them with a single website effect in the Website HTML code Head to have the same in & out transitions on all pages, the same as in a calendar flip routine.
However the page out transition (which is the one I want) is not the mirror image of the page in transition, which seems to come in from the left, rather than centered. Any idea why?
<script>
async function main() {
page = location.href.split('/').pop();
xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content;
afile = await fetch(xrfls);
asite = await afile.text();
pages = asite.split('\r\n').filter(x => x.search(/\.htm/) > 0 );
i = pages.indexOf(page);
a = pages.length;
next = (i + 1)%a;
prev = (i + a - 1)%a;
}
main();
</script>
<style>
.pagein {
animation: pageConcaveVBI;
animation-timing-function: ease-in;
animation-duration: 450ms;
animation-fill-mode: forwards;
}
</style>
<style>
.pageout {
animation: pageConcaveVBO;
animation-timing-function: ease-out;
animation-duration: 450ms;
animation-fill-mode: forwards;
}
</style>
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Adding the revised code (Website (Head)) and changing the link array to start from 0 did the trick. On a side not: I did try starting from 0 before, but it failed, both the new code and the 0 are required.
However, back to the variant. Adding a variant also kills the animation effect.
>>> Dots.xar <<< No variant
>>> Dots Variant.xar <<< With variant
Egg, I don't get any left actions until the STFW is under 90%.
A suggestion might be to add a small delay to the CSS to ensure Xara's code for fitting the page to the browser is closer to complete. This sadly gives a jump.
What I also tried was upping both times to 800ms and changing the fadeout animation-fill-mode to none.
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
@Egg, it seems that when Xara build its Effects, a number were then not subsequently checked when it introduced STFW.
As a consequence, we get the left-side roll-in.
I have created a pair of Effects just for you:
They work for me but I'm sure you will be quite attentive.Code:<style>.pagein { animation: pageEggFlipI; animation-timing-function: ease-in; animation-duration: 450ms; animation-fill-mode: forwards; } .pageout { animation: pageEggFlipO; animation-timing-function: ease-out; animation-duration: 450ms; animation-fill-mode: forwards; } @keyframes pageEggFlipI { 0% { transform:perspective(1000px) translate3d(0,50%,0) rotate3d(1,0,0,120deg) translate3d(0,50%,0); opacity:0; } 100% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } } @keyframes pageEggFlipO { 0% { transform:perspective(1000px) translate3d(0,0,0) rotate3d(0,0,0,0) translate3d(0,0,0); opacity:1; } 100% { transform:perspective(1000px) translate3d(0,-50%,0) rotate3d(1,0,0,-120deg) translate3d(0,-50%,0); opacity:0; } } </style>
Acorn
ASIDE#2:
I have found that by rolling your own Effect (with @keyframes), you can bypass the need for any object to be Sticky as a prerequisite.
This can remove prs4.js and ultimately jQuery from the mix making loading much the faster but only where you are not using Xara Effects elsewhere.
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Yes, that's better thanks Acorn. See attached.
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Hopefully the last fix: The Ultimate Conventional Website - Step 8.xar!
Arithmetic is back on track so jump(n) will now go to page number n.
Head
BodyCode:<script> async function main() { page = location.href.split('/').pop(); xrfls = document.querySelectorAll('[name*="XAR Files"]')[0].content; afile = await fetch(xrfls); asite = await afile.text(); pages = asite.replaceAll('\r', '').split('\n').filter(x => x.search(/\.htm/) > 0 ); pages = [...new Set(pages)]; i = pages.indexOf(page) + 1; a = pages.length; next = i%a + 1; prev = (i == 1) ? a : i - 1; } main(); </script>
AcornCode:function jump(ndx) { effect.add('pageout'); setTimeout(function(){ location.href = pages[ndx - 1]; }, 640); }
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
That works for me Acorn
Egg
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Bookmarks