SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "document.forms[0].rgb.style.background='document.forms[0].rgb.value'"

    Well,

    I've something like this that's working.

    Code JavaScript:
    onclick="showColorPicker(this,document.forms[0].rgb);"

    On click, this sends a value to a text field named rgb. The value is that of a color, like #FF0000

    What I want, along with sending the color name, it also changes the background color of the text field. Like if it sends the value #FF0000 to my text field, the background color of the text field becomes #FF0000 (other thigns remain same, like it will still send the value #FF0000 as text to the text field).

    I tried this =>

    Code JavaScript:
    onclick="showColorPicker(this,document.forms[0].rgb); document.forms[0].rgb.style.background='document.forms[0].rgb.value'"

    but this is not working.

    FF gives no error message whereas IE tells "Argument non valid"

    Any help here? Thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It should be backgroundColor, not background. It would be a good idea to integrate that into the showColorPicker function instead of putting it inline in the HTML. In fact, you could probably make the whole thing function just by doing onclick="showColorPicker(this)".

  3. #3
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles.

    I changed that to
    Code JavaScript:
     onclick="showColorPicker(this,document.forms[0].rgb); document.forms[0].rgb.style.backgroundColor='document.forms[0].rgb.value'">
    but still i'm having the same error.

    About the showColorPicker funnction, well, I'm using an opensource color picker here from dhtmlgoodies and that's a 600 line long code ... beyond my js knowledge to mess with that ...

    problem with the code is that once user has chosen a color, he see only the color code, and not very user friendly as few people can know by heart which color code stands for which color. I was thinking to change this so that people can see which color they have choosen, when they chooses a color.

    A better solution could be to do something onchange, as there are people who can change the code manually.

  4. #4
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    `background` is a CSS shorthand and it should be valid.

    document.forms[0].rgb.style.backgroundColor='document.forms[0].rgb.value'

    Try removing these quotes.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Doh. It's not working because you have quotes ( ' ' ) around document.forms[0].rgb.value. Get rid of those and it ought to work.
    Edit:

    ^ yeah.

  6. #6
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, thanks a lot. It's working by removing the quotes. However, still a little thing.

    It is changing the color on second click, and not the first click. Means, on the first click I get a color picker, I choose a color, the color picker gets closed. Next, when I click there a second time, I get the color that I selected before. Hmmm ... probably i need a different even handler here ...

  7. #7
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this ... any idea why this is not working ?

    Code:
    <input type="text" value="<?=$rgb?>" maxlength="7" name="rgb" size="10" disabled onChange="document.forms[0].rgb.style.backgroundColor=document.forms[0].rgb.value">
    This could solve the issue, as color is getting changed as its value, thro' the other function.

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I tested this and it works OK:
    HTML Code:
    <input type="text" value="#FF0000" maxlength="7" name="rgb" size="10" onkeyup="if (this.value.length==7) {this.style.backgroundColor=this.value}">
    I took the "disabled" attribute off though.

  9. #9
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Raffles, that's working perfectly. Yes, I've also removed the disabled attribute as that was creating problem while sending POST data.

    Thanks a lot.

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps the readonly attribute would be helpful.

    The disabled attribute prevents a form control's name/value pair from being included in the data submitted through a form.

    It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kravvitz

    Thanks for the links and your suggestions. I'll have a look at them now.

    Best.


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
  •