Scrolling Menus in 100% Pure Markup


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=http://www.dvdforum.org/2005/ihd

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

  xmlns:state=http://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>

 

Comments (2)

  1. Will Merydith says:

    I am having difficulty reproducing this in the newest iHDSimulator.  Basically the buttons are being displayed regardless of the parent div display setting.

  2. Will Merydith says:

    I got it working – thanks for posting.