Advanced Search

Results 1 to 8 of 8

Thread: Background colors and editable selectbox

  1. #1
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Background colors and editable selectbox

    Hello,

    I need your help,

    How can the JavaScript coding below be modified such that the background color in the input box won't unshade when the [↓] is clicked to display the avaliable options. The only time that both elements (input/select) should unshade, is if the user removes focus from both elements entirely by clicking on some other element in the page.

    Scratching my head with this one:

    Code:
    <script type="text/javascript">
        var shade = "yellow"
        var unshade = "white"
    
        window.onload = function() {
                var x = document.getElementsByTagName('INPUT')
    
                    for (var i = 0; i < x.length; i++) {                
    
                        if (x[i].readOnly == false) {
    
                            if (x[i].id == "refdocs_input") {
    
                                x[i].onfocus = function() { 
                                        this.style.backgroundColor = shade
                                        document.getElementById('refdocs_wrapper').style.backgroundColor = shade
                                        document.getElementById('refdocs_select').style.backgroundColor = shade
                                }//end function
    
                                x[i].onblur = function() {
                                        this.style.backgroundColor = unshade
                                        document.getElementById('refdocs_wrapper').style.backgroundColor = unshade
                                        document.getElementById('refdocs_select').style.backgroundColor = unshade
                                }//end function
                            }//end if
    
                        }//end if
    
                    }//end for
        }
    </script>
    HTML MARKUP:
    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style type="text/css">
    #refdocs_select { 
        left: expression(this.previousSibling.offsetLeft); 
        width: expression(this.previousSibling.offsetWidth);  
        clip: expression("rect(2px auto 20px " + (this.previousSibling.offsetWidth - 20) + "px)"); 
        overflow: hidden;
        position: absolute;
        top: -1px;
        font-size: 9pt;
        font-family: Arial;
    }
    #refdocs_wrapper {
        border: 1px solid rgb(128,128,128);
        display: block;
        position: relative;
        width: 180px;
        height: 20px;
    }
    #refdocs_input {
        border: 0;
        height: 18px;
        width: 180px;
        position: relative;
        font-size: 9pt;
        font-family: Arial;
        padding: 2px;
    }
    </style>
    
    </head>
    
    <body>
    <div id="refdocs_wrapper">
    <input id="refdocs_input" type="text"><select id="refdocs_select"> 
        <option value=""></option>
        <option value="ABC">ABC</option>
        <option value="DEF">DEF</option>
        <option value="GHI">GHI</option>
        <option value="JKL">JKL</option>
        <option value="MNO">MNO</option>
    </select>
    </div>
    </body>
    
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    You don't seem to say whether or not both of them should be highlighted when neither is and the select is focused. Assuming that's a 'yes', then:

    Code:
    <script type="text/javascript">
        var shade = "yellow";
        var unshade = "white";
    
        window.onload = function() {
                var x = document.getElementsByTagName('INPUT');
    
                    for (var i = 0; i < x.length; i++) {                
    
                        if (!x[i].readOnly) {
    
                            if (x[i].id == "refdocs_input") {
    
                                x[i].onfocus = document.getElementById('refdocs_select').onfocus = function() {
                                        document.getElementById('refdocs_wrapper').style.backgroundColor = shade;
                                        document.getElementById('refdocs_select').style.backgroundColor = shade;
                                        document.getElementById('refdocs_input').style.backgroundColor = shade;
                                }//end function
    
                                x[i].onblur = document.getElementById('refdocs_select').onblur = function() {
                                        document.getElementById('refdocs_wrapper').style.backgroundColor = unshade;
                                        document.getElementById('refdocs_select').style.backgroundColor = unshade;
                                        document.getElementById('refdocs_input').style.backgroundColor = unshade;
                                }//end function
                            }//end if
    
                        }//end if
    
                    }//end for
        }
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    jason_kelly (09-23-2013)

  4. #3
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Wow!

    I am again both floored and amazed at your talent and wisdom on this forum. I can't simply thank you enough for all of this. One of the best around here. Again, thank you so much, you coding is working flawlessly!.

    Cheers and have a much brighter and awesome day!

    Jay

  5. #4
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Im noticing that I am having to click drop down twice to get the selectbox focus. Is there anyway to circumvent the need for a double click?

    Jay

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I noticed that too, but only in IE. I tried various ways to get around it, but nothing worked. I checked and it was like that before, with the code in your first post, so I decided not to worry about it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Wait, looking at it again, this seems to work:

    Code:
    <script type="text/javascript">
        var shade = "yellow";
        var unshade = "white";
    
        window.onload = function() {
                var x = document.getElementsByTagName('INPUT'), y = document.getElementById('refdocs_select'), hlighted;
    
                    for (var i = 0; i < x.length; i++) {                
    
                        if (!x[i].readOnly) {
    
                            if (x[i].id == "refdocs_input") {
    
                                x[i].onfocus = y.onmousedown = y.onfocus = function() {
                                	    if(hlighted){return;}
                                	    hlighted = true;
                                        document.getElementById('refdocs_wrapper').style.backgroundColor = shade;
                                        document.getElementById('refdocs_select').style.backgroundColor = shade;
                                        document.getElementById('refdocs_input').style.backgroundColor = shade;
                                        setTimeout(function(){hlighted = false;}, 100);
                                }//end function
    
                                x[i].onblur = y.onblur = function() {
                                	    if(hlighted){return;}
                                        document.getElementById('refdocs_wrapper').style.backgroundColor = unshade;
                                        document.getElementById('refdocs_select').style.backgroundColor = unshade;
                                        document.getElementById('refdocs_input').style.backgroundColor = unshade;
                                }//end function
                            }//end if
    
                        }//end if
    
                    }//end for
        }
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Oct 2011
    Posts
    45
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much John. It worked like a charm. Some really good logic here at play

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Now that it's working, I've been wondering why it goes through all that trouble in finding refdocs_input, it can be found right away with:

    Code:
    document.getElementById('refdocs_input')
    If it's only a matter of whether or not the element exists and isn't read only, you can do:

    Code:
    var refdocsInput = document.getElementById('refdocs_input');
    if(refdocsInput && !refdocsInput.readOnly){
     . . .
    I guess the way it's done insures that not only it exists, but also that it is an input tag. Generally that could be assumed or tested in another way though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Changing background and font colors
    By d_weaver in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 02-28-2008, 08:48 AM
  2. How do I swap Background colors...
    By BadolzoN in forum JavaScript
    Replies: 7
    Last Post: 10-18-2007, 11:22 AM
  3. Printing background-color colors
    By johnnyi in forum HTML
    Replies: 4
    Last Post: 01-27-2006, 08:17 PM
  4. Replies: 5
    Last Post: 11-10-2005, 06:56 PM
  5. Retaining Background Colors
    By skisweet in forum JavaScript
    Replies: 4
    Last Post: 07-26-2005, 05:23 AM

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
  •