Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Apr 2018
    Location
    London
    Posts
    415

    Default Multi-Function Button using a Xara link dialogue box

    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?

    Click image for larger version. 

Name:	Multi Function Button.jpg 
Views:	57 
Size:	54.8 KB 
ID:	126437

    Thanks,

    Gary

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,441

    Info Re: Multi-Function Button using a Xara link dialogue box

    Quote Originally Posted by Initiostar View Post
    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?

    Click image for larger version. 

Name:	Multi Function Button.jpg 
Views:	57 
Size:	54.8 KB 
ID:	126437

    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #3
    Join Date
    Apr 2018
    Location
    London
    Posts
    415

    Default Re: Multi-Function Button using a Xara link dialogue box

    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

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,441

    Default Re: Multi-Function Button using a Xara link dialogue box

    Quote Originally Posted by Initiostar View Post
    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  5. #5
    Join Date
    Apr 2018
    Location
    London
    Posts
    415

    Default Re: Multi-Function Button using a Xara link dialogue box

    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.

  6. #6
    Join Date
    Apr 2018
    Location
    London
    Posts
    415

    Default Re: Multi-Function Button using a Xara link dialogue box

    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.


    HTML Code:
     // 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");
    Attached Files Attached Files

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,441

    Default Re: Multi-Function Button using a Xara link dialogue box

    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  8. #8
    Join Date
    Apr 2018
    Location
    London
    Posts
    415

    Default Re: Multi-Function Button using a Xara link dialogue box

    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?

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,441

    Default Re: Multi-Function Button using a Xara link dialogue box

    Quote Originally Posted by Initiostar View Post
    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
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  10. #10
    Join Date
    Apr 2018
    Location
    London
    Posts
    415

    Default Re: Multi-Function Button using a Xara link dialogue box

    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.

    Click image for larger version. 

Name:	initiostar mobile menu.jpg 
Views:	34 
Size:	163.8 KB 
ID:	126467

    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

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •