Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Drew Butcher
33,160 Pointsautomatic color update with change vs. color update after mouse click
In the video http://teamtreehouse.com/library/jquery-basics/creating-a-simple-drawing-application/perform-part-2 at min 8:30. When Andrew Chalkley moves the sliders around his color automatically updates; however, on my computer the update open happens when I let up on the mouse pad. Can anyone please explain why?
4 Answers
Andrew Shook
31,709 PointsDrew I believe Andrew Chalkley might have already answered your question here. Hope this helps.
Andrew McCormick
17,730 Pointsgood find Andrew
Andrew Shook
31,709 PointsNot really, I subscribed to the post when It first popped and was like, "I do believe I've seen this question before."
Jason Anello
Courses Plus Student 94,610 PointsOh, I wish I knew about that before typing my answer. Not a complete waste though. I think there's a little extra info in my answer for anyone interested.
Jason Anello
Courses Plus Student 94,610 PointsHi Drew,
I think that Andrew is using chrome in the video correct?
The "change" event is only supposed to fire once when a user is finished interacting with an element. For some elements like an input box, it would be when the element loses focus. For others like a range input, it is when you have committed the value by releasing your mouse button.
So the "change" event is actually exhibiting incorrect behavior in the video. It isn't supposed to fire repeatedly.
I had a hard time tracking this down and this may not be the whole story but it seems there was period of time from around chrome version 18 up to some version before what we are currently on where chrome had a bug with the "change" event. It would fire repeatedly on input change rather than once at the end.
My guess is that at the time this video was recorded it was still a bug and it appeared to work correctly for Andrew's version of chrome at that time.
Now it appears to be fixed in chrome and the "change" event works the way it is supposed to. According to Andrew McCormick it looks like IE may still be getting it wrong.
The "input" event is what is supposed to fire repeatedly when an input value is changed. So I think that is the correct event to use in this project because it will continually fire as you're dragging around the slider because you're continually changing the input value.
//$("input[type=range]").change(changeColor);
$("input[type=range]").on("input", changeColor);
This seems to work properly in both firefox and chrome. Haven't tested in IE. I seem to remember reading that IE10 didn't support this event. So you may have to consider combining both events to get it to work reliably across the major browsers.
Drew Butcher
33,160 PointsThank you, this works; however, it looks like you called .on() without an event. How does the browser know what actions is supposed to trigger the function. I looked up .on() without an event and found that you should have an event: http://stackoverflow.com/questions/13072319/how-to-call-a-jquery-function-with-no-event
Jason Anello
Courses Plus Student 94,610 PointsThe first argument to .on() is the event or events. So that's "input" in this case. Perhaps you confused that with the <input> element?
I'm using the 1st version here: http://api.jquery.com/on/
.on( events [, selector ] [, data ], handler ) where I've passed in an event and a handler but have omitted the optional arguments selector and data
As I mentioned in my answer, this code might not work in IE. Have you been able to test?
I can check IE8 and 9 later when I have more time. It would be great if anyone can check IE10 and 11.
If the "onInput" event is unsupported in IE then we might have to use both events.
Like this:
$("input[type=range]").on("input change", changeColor);
Drew Butcher
33,160 PointsI downloaded the files and clicked on the index.html file. So the code is your code. In other words I didn't change anything... here is a link to the files I am discussing: http://treehouse-code-samples.s3.amazonaws.com/jQueryBasics/simple_drawing_complete.zip
Andrew McCormick
17,730 Pointsmust be browser compatibility. For me it worked as you describe in Chrome and Firefox. However in IE it worked like it does in the video.
Drew Butcher
33,160 PointsThis is an unusual change of events! How can one make Chrome and Firefox work as IE does?
Drew Butcher
33,160 Pointsapparently, input is an event and not referring to the input tag? Where can I read more about the event "input"?
Jason Anello
Courses Plus Student 94,610 PointsYes, it's the event and not the tag.
4.10.5.5 Common event behaviors has some explanation for what the expected behavior should be for the "input" and "change" events.
There's this mdn page for the input event https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input which has a browser compatibility table.
It looks like IE9+ supports it so I think $("input[type=range]").on("input", changeColor); will work on all the current browsers.
Andrew McCormick
17,730 PointsAndrew McCormick
17,730 PointsDrew, please post your code so we can help.
How to post code to fourm