Hide
Search Results

Dynamic Height and Width

This example allows the user to dynamically re-size the canvas.

Setting Up this Example

  1. Start by going to the My Apps page and Click “Create New App”.

Note: If you are not already logged in to Yahoo!, you will be prompted to log in or create a new Yahoo! account.

The Create New App page appears.

  1. Fill in the fields as follows:

    • App Title: Enter “Dynamic Height and Width”.

      This is the title of the App as it will appear in the Galleries.

    • App Content: Select “External”.

    • App Content URL: Enter the hosted URL “http://www.yap-apps.com/sample/Dynamicsize.html“

    • User Signin: Select “Required”.

    • HTTP Method: Select “GET”.

    • Dimensions: Enter “960” for Width, and “600” for Height. This is the default.

    • Description: Enter “This example allows the user to dynamically re-size the canvas.”

      This is the description of your app Gallery as it will appear to users.

  2. Click the “Create App” button. The Edit App page appears.

    edit dynamic resize app page

  3. Click Save.

  4. Click Preview.

    The Preview page appears:

    Preview App

Hosted HTML file

<!-- Dynamicsize.html -->

<div style="background:url(http://yap-apps.com//sample/brick.gif); 
            padding:5px; display:none" id="daDiv">
  <div style="width:226px; margin:0 auto; min-height:40px">
  	<div style="width:100px; margin-right:10px; float:left; padding:2px; background-color:#FFF">
    <div style="float:left; width:82px; overflow:visible; margin-right:1px;">
      <div style="position:absolute; color:#CCC; font-size:11px; width:80px; 
                  margin-top:24px" id="currHeight">0</div>
      <div style="position:absolute; color:#999; font-size:11px; 
                  width:80px; margin-top:-3px">H</div>
      <input type="text" id="stepHeight" style="height:35px; 
                                                width:100%; 
                                                text-align:center; 
                                                font-size:200%; 
                                                color:#690; 
                                                padding:0; 
                                                margin:0; 
                                                border:none" 
             value="100" />

    </div>
    <div style="height:35px; width:17px; float:right;">
	   <a href="#" onClick="AddHeight(-1); return false;" style="height:17px; display:block">
	     <img src="http://yap-apps.com//sample/reduce.gif" />
	   </a>
	   <a href="#" onClick="AddHeight(1); return false;" 
	               style="margin-top:1px; height:17px; display:block">
		 <img src="http://yap-apps.com//sample/increase.gif" />
	   </a>
	</div>
    </div>
    <div style="width:100px; float:left; padding:2px; background-color:#FFF">
    <div style="float:left; width:82px; overflow:visible; margin-right:1px">
      <div style="position:absolute; color:#CCC; font-size:11px; width:80px; 
                  margin-top:24px;" id="currWidth">0</div>
      <div style="position:absolute; color:#999; 
                  font-size:11px; width:80px; margin-top:-3px;">W</div>
      <input type="text" id="stepWidth" style="height:35px; 
                                               width:100%; 
                                               text-align:center; 
                                               font-size:200%; 
                                               color:#690; 
                                               padding:0; 
                                               margin:0; 
                                               border:none" value="10" />

    </div>
      <div style="height:35px; width:17px; float:right">
	   <a href="#" onClick="AddWidth(-1); return false;" 
	               style="height:17px; display:block">
		   <img src="http://yap-apps.com//sample/reduce.gif" />
		</a>
		<a href="#" onClick="AddWidth(1); return false;" 
		            style="margin-top:1px; height:17px; display:block">
		  <img src="http://yap-apps.com//sample/increase.gif" />
	    </a>
	   </div>
    </div>
  </div>
</div>
<style>img {border:0}</style>
<script>
var daDiv = document.getElementById('daDiv'),
	stepHeight = document.getElementById('stepHeight'),
	stepWidth = document.getElementById('stepWidth'),
	currHeight = document.getElementById('currHeight'),
	currWidth = document.getElementById('currWidth'),
	minWidth = 0,
	minHeight = 0;
function AddHeight(n) {
	daDiv.style.height = Math.max(39, daDiv.clientHeight - 10 + (n * Number(stepHeight.value))) + 'px';
}
function AddWidth(n) {
	daDiv.style.width = Math.max(39, daDiv.clientWidth - 10 + (n * Number(stepWidth.value))) + 'px';
}
(function calc() {
	var change = 0;
	if (currHeight.innerHTML != daDiv.clientHeight) currHeight.innerHTML = daDiv.clientHeight;
	if (currWidth.innerHTML != daDiv.clientWidth) currWidth.innerHTML = daDiv.clientWidth;
	if (minWidth < daDiv.clientWidth || minHeight < daDiv.clientHeight) {
		minWidth = Math.max(minWidth, daDiv.clientWidth);
		minHeight = Math.max(minHeight, daDiv.clientHeight);
		YAP.publish(new YAP.events.ViewportChanged({height: minHeight, width: minWidth}));
	}
	window.setTimeout(calc, 500);
})();
daDiv.style.display = 'block';
</script>

Table of Contents