The CMSB Cookbook

HELPING CLIENT'S PICK CSS PROPERTY VALUES - Dec 29th, 2018


I needed to allow my client to pick the background color of a div with the id "bar".

With a bit of help from Jason Sauchuk from Interactive Tools I came up with this:

The basic script to display the user's input was:

<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('new-text').innerHTML = userInput;
}
</script>

And the basic input form:

<form>The text you entered is <b id='new-text'></b>
<input type='text' id='userInput' value='Enter Value Here' />
<input type='button' onclick='changeText2()' value='Enter new text and Click'/></form>

And here’s the CSS Value I needed to change:

#bar {background-color: #new hex color value here ;
more css;
more css;
}

First I removed the property background-color: #new-color here ; from the CSS

Then I changed the script code to:

<script type="text/javascript">
function changeText2(){
$('#bar').css('background-color', $('#userInput').val());
}
</script>

And the input form to:

<form>Change The Header Color <b id='new-color'></b>
<input type='text' id='userInput' value='Enter Value Here' />
<input type='button' onclick='changeText2()' value='Enter # plus 6 digit Hex Color and Click'/></form>

Hex color values are always preceded by a #. If you don't want to have to add the # manually before the 6 digits each
time, you can use:

<script type="text/javascript">
function changeText2(){
$('#bar').css('background-color', "#" + $('#userInput').val());
}
</script>

If you're actually using this for choosing colors, you can add this simple on-line color picker URL to the form

http://www.colorpicker.com/

The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.