2009 208: Difference between revisions

Latest revision as of 18:24, 17 March 2009

1st Years: 2nd Trimester ("web 2.0") Project
2nd Years: Mock Show Approaches! (April 18)
Slider Example

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
    #slider { margin: 10px; }

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }

div.slideandbox {
	float: left;
	border: 1px solid lightgray;
	text-align: center;	
}
div.param {
	margin: 20px;
	height: 100px;
	border: 1px solid black;
}
input.num {
	width: 40px;
}
  </style>
  <script type="text/javascript">

function log(msg) {
	// try { console.log(msg); } catch(e) {}
}

  $(document).ready(function(){
  $(".param").slider({orientation: 'vertical', max: 1000});
  $("#s_height").bind("slide",  function(evt, ui) {
	// var val = ui.value();
	log("hello!", ui.value); 
	$("#f_height").attr("value", ui.value);
  });

});
  </script>
</head>
<body style="font-size:62.5%;">
  
<p>Parameters: Height, Width, Descendant, Ascendant, Monospaced (1-100), Caligraphy, Anchor Points</p>

<form method="get" action="/cgi-bin/font.cgi">

<div class="slideandbox">
	Height	
	<div class="param" id="s_height"></div>
	<input class="num" type="text" id="f_height" name="height" />
</div>

<div class="slideandbox">
	Width	
<div class="param" id="s_width"></div>
	<input class="num" type="text" id="width" name="width" />
</div>

<div class="slideandbox">
<div class="param" id="s_descendant"></div>
	<input class="num" type="text" id="width" name="width" />
</div>
<div class="slideandbox">
<div class="param" id="s_ascendant"></div>
	<input class="num" type="text" id="width" name="width" />
</div>
<div class="slideandbox">
<div class="param" id="s_monospaced"></div>
	<input class="num" type="text" id="width" name="width" />
</div>

<div class="slideandbox">
<div class="param" id="s_caligraphy"></div>
	<input class="num" type="text" id="width" name="width" />
</div>

<div class="slideandbox">
<div class="param" id="s_anchor"></div>
	<input class="num" type="text" id="width" name="width" />
</div>

<div style="clear: both; border: 1px solid black">
Hello!
</div>

<input type="text" id="width" name="width" />
<input type="submit" name="_submit" value="make my font!"/>

</form>
</body>
</html>