Scrolling Menus in 100% Pure Markup

  • Article

After looking at drop-down menus in 100% pure markup, we turn our attention to scrolling lists. These can be used for things like chapter menus or other long lists of items. This demo is horizontal, but you could do it vertically also (and in fact, I have a different sample that takes a different approach and uses both script and markup to do a vertically-scrolling list. I should post that soon...)

I won't be providing much commentary here at the moment, since the idea is just to post it ASAP (hi wmerydith :-) ) but I might have another post with more info soon:

Markup:

Here it is:

<?xml version="1.0"?>

<root xml:lang="en" xmlns="https://www.dvdforum.org/2005/ihd"

xmlns:style="https://www.dvdforum.org/2005/ihd#style"

xmlns:state="https://www.dvdforum.org/2005/ihd#state">

 

  <head>

    <styling>

 

    <!--Default for all buttons-->

    <style id="btn" style:position="absolute"

style:width="100px" style:height="100px" />

 

  </styling>

 

  <timing clock="page">

 

    <!--Animations we will use in this sample - all pretty basic-->

    <defs>

      <animate id="goLeft" additive="sum" style:x="0px;-500px" />

      <animate id="goRight" additive="sum" style:x="0px;500px" />

      <set id="show" style:display="auto" />

      <set id="forceLeft" style:x="-500px" />

      <set id="forceMiddle" style:x="0px" />

      <set id="forceRight" style:x="500px" />

    </defs>

 

    <!--Actual timing sheet-->

    <par>

 

      <!--When the start block is visible, we listen to the "left" button click-->

      <!--and we scroll the start block off-screen and the middle block on-screen-->

      <par begin="id('start')[style:x()='0px']" end="id('middle')[style:x()='0px']">

 

        <!--Ensure the block is visible-->

        <cue select="id('start')" dur="1s" use="show" fill="hold" />

 

        <!--When clicked, show the middle block and scroll away-->

        <par begin="id('left')[state:actioned()]" end="false()">

          <cue select="id('start')" dur="1s" use="goLeft" fill="hold" />

          <cue select="id('middle')" dur="1s" use="goLeft show" fill="hold" />

        </par>

      </par>

 

      <!--When the middle block is visible, we listen to both button clicks-->

      <!--and we scroll the appropriate blocks on / off screen-->

      <par begin="id('middle')[style:x()='0px']"

end="(id('start')[style:x()='0px'] or id('end')[style:x()='0px'])">

 

        <!--Ensure the middle block is visible and in the middle-->

        <!--Ensure the other two blocks are in their correct places, too-->

        <cue select="id('middle')" dur="1s" use="show forceMiddle" fill="hold" />

        <cue select="id('start')" dur="1s" use="forceLeft" fill="hold" />

        <cue select="id('end')" dur="1s" use="forceRight" fill="hold" />

 

        <!--When clicked, show the end block and scroll away-->

        <par begin="id('left')[state:actioned()]" end="false()">

          <cue select="id('start')" dur="1s" use="goLeft" fill="hold" />

          <cue select="id('middle')" dur="1s" use="goLeft" fill="hold" />

          <cue select="id('end')" dur="1s" use="goLeft show" fill="hold" />

        </par>

 

        <!--When clicked, show the start block and scroll away-->

        <par begin="id('right')[state:actioned()]" end="false()">

          <cue select="id('start')" dur="1s" use="goRight show" fill="hold" />

          <cue select="id('middle')" dur="1s" use="goRight" fill="hold" />

          <cue select="id('end')" dur="1s" use="goRight" fill="hold" />

        </par>

      </par>

 

      <par begin="id('end')[style:x()='0px']" end="id('middle')[style:x()='0px']">

 

        <!--Ensure the end block is visible and in the middle-->

        <!--Ensure the middle block is in the correct place, too-->

        <cue select="id('end')" dur="1s" use="show forceMiddle" fill="hold" />

        <cue select="id('middle')" dur="1s" use="forceLeft" fill="hold" />

 

        <!--When clicked, show the middle block and scroll away-->

        <par begin="id('right')[state:actioned()]" end="false()">

          <cue select="id('middle')" dur="1s" use="goRight show" fill="hold" />

          <cue select="id('end')" dur="1s" use="goRight" fill="hold" />

        </par>

      </par>