SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Apr 22, 2007, 12:43 #1
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
How to have a div take on the value of a form field?
Hi, i have a form with several input fields (color codes) that are linked to accompanying div boxes (color swatches).
I have put an example of the script here http://startbron.nl/colorpicker/sample.html. I have also uploaded the entire script here http://www.startbron.nl/colorpicker.rar
The swatches in the example are supposed to render the color that is in the accompanying input field.
How can i do this?
-
Apr 22, 2007, 15:36 #2
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I assume that one is supposed to enter six hex digits. If so it need be no more complicated than this:
Code:<script type="text/javascript"> function setBg(cString, elemId) { if( (cString=cString.replace(/\s+/g,'')).match(/^#?[a-f0-9]{6}$/i) ) { if(cString.charAt(0)!='#') cString='#'+cString; document.getElementById( elemId ).style.backgroundColor=cString; } } </script> </head> <body> Enter colour values as six hex digits preceded optionally by #.<br /><br /> <form> <div id="input1_swatch"> </div><input id="input1" type='text'onkeyup="setBg(this.value,'input1_swatch')"/><br /><br /> <div id="input2_swatch"> </div><input id="input2" type='text' onkeyup="setBg(this.value,'input2_swatch')"/> </form>
Tab-indentation is a crime against humanity.
-
Apr 23, 2007, 03:03 #3
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Thanks! That was very helpfull. I'm now trying to figure out how to create the same behavior when the color code is pasted instead of typed.
Any suggestions?
-
Apr 23, 2007, 05:45 #4
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
I have run across another problem.
When i use the script in combination with a doctype (wich my site requires for the centering of div boxes) the color picker always shows up below the last input field instead of below it's accompanying field.
I don't feel confident i can tackle this issue with my currently still limited knowledge of javascript, though i am trying.
Help is welcome and very much appreciated.
I have updated both samples with the new code. http://startbron.nl/colorpicker/sample.html & http://www.startbron.nl/colorpicker.rar
-
Apr 23, 2007, 06:13 #5
- Join Date
- Oct 2002
- Location
- Scotland
- Posts
- 3,631
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
Last problem .. you are passing 'input1_swatch' in both cases.
Code:<div id="input1_swatch"> </div><input id="input1" onkeyup="setBg(this.value,'input1_swatch')" /><br /><br /> <div id="input2_swatch"> </div><input id="input2" onkeyup="setBg(this.value,'input2_swatch')" />
-
Apr 23, 2007, 08:57 #6
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Apr 23, 2007, 10:45 #7
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
You mean a script that is triggerd every x seconds and then updates all swatches? I could see that work, but the user that pastes the color code won't get direct feedback so it can work a bit confusing.
It's a minor thing though, i can live without. I'm more concerned about getting the script to work in documents with a doctype.
-
Apr 23, 2007, 18:04 #8
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Not if it's done every half second.
It's a minor thing though, i can live without. I'm more concerned about getting the script to work in documents with a doctype.Tab-indentation is a crime against humanity.
-
Apr 24, 2007, 11:47 #9
- Join Date
- Jan 2007
- Posts
- 130
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
You are right, i emailed the author and he told me to change this line
cp.ColorPicker.style.left = inpPos.x;
267 cp.ColorPicker.style.top = inpPos.y+parseInt (cp.cpInput.offsetHeight);
to:
cp.ColorPicker.style.left = inpPos.x+'px';
cp.ColorPicker.style.top = (inpPos.y+parseInt(cp.cpInput.offsetHeight))+'px';
Works with a doctype definition now
About having a periodic monitoring algorithm that fires every .5 second, i assume that client side preformance suffering is negligible?
-
Apr 24, 2007, 16:46 #10
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks