SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Location
    KL
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Unable to implement brush slider for canvas

    I have a canvas that user can draw but I'm having difficulty to change the size of the brush by using this slider.

    Code:
    <label for="brush">Brush Size:</label><input name="brush" id="brush_size" type="range" value="5"  min="0" max="100" />
    Code:
    function sketchit(e) {
            context.beginPath()
            context.moveTo(mouseX, mouseY);
            context.lineTo(mouseX,mouseY)
            context.lineCap = 'round';
            context.lineWidth = document.getElementById('brush_size').value;
            context.strokeStyle = document.getElementById('color').value;
            context.stroke();
            MouseIsDown = true;
        };
    
    $('#brush_size').change(function(e){
    	var slider = document.getElementById('brush_size');
    	context.lineWidth = $(this).val() + "px";
    	)};
    What am I doing wrong? Thanks in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jigalong,

    Welcome to the forums

    Your code looks ok at first glance.

    Could you post a link to a page where I can see this in action?

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Location
    KL
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jigalong,

    Welcome to the forums

    Your code looks ok at first glance.

    Could you post a link to a page where I can see this in action?
    Thanks Pullo! =)
    Guess what? I got them working now. lol. But facing a new problem now. Do you know how to make a photo appear when I hover over an element or certain text? Should I use CSS or Javascript? Can I use bind?
    Thanks! =)

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by jigalong View Post
    Do you know how to make a photo appear when I hover over an element or certain text? Should I use CSS or Javascript? Can I use bind?
    Sure do!
    You can do this with either pure CSS, plain JavaScript or using the jQuery library (for a bit of snazz).

    I've made you a demo page showing you the three different options.
    Notice that when using JavaScript, you can ensure that the photo doesn't vanish straight away when the user mouses away from whatever element caused the photo to be shown in the first place.
    Also, using jQuery, it is a piece of cake to add animation effects.

    HTH

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <!-- http://www.sitepoint.com/forums/showthread.php?1027026-Unable-to-implement-brush-slider-for-canvas -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Demonstrating different ways of fading in an image</title>
        <style>
          #photoContainer{ width:100px; }
          #photoContainer:hover #pic1{ display:block; }
          #pic1, #pic2, #pic3{
            display:none;
            position:absolute;
            top:15px;
            left:150px;
          }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <div id="photoContainer">
          <p><a href="#" id="css">The CSS way</a></p>
          <img src="http://ri0lugamer.webs.com/photos/LOLcats/lolcats.jpg" id="pic1">
          <img src="http://www.teamaffinity.org/SRC/C/Lolcats35.jpg" id="pic2">
          <img src="http://nathanmassengill.com/nam2/wp-content/uploads/2011/04/lolcat_moderaterz.jpg" id="pic3">
        </div>
        
        <p><a href="#" id="js">The JavaScript way</a></p>
        <p><a href="#" id="jquery">The jQuery way</a></p>
      
        <script>
          var link1 = document.getElementById("js");
          var pic = document.getElementById("pic2");
          
          link1.onmouseover = function(){
            pic.style.display = "block";
          }
          link1.onmouseout = function(){
            window.setTimeout(function(){pic.style.display = "none";}, 400);
          }
          
          $('#jquery').mouseover(function() {
            $('#pic3').fadeIn("slow");
          });
          
          $('#jquery').mouseleave(function() {
            $('#pic3').fadeOut("slow");
          });
        </script>
      </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Location
    KL
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, you don't know how much this has helped! Thank you so much! Also, great job on the kitteh images. Made my afternoon. =)
    Just one small part that I don't really get. Why is the display below is set to block? What happens if it's not block. I mean, what other choices are there?
    #photoContainer:hover #pic1{ display:block; }
    Oh yea. Also, I tried removing this part
    #photoContainer{ width:100px; }
    and I couldn't see any difference. What's the reason to use it? Thanks, Pullo. =)

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by jigalong View Post
    Why is the display below is set to block? What happens if it's not block. I mean, what other choices are there?
    As the display is originally set to none, you need to give it some other value for it to appear.
    You can find a list of the possibilities here: display (CSS property)

    Quote Originally Posted by jigalong View Post
    Oh yea. Also, I tried removing this part and I couldn't see any difference. What's the reason to use it? Thanks, Pullo. =)
    Sorry, that was there from a previous iteration (where the picture appeared on the right of the links).
    You can remove it.

  7. #7
    SitePoint Member
    Join Date
    Apr 2013
    Location
    KL
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Noted. Thanks, Pullo! Have a great day!


Tags for this Thread

Bookmarks

Posting Permissions

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