Welcome to TalkGraphics.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Apr 2018
    Location
    London
    Posts
    650

    Default Variants & Placeholders - Best Practice using ID & Classes?

    Probably one for the techies here:

    I have audio and video tags on a single variant, each with a unique ID. I have functions that call those tags using getElementById() - all works well e.g. Jukebox-Waterways.xar

    The original designs for the Audio/Video plugins were always implemented as plugins (website within a website as required) - additional variants didn't feature.

    However, with some recent enhancements, I am creating a second desktop variant (from the original mobile variant using Scale-to-fit-Width extended to same width as the new desktop variant).

    Because the placeholders use IDs, AFAIK this does not work for second or subsequent variants.

    Thought it possible to add a class="username" instead of id="username" to the placeholders and then use getElementsByClassName() but I am not sure how this plays out across Xara variants.

    Guidance much appreciated.

    Gary

    BTW using separate IDs fixes the issue, but doubles up on the code
    Last edited by Initiostar; 05 August 2021 at 05:21 PM. Reason: Separate IDs test

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    14,021

    Default Re: Variants & Placeholders - Best Practice using ID & Classes?

    Quote Originally Posted by Initiostar View Post
    Probably one for the techies here:
    I have audio and video tags on a single variant, each with a unique ID. I have functions that call those tags using getElementById() - all works well e.g. Jukebox-Waterways.xar
    The original designs for the Audio/Video plugins were always implemented as plugins (website within a website as required) - additional variants didn't feature.
    However, with some recent enhancements, I am creating a second desktop variant (from the original mobile variant using Scale-to-fit-Width extended to same width as the new desktop variant).
    Because the placeholders use IDs, AFAIK this does not work for second or subsequent variants.
    Thought it possible to add a class="username" instead of id="username" to the placeholders and then use getElementsByClassName() but I am not sure how this plays out across Xara variants.
    Guidance much appreciated. Gary
    Gary, it probably won't work as you will have the joy of running the same track/video twice at the same time.
    Even linking to a single source file through an IFRAME tag causes the same grief.

    The "proper" coding would be to move the entire Placeholder to its second home within the Variant's HTML.
    I have managed this with all sorts of code that is dependent on IDs; it is far harder when it is shuffling YouTube videos about.

    A saner approach ought to be keeping the media content in one location and changing the source to the media on a Variant becoming active.
    With a Xara player, you do not have access the the track time, the reason I assisted in building up the bespoke coding we did a year back.

    The cleanest solution I can suggest is to hive off the media to a separate non-variant site and use Scale to Fit Width.
    It is best for forms and media as you don't have to worry about coding or session data.

    Some nuts (acorns are not in play here) are too tough to crack.

    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
    650

    Default Re: Variants & Placeholders - Best Practice using ID & Classes?

    Thanks for the good advice Acorn,

    The AV plugin works well and is best left as that, embedded in variants as required, or as you suggest resizable with Scale-to-fit-Width.

    Thought I give it a try with different IDs and player names across variants, but it became a tad fragile! I'll stick with what we got to work a while back.

    Thanks,

    Gary

 

 

Tags for this Thread

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
  •