I want to change the background color of div when a user picks the particular color in the color picker. For example If user selects red from the color picker then the background should change into red. The important point here is we shouldn't use jquery to change this. Instead of using jquery,(can use javascript) the css styles of that particular div should be added to the div when user selects particular color.
<div class="sideBar">
<ul>
<li> content 1 </li>
<li> content 2 </li>
<li> content 3 </li>
<li> content 4 </li>
</ul>
</div>
<div class="mainBar">
<form>
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
</form>
</div>
css :
@charset "utf-8";
/* CSS Document */
.sideBar
{
width: 300px;
float: left;
height: 500px;
background: blue;
}
.mainBar
{
width: 100% ;
height: 500px;
background: #96F ;
}
thanks in advance..
I want to change the background color of div when a user picks the particular color in the color picker. For example If user selects red from the color picker then the background should change into red. The important point here is we shouldn't use jquery to change this. Instead of using jquery,(can use javascript) the css styles of that particular div should be added to the div when user selects particular color.
<div class="sideBar">
<ul>
<li> content 1 </li>
<li> content 2 </li>
<li> content 3 </li>
<li> content 4 </li>
</ul>
</div>
<div class="mainBar">
<form>
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
</form>
</div>
css :
@charset "utf-8";
/* CSS Document */
.sideBar
{
width: 300px;
float: left;
height: 500px;
background: blue;
}
.mainBar
{
width: 100% ;
height: 500px;
background: #96F ;
}
thanks in advance..
Share Improve this question edited Jul 7, 2014 at 13:06 arjun asked Jul 7, 2014 at 13:00 arjunarjun 5601 gold badge9 silver badges27 bronze badges 3-
Without javascript you would have to write your own
PHPlogic that happes after a form submit. – Sebsemillia Commented Jul 7, 2014 at 13:03 - 1 No javascript at all? or just no jquery? – rob Commented Jul 7, 2014 at 13:03
- @rob w can use javascript... how to achieve this ???? – arjun Commented Jul 7, 2014 at 13:07
2 Answers
Reset to default 10You will need Javascript to do this properly.
Here is an example: http://jsfiddle/XZ6Sg/
HTML:
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
<div></div>
Javascript:
var picker = document.getElementById('colorPicker');
var box = document.getElementsByTagName('div')[0];
picker.addEventListener('change', function(){
box.style.backgroundColor = this.value;
})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Color Dynamic</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="sideBar">
<ul>
<li> content 1 </li>
<li> content 2 </li>
<li> content 3 </li>
<li> content 4 </li>
</ul>
</div>
<div class="mainBar">
<input type="color" name="colorPicker" id="colorPicker" title="Choose Color" />
</div>
<script type="text/javascript" src="http://code.jquery./jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var colorPick = $('#colorPicker');
var styleElt = '<style></style>';
colorPick.on('change', function(){
console.log($(this).val());
var selectedVal = $(this).val();
$('head').html('<style>.sideBar{background-color:'+ selectedVal +'}</style>');
});
</script>
</body>
</html>