Scrolling Menus in 100% Pure Markup

Scrolling Menus in 100% Pure Markup

  • Comments 2

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>

 

    </par>

  </timing>

  </head>

  <body>

 

    <!--container for the whole screen-->

    <div style:position="absolute"

      style:x="0px" style:y="0px"

      style:width="1920px" style:height="1080px"

      style:backgroundColor="black">

 

      <!--Button to scroll left-->

      <button id="left" style="btn" style:backgroundColor="white"

        style:x="800px" style:y="120px" />

 

      <!--Viewport that will clip the buttons in the list-->

      <div id="viewport" style:position="absolute"

        style:x="250px" style:y="100px"

        style:width="500px" style:height="140px"

        style:backgroundColor="gray">

 

        <!--First block of three buttons; initially hidden-->

        <div id="start" style:position="absolute"

          style:x="0px" style:y="10px"

          style:width="500px" style:height="120px"

          style:backgroundColor="silver" style:display="none">

 

          <!--Three buttons; just random colours for now-->

          <button style="btn" style:backgroundColor="red"

            style:x="33px" style:y="10px" />

          <button style="btn" style:backgroundColor="yellow"

            style:x="200px" style:y="10px" />

          <button style="btn" style:backgroundColor="lime"

            style:x="366px" style:y="10px" />

 

        </div>

 

        <!--Second block of three buttons; initially hidden-->

        <div id="middle" style:position="absolute"

          style:x="500px" style:y="10px"

          style:width="500px" style:height="120px"

          style:backgroundColor="silver" style:display="none">

 

          <!--Three buttons; just random colours for now-->

          <button style="btn" style:backgroundColor="aqua"

            style:x="33px" style:y="10px" />

          <button style="btn" style:backgroundColor="blue"

            style:x="200px" style:y="10px" />

          <button style="btn" style:backgroundColor="fuchsia"

            style:x="366px" style:y="10px" />

 

        </div>

 

 

        <!--Third block of three buttons; initially hidden-->

        <div id="end" style:position="absolute"

          style:x="1000px" style:y="10px"

          style:width="500px" style:height="120px"

          style:backgroundColor="silver" style:display="none">

 

          <!--Three buttons; just random colours for now-->

          <button style="btn" style:backgroundColor="maroon"

            style:x="33px" style:y="10px" />

          <button style="btn" style:backgroundColor="olive"

            style:x="200px" style:y="10px" />

          <button style="btn" style:backgroundColor="navy"

            style:x="366px" style:y="10px" />

 

        </div>

      </div>

 

      <!--Button to scroll right-->

      <button id="right" style="btn" style:backgroundColor="white"

        style:x="100px" style:y="120px" />

 

    </div>

  </body>

</root>

Explanation:

Nothing too deep here.

Styling

Just set up a style for buttons to be 100 x 100 pixels.

Timing

Basically just scroll the divs inside the viewport when the left and right buttons are clicked. The div that is currently visible is made visible with the "show" animation so that style:display is updated. Then the div that is about to be scrolled on is also given the "show" animation so that it is visible during scrolling.

Once something scrolls off-screen (and the animation ends), it will go back to its default state of being hidden and at the original x location of 0, 500, or 1000 pixels. So to make sure the blocks are visible and ready to scroll on and off, we set their locations with the "forceLeft", "forceMiddle", and "forceRight" animations.

Body

Basically just a 500px wide "viewport" that contains three child blocks each of which are also 500px, each of which contains three buttons. The three child divs slide around inside the viewport, and are clipped whenever they go outside of the bounds of the div.

  • I am having difficulty reproducing this in the newest iHDSimulator.  Basically the buttons are being displayed regardless of the parent div display setting.
  • I got it working - thanks for posting.
Page 1 of 1 (2 items)