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

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 3

Tamur Farrokhnia
Tamur Farrokhnia
25,973 Points
Posted by Tamur Farrokhnia
Tamur Farrokhnia
25,973 Points

Continuous color change with sliders

Hi all,

I'm curious about a bit of functionality in this little drawing app.

In the video, Andrew moves the sliders found in the "new color" tab and the preview of the color changes continuously as he moves the handle.

However, when I do the same thing, the handle moves along the line just fine, but the preview will not actually change color until I release the handle.

Having to click and release each time you want to preview a color is incredibly annoying and inefficient, yet Andrew does not have to do so in the video and I cannot tell why.

From what I can tell, our code is identical and we are both using Google Chrome. What is causing this discrepancy?

-Tamur

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Tamur, what browser are you using?

2 Answers

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

OK...so I've done some research with Dave McFarland on this and have found that Chrome and Safari actually implemented the "change" event wrongly. Chrome has recently updated their browser to work in a "standards" compliant way within the last month. Safari hasn't fixed it yet...

So instead of doing:

$("input[type=range]").change(changeColor)

Which is the equivalent of doing:

$("input[type=range]").on("change", changeColor)

This binds to the onchange JavaScript event you want to use the oninput event trigger. To do this in jQuery it's:

$("input[type=range]").on("input", changeColor)

You learn something new each day!

Here's a discussion on Stack Overflow: http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging

Hope that helps!

Tamur Farrokhnia
Tamur Farrokhnia
25,973 Points
Tamur Farrokhnia
Tamur Farrokhnia
25,973 Points

Thank you very much, Andrew! Big help!

John Romby Andersson
John Romby Andersson
8,453 Points
John Romby Andersson
John Romby Andersson
8,453 Points

Thank you so much Andrew, I was growing insane in trying to find out where I had gone wrong in the code. :)

Drew Butcher
Drew Butcher
33,160 Points
Drew Butcher
Drew Butcher
33,160 Points

Andrew Chalkley, the second "input" is an event and not referring to the input tag? Where can I read more about the event "input"?

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

It's not referring to the tag directly but the input event checkout the MDN on it.

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

Hey Tamur, have you tried commenting out your code and loading in the completed project file to see if the same behavior occurs? Also, there is a known bug in the code if you are using Firefox (although for a different issue).