SOURCE CODE: Image Port Inside a Marquee
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>Image Port Inside a Marquee | 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.ImagePort Uize.Widget.Resizer.Marquee"/>
  <meta name="description" content="See this demo, where an image port is resizable by a marquee, to better understand how the logical sizing and positiong of the image port widget work."/>
  <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">
    .label {
      font-size:10px;
    }
    select {
      border:1px solid #fff;
      font-size:12px;
      width:40px;
      height:20px;
    }
  </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>
    Image Port Inside a Marquee
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/image-port-with-marquee.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.ImagePort.html"><code>Uize.Widget.ImagePort</code></a> class is being used in conjunction with an instance of the <a href="../reference/Uize.Widget.Resizer.Marquee.html"><code>Uize.Widget.Resizer.Marquee</code></a> class to show how values for the image port widget's state properties affect its image sizing and positioning as the port size changes. Event handlers are wired up for the marquee, so that moving and resizing it causes the image port to be moved and resized to the marquee's position, after which the image port updates its image sizing and positioning. Sliders and select boxes are wired up to let you control the values of the <code>alignX</code>, <code>alignY</code>, <code>sizingValue</code>, <code>sizingUpperBound</code>, and <code>sizingLowerBound</code> state properties of the image port.</p>
  </div>

  <form>
    <table border="0" cellspacing="0" cellpadding="0" style="margin:auto;">
      <tr>
        <td></td>
        <td></td>
        <td width="5"></td>
        <td class="label" style="text-align:center;">alignY</td>
        <td width="15"></td>
        <td>
          <select id="page-sizingUpperBound">
            <option value="fill" selected>fill</option>
            <option value="fit">fit</option>
          </select>
        </td>
        <td class="label" style="padding-left:5px;">sizingUpperBound</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <div style="position:relative; width:400px; height:300px;" class="darkInsetBackgroundColor">
            <div id="page_imagePort" style="position:absolute; left:0px; top:0px; width:400px; height:300px; overflow:hidden;">
              <img id="page_imagePort-image" src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=500" style="position:absolute; width:500px; height:357px;" alt=""/>
            </div>
            <div id="page_marquee" style="position:absolute; left:0px; top:0px; width:400px; height:300px;"></div>
          </div>
        </td>
        <td width="5"></td>
        <td id="page-alignYSlider" style="height:300px;"></td>
        <td width="5"></td>
        <td id="page-sizingValueSlider" style="height:300px;"></div>
        </td>
        <td class="label" valign="center" style="padding-left:5px;">sizingValue (0 to 3)</td>
      </tr>
      <tr>
        <td colspan="7" height="5"></td>
      </tr>
      <tr>
        <td class="label" style="padding-right:5px;">alignX</td>
        <td id="page-alignXSlider" style="width:400px;"></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <select id="page-sizingLowerBound">
            <option value="fit">fit</option>
            <option value="0" selected>0</option>
          </select>
        </td>
        <td class="label" style="padding-left:5px;">sizingLowerBound</td>
      </tr>
    </table>
  </form>
</div>

<!-- JavaScript code to activate the image port functionality -->

<script type="text/javascript">

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

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

    /*** add the image port child widget ***/
      var imagePort = page.addChild (
        'imagePort',
        Uize.Widget.ImagePort,
        {
          sizingLowerBound:'0',
          sizingUpperBound:'fill',
          sizingValue:.5,
          alignX:.5,
          alignY:.5
        }
      );

    /*** code to update the image port instance based on user input values ***/
      function updateImagePortSettings () {
        imagePort.set ({
          alignX:+alignXSlider,
          alignY:+alignYSlider,
          sizingUpperBound:page.getNodeValue ('sizingUpperBound'),
          sizingLowerBound:page.getNodeValue ('sizingLowerBound'),
          sizingValue:+sizingValueSlider
        });
      }

    /*** common values shared by alignX, alignY, and sizingValue sliders ***/
      Uize.Widgets.Slider.Widget.set ({
        value:.5,
        fullColor:'#999',
        trackLength:'100%',
        increments:0,
        built:false
      });

    /*** add the alignX slider child widget ***/
      var alignXSlider = page.addChild (
        'alignXSlider',
        Uize.Widgets.Slider.Widget,
        {
          minValue:0,
          maxValue:1,
          orientation:'horizontal'
        }
      );
      alignXSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the alignY slider child widget ***/
      var alignYSlider = page.addChild (
        'alignYSlider',
        Uize.Widgets.Slider.Widget,
        {
          minValue:1,
          maxValue:0,
          orientation:'vertical'
        }
      );
      alignYSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the sizingValue slider child widget ***/
      var sizingValueSlider = page.addChild (
        'sizingValueSlider',
        Uize.Widgets.Slider.Widget,
        {
          fullTintColor:'#fff',
          fullTintLevel:70,
          minValue:0,
          maxValue:3,
          value:1,
          orientation:'vertical'
        }
      );
      sizingValueSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the marquee child widget ***/
      function updateImagePortPos () {
        imagePort.setNodeStyle ('',marquee.getCoords ());
        imagePort.updateUi ();
      }
      var marquee = page.addChild (
        'marquee',
        Uize.Widget.Resizer.Marquee,
        {
          constrain:true,
          minWidth:20,
          minHeight:20,
          built:false
        }
      );
      marquee.wire ('Position Changed',updateImagePortPos);

    /*** initialize the ImagePort instance ***/
      updateImagePortSettings ();
      updateImagePortPos ();

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

    /*** watch for changes in sizing bound values ***/
      page.wireNode ('sizingUpperBound','change',updateImagePortSettings);
      page.wireNode ('sizingLowerBound','change',updateImagePortSettings);
  }
);

</script>

</body>
</html>