SOURCE CODE: Different Marquee Modes
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Different Marquee Modes | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="touch ipad Uize.Widget.Resizer.Marquee"/>
  <meta name="description" content="See how to configure the marquee widget. Learn how to contrain to area, have a fixed aspect ratio, minimum dimensions, non-resizable sides, and more."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .marquees {
      position:relative;
      width:740px;
      height:680px;
      margin:auto;
    }
    .marquees .marqueeHeading,
    .marquees .marquee
    {
      position:absolute;
      width:365px;
    }
    .marquees .marqueeHeading {
      margin:0;
      font-size:11px;
      padding-top:2px;
      text-transform:none;
      letter-spacing:0;
      height:20px;
      border:none;
    }
    .marquees .marquee {
      height:200px;
    }
    .marquees .column1 {left:0;}
    .marquees .column2 {left:375px;}
    .marquees .row1Heading {top:0;}
    .marquees .row1Marquee {top:20px;}
    .marquees .row2Heading {top:230px;}
    .marquees .row2Marquee {top:250px;}
    .marquees .row3Heading {top:460px;}
    .marquees .row3Marquee {top:480px;}
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Different Marquee Modes
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/marquee-modes.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>This example demonstrates some of the ways that the marquee widget can be configured to suit different needs. In the example, six instances of the <a href="../reference/Uize.Widget.Resizer.Marquee.html"><code>Uize.Widget.Resizer.Marquee</code></a> class are instantiated, each with a slightly different initial state. Above each marquee is a heading that summarizes how the marquee is configured. Play around with the marquees to see how each behaves. Then view the source code to see how they are configured.</p>
  </div>

  <!-- marquee UI wireframe -->

  <div class="marquees">
    <div class="exampleSectionHeading marqueeHeading column1 row1Heading">
      2:1 fixed aspect ratio, constrained to area, 100 x 50 min size
    </div>
    <div id="page_marquee0" class="marquee column1 row1Marquee darkInsetBackgroundColor"></div>

    <div class="exampleSectionHeading marqueeHeading column2 row1Heading">
      1:1 fixed aspect ratio, constrained to area, 20 x 20 min size
    </div>
    <div id="page_marquee1" class="marquee column2 row1Marquee darkInsetBackgroundColor"></div>

    <div class="exampleSectionHeading marqueeHeading column1 row2Heading">
      free aspect ratio, constrained to area, 20 x 20 min size
    </div>
    <div id="page_marquee2" class="marquee column1 row2Marquee darkInsetBackgroundColor"></div>

    <div class="exampleSectionHeading marqueeHeading column2 row2Heading">
      free aspect ratio, not constrained to area, 20 x 20 min size
    </div>
    <div id="page_marquee3" class="marquee column2 row2Marquee darkInsetBackgroundColor"></div>

    <div class="exampleSectionHeading marqueeHeading column1 row3Heading">
      fixed width, constrained to area, 20 x 20 min size
    </div>
    <div id="page_marquee4" class="marquee column1 row3Marquee darkInsetBackgroundColor"></div>

    <div class="exampleSectionHeading marqueeHeading column2 row3Heading">
      fixed width and height, constrained to area, 20 x 20 min size
    </div>
    <div id="page_marquee5" class="marquee column2 row3Marquee darkInsetBackgroundColor"></div>
  </div>
</div>

<!-- JavaScript code to make the static marquee HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Resizer.Marquee'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** create the marquee instances ***/
      page.addChild (
        'marquee0',
        Uize.Widget.Resizer.Marquee,
        {
          aspectRatio:2,
          constrain:true,
          width:100,
          height:50,
          minWidth:100,
          minHeight:50,
          built:false
        }
      );
      page.addChild (
        'marquee1',
        Uize.Widget.Resizer.Marquee,
        {
          aspectRatio:1,
          constrain:true,
          width:50,
          height:50,
          minWidth:20,
          minHeight:20,
          built:false
        }
      );
      page.addChild (
        'marquee2',
        Uize.Widget.Resizer.Marquee,
        {
          constrain:true,
          width:100,
          height:50,
          minWidth:20,
          minHeight:20,
          built:false
        }
      );
      page.addChild (
        'marquee3',
        Uize.Widget.Resizer.Marquee,
        {
          constrain:false,
          width:100,
          height:50,
          minWidth:20,
          minHeight:20,
          built:false
        }
      );
      page.addChild (
        'marquee4',
        Uize.Widget.Resizer.Marquee,
        {
          constrain:true,
          width:100,
          height:50,
          minWidth:20,
          minHeight:20,
          fixedX:true,
          built:false
        }
      );
      page.addChild (
        'marquee5',
        Uize.Widget.Resizer.Marquee,
        {
          constrain:true,
          width:100,
          height:50,
          minWidth:20,
          minHeight:20,
          fixedX:true,
          fixedY:true,
          built:false
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>