My color selector.

Discussion in 'Javascript' started by Guest, Nov 1, 2004.

  1. Guest

    Guest Guest

    Just about finished with an include modual that allows a user to select
    a color. Completely dynamic. all you have to do is include the script and
    run the main trigger script.

    One problem with the event modual is the fact that it resets events for all
    TD's. not sure how to specify to cascade down through just the created
    table. Any ideas?

    Feel free to use this where ever you wish as long as you give me credit.
    this was a few weeks of work to tweek correctly. Hopefully this makes up for
    my poor menu from earlier. lol!

    URL: http://www.shadowdruid.com/colors.html

    Matthew Hagston
    Guest, Nov 1, 2004
    #1
    1. Advertising

  2. Guest

    Guest Guest

    Ok, found the event problem and fixed / uploaded it. Still want to know
    what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue
    with opera (of course). where it's not displaying the second "fine" selector
    table. Bleh, always Opera.

    -Matthew Hagston

    <> wrote in message
    news:Tzhhd.2703$931.803@lakeread01...
    > Just about finished with an include modual that allows a user to select
    > a color. Completely dynamic. all you have to do is include the script and
    > run the main trigger script.
    >
    > One problem with the event modual is the fact that it resets events for
    > all TD's. not sure how to specify to cascade down through just the created
    > table. Any ideas?
    >
    > Feel free to use this where ever you wish as long as you give me credit.
    > this was a few weeks of work to tweek correctly. Hopefully this makes up
    > for my poor menu from earlier. lol!
    >
    > URL: http://www.shadowdruid.com/colors.html
    >
    > Matthew Hagston
    >
    >
    Guest, Nov 1, 2004
    #2
    1. Advertising

  3. Guest

    Randy Webb Guest

    wrote:
    > Ok, found the event problem and fixed / uploaded it. Still want to know
    > what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue
    > with opera (of course). where it's not displaying the second "fine" selector
    > table. Bleh, always Opera.


    Move the div below the table, or, off to the side. It causes the page to
    jump when the GO button is clicked.

    Instead of the repeated lookups of the bgcolor, use a variable to hold
    it and then use the variable. Its a very minor issue in that script but
    as scripts get larger, it can become important.


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Randy Webb, Nov 1, 2004
    #3
  4. Guest

    Fred Oz Guest

    wrote:
    > Ok, found the event problem and fixed / uploaded it. Still want to know
    > what you all think. Works in IE, NS7.2, and FireFox 0.9.3. Having an issue
    > with opera (of course). where it's not displaying the second "fine" selector
    > table. Bleh, always Opera.

    [...]

    You still have an issue with Safari too - I'm not sure what it is, I'll
    let you know if I find out.

    Fred.
    Fred Oz, Nov 1, 2004
    #4
  5. Guest

    rf Guest

    wrote:

    > URL: http://www.shadowdruid.com/colors.html


    It seems a little, er, broken.

    I select a nice shade of yellow on the left. The right bit changes (rightly)
    to a luminance scale in that colour. When I click on the right I get a
    colour. When I click on the right again, the right actually changes colour.

    I expected it to remain the same but just give me different colours out of
    the luminance scale with different click selections.

    After several clicks all colour is gone, I am left with a greyscale.

    Ah, I know... clicking on the right side causes another colour pick, which
    rebulds the right, like this: click on a colour on the left. Click on the
    right, either at the top or the bottom. Right changes.

    --
    Cheers
    Richard.
    rf, Nov 1, 2004
    #5
  6. Guest

    Fred Oz Guest

    Matthew Hagston wrote:
    > Would be appriciated if ya get it working in Safari too. I don't have a

    [...]

    Hey, I solved the Safari issue and can offer a couple of
    significant enhancements to reduce processor effort.

    *The Safari Issue:*

    When you create an empty TD in safari and attach a mouseover event,
    the area over which you must hover is about 1px high and as wide as the
    cell. It seems to be aligned about where the baseline for text would
    be. If you put text into the cell, whenever you are over the text then
    the TD onmouseover function will not work, so the area that reacts to
    the onmouseover is reduced even further.

    One issue I can't fix is that when putting the colour into the showClr
    cell, I can't get it to reliably fill the cell when clicking on the
    table, but when I click the "Go" button it works fine or if I do
    anything to cause the window to re-draw - resize window but not scroll.

    To make the onmouseover area inside a TD be the entire cell height,
    put a div inside the cell the same size as the cell. I couldn't get
    bgColor to work on the div, so I left it to color the cell, the result
    is the same (a coloured in cell). The relevant part of your code
    becomes something like:

    oTd = document.createElement("TD");
    oTd.width = "4px";
    oTd.height = "4px";
    oTd.bgColor = "#"+ tmpar1[y];
    oTd.border = "0px";
    oTd.padding = "0px";
    oDiv = document.createElement("DIV");
    oDiv.style.width = "4px";
    oDiv.style.height = "4px";
    oDiv.id = tmpar1[y];
    oTd.appendChild(oDiv);
    oTr.appendChild(oTd);

    Note you must use .style with the width and height, but not with the
    TD (maybe someone else can answer that one). Also, the id gets put
    onto the DIV so you can get the rgb (id) value from that, not the
    bgColor.

    You must attach the onmouseover to the DIV (the firstChild of the td):

    x.firstChild.onmouseover = color_over;
    x.firstChild.onmouseout = color_out;
    x.firstChild.onclick = ChangeColorSelect;

    Of course, all that may be too much effort...

    One significant optimisation I can offer is in the way you get the id
    of the cell for the onmouseover, onmouseout and onclick events:

    e.g.

    function color_over(e) {
    targid = (ie)?window.event.toElement.id:e.target.id;
    clr = document.getElementById(targid).bgColor;
    clr = clr.substr(1);
    document.getElementById('colorsel').value = clr;
    }

    *Enhancement 1*
    Can be signficantly enhanced by creating a global variable that refers
    to 'colorsel', then you only have to get a reference for it once and do
    not need to do getElementById every time the mouse enters a cell (an
    increadible waste of processor power).

    *Enhancement 2*
    Probably greater enhancement is to change the way you use the reference
    to the cell (e.target) to get the id, just so you can use
    getElementById to get the reference to the cell that you already had!!

    So do this:

    // Just after calling InitColorPalette();
    // create a global ref to the colorsel text box

    colorSel = document.getElementById('colorsel');

    // Then change color_over to:

    function color_over(e) {
    if (ie) {
    // do whatever IE needs
    } else {
    colorSel.value = e.target.id;
    }
    }

    Of course you still need to handle IE (maybe, I didn't test) but at
    least for all other browsers the work is hugely reduced.

    You can make similar changes to wherever you have used e.target then
    getElementById.

    That's it for me, I think there are a few bugs with Safari 1.0.3 (comes
    with OS X 10.2.8), I'll leave it now until I can test the latest
    version with OS X 10.4.

    Cheers, Fred.
    Fred Oz, Nov 2, 2004
    #6
  7. Guest

    Fred Oz Guest

    Matthew Hagston wrote:
    > Would be appriciated if ya get it working in Safari too. I don't have a

    [...]

    It seems your .bgColor should be .style.backgroundColor - it certainly
    works for Safari (scratch one maybe-bug). Check here:

    <URL:http://www.mozilla.org/docs/dom/domref/dom_style_ref.html>
    Fred Oz, Nov 2, 2004
    #7
  8. Guest

    Guest Guest

    "Fred Oz" <> wrote in message
    news:41879ef7$0$14779$...
    > Matthew Hagston wrote:
    >> Would be appriciated if ya get it working in Safari too. I don't have
    >> a

    > [...]
    >
    > It seems your .bgColor should be .style.backgroundColor - it certainly
    > works for Safari (scratch one maybe-bug). Check here:
    >

    For TD's I believe it should be bgColor. not referencing the style, just
    the TD itself. Haven't checked that with w3c references yet though. putting
    a DIV inside the TD to do the mouse-overs one would have to use
    style.backgroundColor anyways so one fix kind of self-corrects the next bug.
    Don't have time to write the fix at the moment, have some other changes in
    mind to do at the same time. Specifically something that allows you to show
    less colors in the primary window. the 34x32 is kind of intensive for some
    computers it seems.

    > <URL:http://www.mozilla.org/docs/dom/domref/dom_style_ref.html>
    Guest, Nov 3, 2004
    #8
  9. Guest

    Fred Oz Guest

    Matthew Hagston wrote:
    > Would be appriciated if ya get it working in Safari too. I don't have a

    [...]

    After quite a bit of playing, I can further recommend:

    1. You use style.backgroundColor everywhere instead of .bgColor

    2. Set all backgrounds as rgb(r,g,b) values

    3. You do not need to set or read the id of any table cells to get
    their colour, just refer directly to style.backgroundColor. You only
    need the id of the cells that you want to write to, everything else
    just grabs the backgroundColor. If you set the background using
    rgb(...) IE will return rgb(...), Firefox will return rgb(...) whether
    you use rgb(...) or #rrggbb.

    4. Modify functions as follows:

    colorSel = document.getElementById('colorsel');

    function color_over(e) {
    colorSel.value = (ie)?
    window.event.toElement.style.backgroundColor :
    e.target.style.backgroundColor;
    }

    function color_out(e) {
    colorSel.value = "";
    }

    Do similar to all other places where you read the id to get the
    background colour.

    All tested in IE and Firefox. I can supply full working code if you
    like, but I'll need a couple of hours to test in Safari first (and
    re-apply the DIV fix if still needed).

    Cheers, Fred.
    Fred Oz, Nov 3, 2004
    #9
  10. Guest

    Fred Oz Guest

    Matthew Hagston wrote:
    [...]
    >
    >> 2. Set all backgrounds as rgb(r,g,b) values

    >
    > I thought that I had tried this but it wouldn't work in Firefox but will
    > give it another try. Would be nice to get this to work as it would take out
    > some stupid hex-converting code.


    Good, but when you read the backgroundColour in Safari, it will be in
    #rrggbb regardless of how you set it(!!!). In the changeColorSelect()
    function you need an if statement to see how the colour has come back:

    if (clr.substr(0,3) == 'rgb') {
    var b = clr.substr(4);
    b = b.substr(0,b.length-1);
    var x = b.split(',')
    cn1 = x[0];
    cn2 = x[1];
    cn3 = x[2];

    // Otherwise, must be #rrggbb so convert from hex
    } else {
    var b = clr.substr(1);
    cn1 = parseInt(b.substr(0, 2), 16);
    cn2 = parseInt(b.substr(2, 2), 16);
    cn3 = parseInt(b.substr(4, 2), 16);
    }

    But elsewhere you can remove the hex conversion unless you want a
    readout in hex, so that:

    ca = parseInt(c1).toString(16);
    cb = parseInt(c2).toString(16);
    cc = parseInt(c3).toString(16);
    if (ca.length <2) { ca = "0" + ca; }
    if (cb.length <2) { cb = "0" + cb; }
    if (cc.length <2) { cc = "0" + cc; }
    ct = ca + cb + cc;

    is replaced by:

    ct = 'rgb('
    + parseInt(c1,10) + ','
    + parseInt(c2,10) + ','
    + parseInt(c3,10) + ')';

    You could probably use a string method to truncate c1, c2, c3 rather
    than using parseInt and save a few more cycles.

    Another that may help is to change:

    c1 = c1 - o1; c2 = c2 - o2; c3 = c3 - o3;

    to:

    c1 -= o1; c2 -= o2; c3 -= o3;

    in all the places it appears.

    [...]
    >> just grabs the backgroundColor. If you set the background using
    >> rgb(...) IE will return rgb(...), Firefox will return rgb(...) whether
    >> you use rgb(...) or #rrggbb.


    And Safari always gives #rrggbb (arrgghh).

    [...]
    >
    > Going to keep in the mouse-over color-display. Due to the fact that i
    > want it to display the actual color as you mouse over, not just the #000000
    > value. Just not sure how to display this. Perhaps i will make 3 cells on the
    > top row, 1 for the #input & go button (manual input which i need to add).
    > 2nd TD to display the mouse over, 3rd TD to display the currently selected
    > color.

    [...]

    Good idea. I have played with lots of optimisations but to keep IE,
    Firefox and Safari all behaving is tough. Even adding the events
    whilst building the tables was no faster than your current method of
    building the tables, then adding the events (though to my mind it
    should be). Putting the divs inside the tds slows things a bit.

    I have been testing on some slow platforms (PIII 500 MHz & G3
    400MHz)where it takes 4 seconds to run ChangeColorSelect each time you
    click, so I notice performance...

    Cheers, Fred.
    Fred Oz, Nov 3, 2004
    #10
  11. Guest

    Fred Oz Guest

    Matthew Hagston wrote:
    [...]
    > Just thinking, could nearly get rid of the table if using divs, though

    [...]

    You must be psychic - I thought exactly the same thing. Here's
    something to get you started - all the colour box parameters are
    dynamic so you can play with the number of columns and rows. I just
    use a crappy algorithm to get some different colours, of course you
    will want to use yours.

    The position of each div is calculated, just put the enclosing div
    wherever you want on the page, the rest will be inside it.

    I built it to test if using DOM create methods was faster than
    innerHTML, here's my results, yours may differ:

    Using Firefox DOM create as a base of 10, innerHTML is about 3 (i.e.
    renders in 1/3 the time) - it's amazingly fast. IE is about 12
    regardless of which method is used, Safari is about 10 with DOM and 30
    with innerHTML (really slow with innerHTML).

    I'd stick with DOM for best all round performance.

    I meant to also test creating a table as per your original, but didn't
    get around to it.

    Fred.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head><title>Div Boxes</title>
    <script type="text/javascript">
    function buildBox(p,l,c,w,wu,h,hu) {
    for (var i=0; i<l; i++) {
    var r = Math.floor(255*i/l); // red component of colour
    var x = i*h; // position from top

    // Do cells
    for (var j=0; j<c; j++) {
    var y = j*w; // position from left
    var g = Math.floor(255*j/c); // green bit of colour
    var b = Math.floor(255-(r+g)/2); // red bit of colour
    oDiv = document.createElement("DIV");
    oDiv.style.width = w + wu;
    oDiv.style.height = h + hu;
    oDiv.style.position = "absolute";
    oDiv.style.top = x + hu;
    oDiv.style.left = y + hu;
    oDiv.style.backgroundColor = "rgb("+r+","+g+","+b+")";
    oDiv.style.overflow = "hidden";
    oDiv.id = i+'-'+j;
    oDiv.onmouseover = wColour;
    oDiv.onmouseout = wOut;
    document.getElementById(p).appendChild(oDiv);
    } } }


    function buildBox2(p,l,c,w,wu,h,hu) {
    var hStr = '';
    for (var i=0; i<l; i++) {
    var r = Math.floor(255*i/l); // red component of colour
    var x = i*h; // position from top
    // Do cells
    for (var j=0; j<c; j++) {
    var y = j*w; // position from left
    var g = Math.floor(255*j/c); // green bit of colour
    var b = Math.floor(255-(r+g)/2); // red bit of colour
    var ih = ['<div style="',
    'width: ' + w + wu + '; ',
    'height: ' + h + hu + '; ',
    'position: absolute; ',
    'top: ' + x + hu+'; ',
    'left: ' + y + hu + '; ',
    'background-color: rgb('+r+','+g+','+b+'); ',
    'overflow: hidden;',
    '" ',
    // end of styles
    ' id="' + i + '-' + j + '" ',
    'onmouseover="wColour2(this)" ',
    'onmouseout="wOut2()" ',
    '></div>',
    ]
    hStr += ih.join('');
    }
    }
    // alert(hStr);
    document.getElementById(p).innerHTML = hStr;
    }

    ie = document.all;

    function wColour(e) {
    targ = (ie)?window.event.toElement:e.target;
    document.getElementById('readout').innerHTML =
    targ.style.backgroundColor;
    }

    function wOut() {
    document.getElementById('readout').innerHTML = "&nbsp;";
    }

    function wColour2(d) {
    document.getElementById('readout').innerHTML = d.style.backgroundColor;
    }

    function wOut2() {
    document.getElementById('readout').innerHTML = "&nbsp;";
    }

    function moveBox(p,l,c,w,wu,h,hu) {
    alert(document.getElementById(p).style.top);
    document.getElementById(p).style.top = l*h + hu;
    }
    </script>
    </head>
    <body >
    <form action="">
    <input type="text" name="nR" cols="5" value="33">Rows</input><br>
    <input type="text" name="nC" cols="5" value="33">Columns</input><br>
    <input type="text" name="nW" cols="5" value="4">Width (px)</input><br>
    <input type="text" name="nH" cols="5"
    value="4">Height (px)</input><br>
    <input type="button" value="Click to build" onclick="
    buildBox('master',this.form.nR.value,this.form.nC.value,
    this.form.nW.value,'px',this.form.nH.value,'px');
    ">
    <input type="button" value="Click to move" onclick="
    moveBox('master',this.form.nR.value,this.form.nC.value,
    this.form.nW.value,'px',this.form.nH.value,'px');
    "><br>
    <input type="button" value="Click to build2" onclick="

    buildBox2('master2',this.form.nR.value,this.form.nC.value,
    this.form.nW.value,'px',this.form.nH.value,'px');
    ">

    <input type="button" value="Click to move2" onclick="
    moveBox('master2',this.form.nR.value,this.form.nC.value,
    this.form.nW.value,'px',this.form.nH.value,'px');
    "><br>
    </form>
    <div style="position: relative; background-color: #ffffdd;"><span
    id="readout">&nbsp;</span></div><br>
    <div id="master" style="position: relative; background-color: #0000ff;
    line-height: 0pt;">
    </div><br>
    <div id="master2" style="position: relative; background-color: #ff0000;
    line-height: 0pt;">
    </div>
    </body>
    </html>
    Fred Oz, Nov 5, 2004
    #11
  12. Guest

    Fred Oz Guest

    Fred Oz wrote:
    [...]

    > oDiv.style.overflow = "hidden";


    This is critical in IE, otherwise the divs will be lineheight
    regardless of the height you specify.

    Oh yeah, tested in Firefox, IE 6 an Safari so should be pretty robust
    (sorry no Opera but you seem to know the issues there...)

    Fred.
    Fred Oz, Nov 5, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chris

    Color selector

    Chris, Dec 10, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    334
    Jose L Rodriguez
    Dec 10, 2003
  2. moondaddy
    Replies:
    3
    Views:
    38,292
    moondaddy
    Apr 28, 2004
  3. PJ6
    Replies:
    4
    Views:
    4,892
  4. Andrew Arace

    BGR Color to Java Color

    Andrew Arace, Sep 13, 2003, in forum: Java
    Replies:
    7
    Views:
    7,793
    Stephen Gilbert
    Sep 16, 2003
  5. Kamaljeet Saini
    Replies:
    0
    Views:
    410
    Kamaljeet Saini
    Feb 13, 2009
Loading...

Share This Page