We Keep Coding

How change a specific background color in a drop down menu

I'm creating a drop-down menu or list (don't know so much the difference) and I want to make it the way that when someone chooses the content that he wants to see and click on the image, the background of the image change color until he will change the content of the page when he will eventually click to other images to select the content. I will now paste some image here to let you see what i intend. system is the same color as the background
now that the page is showing the content of system the color changed, and even if the user will click on something else inherent to the content, the color will not change
Sincerely I really don't know what code can help me with this, be it CSS or javascript. I do not pretend that you answer me exactly like you were workers and your boss, certainly not, even simple advice on where to direct me would be fine.
{
.system-rectangle{
top: 180px;
left: 0px;
width: 120px;
height: 120px;
background: #405D6C 0% 0% no-repeat padding-box;
opacity: 1;
}
.system-image{
top: 194px;
left: 25px;
width: 70px;
height: 56px;
opacity: 1;
}
.system-text{
top: 260px;
left: 0px;
width: 119px;
height: 26px;
text-align: center;
font: Regular 16px/21px Oswald;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
}
This are the information about the system rectangle background, the image and the text. If you are questioning why the image do not have "background" is because i delete it since it have personal information.

I suppose that you want a html, css and js solution.
You can give the list items an active class and then in css you will be able to give it a different background. With JavaScript you can change the class of the item to active when it is clicked.
HTML:
<nav>
<ul>
<li class="system-rectangle active" onclick="changeActive(this)">System</li>
<li class="system-rectangle" onclick="changeActive(this)">Troubleshooting</li>
<li class="system-rectangle" onclick="changeActive(this)">Other</li>
</ul>
</nav>
CSS:
.system-rectangle{
top: 180px;
left: 0px;
width: 120px;
height: 120px;
background: #405D6C 0% 0% no-repeat padding-box;
opacity: 1;
}
.active{
background-color: lightblue;
}
JS:
function changeActive(elem){
document.getElementsByClassName("active")[0].classList.remove('active');
elem.classList.add('active');
}
This is just an example. This code could be written better, but If you provide your code then it is easier to give an actual example.
You can see the code in action: Codepen

How to make the progress bar with html css javascript

How to make the progress bar Like the image below

I think the easiest way would be to use something like:
css:
.progress
{
position:relative;
width: 100px;
height: 100px;
}
.progressUnder
{
position: absolute;
width: 100%;
height: 100%;
background-image: url('backgroundUnder.jpg');
}
.progressOver
{
position: absolute;
width: 100%;
height: 0%;
background-image: url('backgroundOver.jpg');
}
.progressPercent
{
position:absolute;
top: 40px;
width: 100%;
text-align: center;
}
and html:
<div class='progress'>
<div class='progressUnder'/>
<div class='progressOver' />
<div class='progressPercent'>0%</div>
</div>
and then use javascript to animate the percent height of div.progressOver, as well as the .progressPercent counter.

You need to use a animation I think.
Aswell as The Molecule says. You need to use height for that color. I guess you know how an normal one works. First try to out create a circle, use the height as The Molecule explained, then you need to make the inside of the circle transparent/unneeded. As that is done the heights will be displayed in the circle. That how you do it, never done it myself tho since i dont use custom loading bars.

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.

This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>

Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}

Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}

You could also set the image to display: block and add padding, if it does not mess with your layout.

Color based different when underlying color is different

Currently I am toying with an idea for a website. And I was wondering if this was possible (it only would have to run on modern browsers). Any JS, CSS, canvas, server supported code is good.
The line with the icon on the right is fixed on it's position, when scrolling it stays put. The content blocks (the purple and white) scroll just like anything on a website.
Now when a part of the line and icon is over the purple content bock, the line color should be white, and when it is over a white content block, it should be gray.
Is this possible? If so, how?
edit: Perhaps unclear, when the icon part is for 50% above the purple block and for 50% above the white block, it should be matching the color there correctly too.

It may solve your problem
<div clas="mainDiv">
<div class="greyDiv">
</div>
<div class="purpleDiv"></div>
<div class="contentDiv">
Here the large text .....
</div>
</div>
Css:-
.mainDiv{
height: 500px;
border: 1px solid red;
position: relative;
overflow:auto;
}
.greyDiv{
background: #fff;
color: #ccc;
height: 250px;
}
.purpleDiv{
height: 250px;
background: #956BB3;
color: #FFF;
}
.contentDiv{
height: 500px;
overflow:auto;
position: absolute;
top:0px;
}
Please see :- http://jsfiddle.net/anu1718/DnR7e/

Extjs 4.2.2 - scrollable text behind image in textarea

I'm searching high and low to achieve what has been done in this fiddle:
http://jsfiddle.net/wNTe6/1/
I need the same effect for an Extjs-Textarea.
(background-image seems to be outdated, I used an image-URL of a random-image)
I need a teaxtarea with a (background?-) image (center/middle) and text.
The text should be scrollable, but has to disappear behind the image.
At the very moment, text is scrolling above my background-image (which is understandable).
My textarea (Extjs):
var txtField = Ext.create('Ext.form.field.TextArea', {
name: 'transitionTextArea',
width: transWidth,
height: 100,
border: false,
value: 'Transition Transition Transition Transition Transition Transition',
readOnly: true,
fieldCls: 'transition-style'
});
CSS-Class:
.transition-style {
background-image: url('../images/icons/processControl/transition_160x32.png');
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
border: 0px;
padding-top: 30px;
}
Can anyone please help me?
Any help would be highly appreciated!
-nemesis-

Well, I'll give it a shot, but it's not very elegant.
Here is the Fiddle.
Changes in HTML.
<div class='imgdiv'>
<img src='http://minionslovebananas.com/images/check-in-minion.jpg' width='100' height='120'>
</div>
Changes in CSS.
.imgdiv {
margin: 40px auto;
position: relative;
top: 20%;
left: 5%;
border: 1px solid red;
height: 120px;
width: 100px;
}
Make the outer div with the same height as the scrollable div, but slightly less wide to not cover up the scroll bar. Make its position absolute.
Insert the image in a div and make the div position relative, and you can move it around.
I'll bet someone can give us a nice ELEGANT solution.