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
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 ; }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
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
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
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
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: [Jason] Changing CSS Element Value With User Input
By gkornbluth - July 18, 2012
I did try it and it worked (of course).
Thanks again,
Jerry Kornbluth
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 Toledoh - July 18, 2012
I've also created the css as a php file, and used CMSB to populate content directly into the CSS file... works a treat!
Tim (toledoh.com.au)