Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery slide plot line on canvas

    I want to use a slider to get a value for variable 'slideval' then use it to plot a line on a HTML canvas.

    The value doesn't seem to be passing.

    I have never done anything with HTML5 or javascript before, I am open to suggestions what I have done so far is smashed together a few online tutorials.

    Here is what I have got so far.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Slider - Snap to increments</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <script>
      
       var slideval; 
       
       $(function() {
        $( "#slider" ).slider({
          value:100,
          min: 0,
          max: 500,
          step: 50,
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
          }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
      slideval =$( "#slider" ).slider( "value" );
      });
      </script>
    </head>
    <body>
     
    <p>
      <label for="amount">Donation amount ($50 increments):</label>
      <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
    </p>
     
    <div id="slider"></div>
    <br>
    <canvas id="myCanvas" width="300" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    
    <script>
    
    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(100,50);
    ctx.lineTo(300,100);
    
    ctx.moveTo(100,50);
    ctx.lineTo(300,0);
    
    ctx.moveTo(slideval,50);
    ctx.lineTo(slideval,0);
    
    ctx.stroke();
    
    
    
    
    </script>
    
    </body>
    </html>
    Last edited by vinyl-junkie; 07-07-2013 at 03:58 PM. Reason: added code tags

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,775
    Thanks
    55
    Thanked 519 Times in 516 Posts
    I'm pretty sure that this is not what you are trying to do, but at least it's a start - you basically have to update the ctx and draw the line every time the slider moves...
    Code:
    <script>
    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(100,50);
    ctx.lineTo(300,100);
    
    ctx.moveTo(100,50);
    ctx.lineTo(300,0);
    
    ctx.stroke();
    
       
       $(function() {
        $( "#slider" ).slider({
          value:100,
          min: 0,
          max: 500,
          step: 50,
          slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
    		ctx.moveTo(ui.value,50);
    		ctx.lineTo(ui.value,0);
    		ctx.stroke();
          }
        });
        $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
      });
    
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •