We Keep Coding

Javascript color slider

I am trying to implement a color picker like the one shown in the image below,
in the first one, you can select a color and in the second one, you can select the range for that color anywhere between white and black.
Any ideas on how to implement this?

This was too big for comment.
Maybe something like this can help:
virtuosoft
jscolor
jsfiddle
daviddurman

How do you change the background color of an html table entry background when something specific happens?

I'm making an html table and I need the background of certain boxes to change color that after a selenium webdriver runs. For example if the webdriver runs through the site with no errors it would change the box in the table for that app green or if there were errors change the box color to red. I know I would need java script for this but I have never used it before.

You can use the JavaScript property document.body.style.background.
Here is an example :
function changeBackground(color) {
document.body.style.background = color;
}
Check here for more information : How do I change the background color with JavaScript?
To change the background color of an box when the user press enter key for instance, click : Changing background color of text box input not working when empty.
Indeed, you will need to adapt with your own element.

Make my own custom timeline for a website

I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!

Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.

I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

Is there a way to change the slider colour in an embedded YouTube video?

Specifically, I'd like to change the progress bar to blue.

They don't give you the option? I don't like 'don't' <--- A great bit of irony.
P.S. I Answered on this question as it's top on Google Search with this specific question.
I use this to change the colour of the progress bar with simple hands down CSS...
.ytp-play-progress {
color: blue;
}

Nope! Unfortunately, they just don't let you do that.

http://apiblog.youtube.com/2011/08/coming-soon-dark-player-for-embeds.html
You can change the color to white or red. That's all.