Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>
          // Load jQuery
          google.load("jquery", "1");
          google.load("jqueryui", "1");
        
        </script>
        <link rel="stylesheet" href="http://static.jquery.com/ui/themes/base/ui.base.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://jqueryui.com/themeroller/css/parseTheme.css.php?ctl=themeroller" type="text/css" media="screen" />
    </head>
    <body>
        <div><a href="" onclick="play(); return false;">play/pause</a></div>
        <div id="slider"></div>
        
        <div id="frame" style="width: 95%;">
            <div id="box" style="width: 25px; height: 25px; background-color: red; position: absolute; top: 75px; left: 0;"></div>
        </div>
        
        <script type="text/javascript">
            var playing = false;
            var interval;
            var i = 0;
            
            $(function() {
                    $('#slider').slider({min: 0, max: 100});
                    $('#slider').bind('slide', function(e, ui) { i = ui.value; a(ui.value);}).bind('slidechange', function(e, ui) { a(ui.value);});
            
            });
            
            function a(p) {
             $('#box').css('left', p + "%");
            }
            
            function play() {
              if(playing) {
                    playing = false;
                    clearInterval(interval);
                } else {
                    i = $('#slider').slider('value');
                    playing = true;
                  interval = setInterval(step, 100);
                }
            }
            
            function step() {
              i = i + 2;
                $('#slider').slider('value', i);
            }
        </script>
    </body>
</html>
​
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers