Changing CSS Element Value With User Input

6 posts by 3 authors in: Forums > CMS Builder
Last Post: July 18, 2012   (RSS)

By gkornbluth - July 18, 2012

Hi All,

I’m trying to let a client pick the background color of a page element using Javascript and I’m stuck.

I modified a bit of code that I found to allow me to set the value of an id but can’t figure out how to apply that id to a css value.

Thanks,

Jerry Kornbluth

Here’s the Javascript:
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('new-color').innerHTML = userInput;
}
</script>
And the input form:
<form>The new color will be: <b id='new-color'></b> <br />
<input type='text' id='userInput' value='Enter Value Here' />
<input type='button' onclick='changeText2()' value='Enter Hex Color and Click'/>
</form>
And here’s the CSS Value I need to change:
#bar {background-color: #new-color here ; }
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Changing CSS Element Value With User Input

By Jason - July 18, 2012

Hi Jerry,

If you're using jQuery on the page, you can try this:

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

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Changing CSS Element Value With User Input

By gkornbluth - July 18, 2012

Thanks Jason,

You're the best!

I tried a number of ways to automatically add a # before the 6 digit hex value and couldn't get it to work.

any pointers?

Jerry Kornbluth
The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Re: [gkornbluth] Changing CSS Element Value With User Input

By Jason - July 18, 2012

Hi Jerry,

Give this a try:

$('#bar').css('background-color', "#" + $('#userInput').val());

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [gkornbluth] Changing CSS Element Value With User Input

By Toledoh - July 18, 2012

Hey Jerry,

I've also created the css as a php file, and used CMSB to populate content directly into the CSS file... works a treat!
Cheers,

Tim (toledoh.com.au)