DIR : /home/kozerus/public_html/jkwii/js/jsdoit/RangeBubble/RangeBubble/index.html

/home/kozerus/public_html/jkwii/js/jsdoit/RangeBubble/RangeBubble

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	
	<title>Range Bubble</title>
	
	<link rel='stylesheet' href='css/style.css'>
	
	<style>
    output { 
      position: absolute;
      background-image: -moz-linear-gradient(top, #444444, #999999);
      background-image: -o-linear-gradient(top, #444444, #999999);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
      background-image: -webkit-linear-gradient(top, #444444, #999999);
      width: 40px; 
      height: 30px; 
      text-align: center; 
      color: white; 
      border-radius: 10px; 
      display: inline-block; 
      font: bold 15px/30px Georgia;
      bottom: 175%;
      left: 0;
      margin-left: -1%;
    }
	  output:after { 
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 0;
	    border-top: 10px solid #999999;
	    border-left: 5px solid transparent;
	    border-right: 5px solid transparent;
	    top: 100%;
	    left: 50%;
	    margin-left: -5px;
	    margin-top: -1px;
	  }
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script>
	 $(function() {
	   var el, newPoint, newPlace, offset;
	   $("input[type='range']").change(function() {
	     el = $(this);
	     width = el.width();
	     newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
	     offset = -1.3;
	     if (newPoint < 0) { newPlace = 0;  }
	     else if (newPoint > 1) { newPlace = width; }
	     else { newPlace = width * newPoint + offset; offset -= newPoint;}
	     el
	       .next("output")
	       .css({
	         left: newPlace,
	         marginLeft: offset + "%"
	       })
	       .text(el.val());
	   })
	   .trigger('change');
	 });
	</script>
</head>

<body>

	<div id="page-wrap">
	
	<h1>Range Input Bubbles</h1>
	
	<form>
	  <div>
      <input id="jim" name="jim" type="range" min=1 max=100 value=1>
      <output for="jim">1</output>
    </div>
    <div>
      <input id="bob" name="bob" type="range" min=23 max=109 value=93 style="width: 40%;">
      <output for="bob">1</output>
    </div>
    <div>
      <input id="sue" name="sue" type="range" min=50 max=250 value=50 step=15 style="width: 60%;">
      <output for="sue">1</output>
    </div>
  </form>	
	
	</div>
	
</body>

</html>
koh5_pano

Drag mouse to navigate.
Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer