Multi-Function Button using a Xara link dialogue box

[Initiostar]

Is it possible using the standard Xara link dialogue box to open one link and close another simultaneously. It works very well for popups using standard open and close functions documented at https://help.xara.com/article/26-und...d-web-features

But let's say I want to combine the actions of jumping to an anchor/heading (same page) with closing (or opening) a popup, can I use a script in the link dialogue box to do this? What would it look like? Any ideas please?



Thanks,

Gary

[Acorn]

Is it possible using the standard Xara link dialogue box to open one link and close another simultaneously. It works very well for popups using standard open and close functions documented at https://help.xara.com/article/26-und...d-web-features

But let's say I want to combine the actions of jumping to an anchor/heading (same page) with closing (or opening) a popup, can I use a script in the link dialogue box to do this? What would it look like? Any ideas please?



Thanks,

Gary

Gary, here is a demo of an approach.

I've included two for the price of one as I have a scroll to top for opening the popup and a scroll to anchor on closing the popup.

JS-Two Action Button.xar

Acorn

[Initiostar]

Thank you Acorn; had a play with your good work and it works perfectly in a main variant.

I created a mobile variant, turned-off 'share with variants' and the link changes to xr_cpu(11);. so I changed the corresponding popup close link to javascript:document.getElementById('anchorpoint1') .scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp11");

The popup on the mobile variant loads correctly using xr_cpu(11), a standard Anchor link brings the heading into view, the 2-function button closes the popup, but does not bring the heading into view. My guess is I have made a mistake, but not sure where? Does it need a different ID?

Any thoughts welcome.

Thanks

Gary

[Acorn]

Thank you Acorn; had a play with your good work and it works perfectly in a main variant.
I created a mobile variant, turned-off 'share with variants' and the link changes to xr_cpu(11);. so I changed the corresponding popup close link to javascript:document.getElementById('anchorpoint1') .scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp11");
The popup on the mobile variant loads correctly using xr_cpu(11), a standard Anchor link brings the heading into view, the 2-function button closes the popup, but does not bring the heading into view. My guess is I have made a mistake, but not sure where? Does it need a different ID?
Any thoughts welcome.
Thanks
Gary

It is xara thing!. Dropping the Variant sharing is correct. You didn't need to change the anchor Name but in a Variant page you need to find out what Xara is calling it. I found javascript:document.getElementById('Xxr_v2_anchorage').scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp11"); works but I have not checked for second and more Variants.

Acorn

[Initiostar]

Inspired! many thanks for all your help Acorn; works perfectly.

How to use javascript in the Xara Link dialogue box would make a great tutorial alongside the 'Undocumented and Advanced Features' that give you additional popup management capabilities. One day maybe; its adds so much to what can be achieved.

[Initiostar]

I setup another test to prove my JS Multi-Function Link works before implementing it in the real world; it does for multiple pages in a main variant, but fails in a secondary variant (e.g.mobile) for more than one page.

In trying to identify the problem (mine or real), I copied the offending page two variant into single page site and it works as it should.

Using a variant ID "Xxr_v2_Name" works for a single page, but (and as likely my mistake) it does not seem to for the second page. All the Names are unique and I placed a check on each page to ensure I had the correct window number.

The XAR docs are attached, any thoughts on where I have made the error welcome.

FYI: the thought process behind my JS Multi-Function Link is more about navigation on a mobile variant; one can for example have a popup open where the menu is out of site, closing the popup and simultaneously bringing a menu or main heading back into view can make it easier when scrolling up and down a narrow page.

Any help as always much appreciated.

 // Open Popup, Close Popup and ScrollIntoView an Anchor
// Page 1 Main
javascript:document.getElementById('MainHeaderBlock').scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp4");
// Page 2 Main
javascript:document.getElementById('MainHBPage2').scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp20");
// Page 1 Mobile
javascript:document.getElementById('Xxr_v2_MobileHeaderBlock').scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp12");
// Page 2 Mobile
javascript:document.getElementById('Xxr_v2_MobileHBPage2').scrollIntoView({ behavior: 'smooth' });xr_ppc("xr_xp28");

[Acorn]

The jump to anchor in the Variant has to be id="Xxr_v4_MobileHBPage2", you have id="Xxr_v2_MobileHBPage2" in <a href="javascript:document.getElementById(%27Xxr_v2 _MobileHBPage2%27).scrollIntoView({%20behavior:%20 %27smooth%27%20});xr_ppc(%22xr_xp28%22);" onclick="return(xr_nn());">

Sorry but I didn't invent this, it is all Xara.

Acorn

[Initiostar]

Many thanks Acorn, it works!

How do I track down the correct ID 'n' in "Xxr_vn" ? Guessing it is the variant number? page no x 2 for 2 variants?

[Acorn]

Many thanks Acorn, it works!
How do I track down the correct ID 'n' in "Xxr_vn" ? Guessing it is the variant number? page no x 2 for 2 variants?

Far more pedestrian, I looked at the code by pressing Header 2 > Right-click > Inspect in the browser.

Acorn

[Initiostar]

Thankyou Acorn,

I discovered the Xara logic to the 'variant number' (out of curiosity); sequential numbering for live pages and variants is based on the order in which you create variants and pages e.g.create a website with 3 variants, desktop, mobile and tablet: P1: D(v1), M(v2), T(v3); P2: D(v4), M(v5), T(v6). Dynamically, reorders the variant numbers when you delete pages or variants. Much better as you suggested; inspect the element!

I discovered too that Multi-Function Links are quite tricky! but I had a go!

@ https://theparsonage.co.uk/events.htm. The main variant uses the standard Xara link: popup: "layername (lock)", close "layername1(lock)", "layername2(lock)" etc. This allows the visitor to scroll up and down a list at random, and with one click, open the target in view, simultaneously closing a popup that may already be in view. The mobile variant, in a narrower width format, takes a slightly different approach based on your javascript suggestions. It too ensures that wherever you scroll to in a list, the popup always opens at the top in the viewing window. The animation 'slide right' and the animation in the popup itself, were created by first using the Xara popup settings. Xara very kindly saves these settings for you and they are used when one applies the javascript dual function thereafter. I also tried out some different ideas for on-page submenus. The approach is geared to maximise the viewing window, but provide intuitive navigation; e.g. top-of-page brings the submenu bar back into view.

@ https://initiostar.co.uk/ on the mobile variant, I have tried some different ideas on navigation with on-page links (using anchors) and a standard menu sidebar popup; the javascript multi-function allows the visitor, for example, to simultaneously jump to an on-page anchor and close the main menu sidebar popup.



You can (I think) be quite creative using multi-function links, but it is not really sustainable keeping track of generated code. Maybe one day Xara could create dual-function link on the link dialogue box?

As always many thanks for your help (time for me to iron-out the errors now!)

Gary