SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    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?

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jeanpaul1979 View Post
    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?
    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">&nbsp;</div><input id="input1" type='text'onkeyup="setBg(this.value,'input1_swatch')"/><br /><br />
    <div id="input2_swatch">&nbsp;</div><input id="input2" type='text' onkeyup="setBg(this.value,'input2_swatch')"/>
    </form>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Zealot
    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?

  4. #4
    SitePoint Zealot
    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

  5. #5
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Last problem .. you are passing 'input1_swatch' in both cases.
    Code:
    <div id="input1_swatch">&nbsp;</div><input id="input1" onkeyup="setBg(this.value,'input1_swatch')" /><br /><br />
    <div id="input2_swatch">&nbsp;</div><input id="input2" onkeyup="setBg(this.value,'input2_swatch')" />
    Ian Anderson
    www.siteguru.co.uk

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jeanpaul1979 View Post
    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?
    The way I've done this previously is with a periodic monitoring algorithm, that scans fields for changes and acts accordingly.
    Tab-indentation is a crime against humanity.

  7. #7
    SitePoint Zealot
    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.

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jeanpaul1979 View Post
    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.
    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.
    Looks like a problem related to the effect of doctype on offsetHeight. The original author should have a fix for that.
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Zealot
    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?

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jeanpaul1979 View Post
    About having a periodic monitoring algorithm that fires every .5 second, i assume that client side performance suffering is negligible?
    I doubt it unless you've got something seriously intensive going on. Mine just compares two strings and takes no action unless they differ.
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •