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
Kevin Murphy
24,380 PointsjQuery - Drawing App - Getting the Color Selector Working
I don't understand how the default color of the span (preview area showing the color) is black when the color selector is opened. It seems to me from the code that the color would be whatever the sliders are left at. Yet when the color selector is opened in Andrew's example the sliders are all at 0 and the preview area shows black.
I thought that Andrew may have manually moved the sliders to all be at 0 earlier - and he does momentarily - but then moves the red and green sliders to a non-zero location before moving on in the video.
Any thoughts?
var color = $(".selected").css("background-color");
//When clicking on control - list items
$(".controls li").click(function(){
//Deselect sibling elements
$(this).siblings().removeClass("selected");
//Select clicked element
$(this).addClass("selected");
color = $(this).css("background-color");
});
//When new color is pressed
$("#revealColorSelect").click(function(){
changeColor();
$("#colorSelect").toggle();
});
//create a method called change color -- want a black default (?) preview window and have it adjust when color sliders change
function changeColor() {
var r = $("#red").val();
var g = $("#green").val();
var b = $("#blue").val();
$("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}
//When color sliders change
$("input[type=range]").change(changeColor);
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Kevin,
I realize this is old so I'm not sure if it's still an issue for you.
Towards the end of the video, Andrew opens the page in a new tab which would cause the sliders to start at zero and the color panel starts off closed.
He doesn't go back to the tab where he left the red and green sliders at a non-zero value around the 3:30 mark. You can still see that tab up there though. He instead loads a completely new page That's what it looks like at least.
I think that your understanding of the code is correct. The sliders will stay at what you leave them at. However, they will start at zero when the page loads for the first time or if you do a hard refresh on the existing page. This will clear the input fields.
Or are you saying that the sliders do not default to zero for you even when the page is first loaded?
Kevin Murphy
24,380 PointsHi Jason,
Thank you for the close examination of this potential issue and explanation. Finally getting to circle back to this - not certain - but I thought that even when I reloaded the page the sliders would still remain at where they were left. I will do some experiments today and report back!
Jason Anello
Courses Plus Student 94,610 PointsHI Kevin,
I think that if you click the refresh button in your browser then it will reload the page and the color panel will be closed but the sliders will remain where they are.
It takes a hard refresh to reset the sliders back to 0. At least on firefox/windows if I press ctrl + F5 it will do a hard refresh and clear form elements.
So I think the expected behavior is that when you are loading the page for the first time or if you do a hard refresh then the color panel will start off closed and the sliders will be at 0.
If you close the panel and reopen it or do a normal refresh then the sliders would stay where you last left them.
Andrew Chalkley
Treehouse Guest TeacherIt could be that FF defaults it to some other value VS webkit browsers like Chrome or Safari does it differently...
Saying that...
<input id="blue" name="blue" type="range" min=0 max=255 value=0>
The default value should be 0!
Andrew Chalkley
Treehouse Guest TeacherActually it is black in my FF...
Kevin Murphy
24,380 PointsThanks Andrew, finally getting to circle back to this... Given your comments above I will take a look at my code again and try the project code in another browser and FF again...
Kevin Murphy
24,380 PointsKevin Murphy
24,380 Pointsi just commented out my code for these 2 stages and applied the completed project code for the same two stages. The sliders do not default to zero (black) on the project files either. Interesting, but a bit confusing if expecting (what seems to be) a default of black as shown in the video. If anyone has any theories or an explanation would be great.