Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: SELECT object

  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    SELECT object

    Hi... I am working on a selection menu that will allow me to send available items in a list to another list(selected items)...for this I am using the select list box object... I need the items to change color when the mouse is over them... the option object in the select list object does not have an onmouseover event... can somebody recommend a way to highlight the different items that are in the select list??? Thanks in Advance..


    MALI

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    could u use css to change the background color?
    Code:
    <select>
    <option style="background-color:#0000FF;color:#FFFFFF;">blah</option>
    <option style="background-color:#FF0000;color:#FFFFFF;">blah</option>
    </select>
    i dunno if that will suffice

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you use styles, I recommend not doing them inline -- atleast do it in an external document.

    If this is an 'option' drop down menu, you won't be able to change the color -- it's part of the software, most programs (IE maybe the exception) will ignore it.

    If you want a list you can adjust, you can do something like on this site:
    http://www.shauninman.com/

    Top left corner -- that's not an 'option' drop down menu. It's a CSS menu that displays lists on hover. This techinque is in detail here:
    http://www.alistapart.com/articles/dropdowns/
    http://www.htmldog.com/articles/suckerfish/dropdowns/

    That help?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MALI
    the option object in the select list object does not have an onmouseover event...
    Yes it does.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>=- Page title -=</title>
    <script type="text/javascript">
    function addChildHover(elm, child, hoverColor, regColor) {
    	var parent = document.getElementById(elm);
    	var opts = parent.getElementsByTagName(child);
    	for (i=0; i<opts.length; i++) {
     		opts[i].style.color = regColor;
     		opts[i].onmouseover = function() {
    			this.style.color = hoverColor;
     		};
    		opts[i].onmouseout = function() {
    		this.style.color = regColor;
    		};
    	}
    }
    
    window.onload = function() {
    	addChildHover('dropdown','option','#FF00CC','#CC00FF');
    };
    </script>
    </head>
    
    
    <body>
    
    <form action="/">
    <select id="dropdown">
    	<option value="">Blah</option>
    	<option value="">Blah</option>
    	<option value="">Blah</option>
    	<option value="">Blah</option>
    	<option value="">Blah</option>
    </select>
    </form>
    
    </body>
    </html>
    If you comment out the onmouseout bit then each option will remian pink (instead of turning back to purple).

    As Brady said, the browser manufacturers have made the decision to dissallow styling of the currently focused <option>.

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    although firefox does pick up the colors but not the text inside it would be useful if u were just using them to choose colors but in this case i dont that is the situation at hand


  •  

    Posting Permissions

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