Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

example of circular slider

By: a guest on Aug 4th, 2010  |  syntax: HTML  |  size: 1.60 KB  |  views: 1,270  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <body>
  4. <style type="text/css">
  5.     #container { position:absolute; top:200px; left:200px; width:400px; height:400px; background:#ddd; border:1px solid #999; }
  6.     #slider { position:relative; height:40px; width:40px; background:red; left:180px; top:-20px; }
  7. </style>
  8.  
  9. <div id='container'> <div id='slider'> </div> </div>
  10.  
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
  12. <script type="text/javascript">
  13.     (function () {
  14.         var radius = 200;
  15.         var mdown = false;
  16.         var parentOffset = $('#container').offset();
  17.         $('#container')
  18.         .mousedown(function (e) { mdown = true; })
  19.         .mouseup(function (e) { mdown = false; })
  20.         .mousemove(function (e) {
  21.             if (mdown) {
  22.                 var center = { x: parentOffset.left + 200, y: parentOffset.top + 200 };
  23.                 var mouse = { x : e.clientX, y : e.clientY };
  24.                 var dx = mouse.x - center.x;
  25.                 var dy = mouse.y - center.y;
  26.                 var scale = radius / Math.sqrt(dx * dx + dy * dy);
  27.                 var slider = { x : dx * scale + center.x, y : dy * scale + center.y
  28.                 };
  29.                 $('#slider').css({
  30.                     left: -20 - parentOffset.left + slider.x + "px",
  31.                     top: -20 - parentOffset.top + slider.y + "px"
  32.                 });
  33.             }
  34.         });
  35.     })();
  36. </script>
  37. </body>
  38. </html>
clone this paste RAW Paste Data