• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 514
  • Last Modified:

Determine system color in DHTML/JavaScript. e.g. buttonface=???

I want to be able to determine the system colours used by the client machine.  i.e. the actual hex value of buttonface for instance.  This is so that I can use another function to highlight a button on the mouseover event.

0
MrMalone
Asked:
MrMalone
  • 5
  • 3
  • 2
1 Solution
 
avnerCommented:
You cannot do that, but you can use the system defualts :

<body style="background-color:buttonface">


You can find all the shortcuts for the system defaults at :

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/colors/colors.asp
0
 
gator4lifeCommented:
Realize that the buttonface color is only available within Internet Explorer on Windows OS machines.  If you are going for compatability, stick with the standards.

gator4life
(chomp, chomp)
0
 
MrMaloneAuthor Commented:
Come on - can't do it?  There's 300 points up for grabs here.  Maybe I should refrase the question:

How can I highlight a standard button in IE on the mouseover event so that it will look ok no matter what the windows appearance?  This is harder than it sounds as if you look closely at the border property of a standard button it is a little strange.  you can set:

border-top:2px white outset;
border-left:2px white outset;
border-bottom:2px white ridge;
border-right:2px white ridge;

but this is still slightly different than a standard button on a machine running xp with windows standard grey of RGB(200, 208, 212) or whatever it is.

My real problem is that you can't seem to control the innerborder color of the outset style.

If this doesn't make any sense then it's because it's 5pm, I've had enough and I'm off home.

Cheers.

p.s. I may resort to wrapping a div around the button and setting the borderwidth to 1px on the button and the div to give me control of the colors unless there is a better sol'n as that sounds nasty.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
avnerCommented:
gator4life , not true, I have tested it on NS and it works fine .

MrMalone , Here is an example implmenting the approach I suggested:

<html>
<head>
<title>about:blank</title>
<script language="javascript1.2">
<!-- copyright(c) avcoh@yahoo.com

-->
</script>
<style>

.buttonHover
{
    BORDER-TOP-WIDTH: 1px;
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 5px;
    BORDER-LEFT-WIDTH: 1px;
    BORDER-LEFT-COLOR: buttonshadow;
    BORDER-BOTTOM-WIDTH: 1px;
    BORDER-BOTTOM-COLOR: buttonhighlight;
    PADDING-BOTTOM: 0px;
    BORDER-TOP-COLOR: buttonshadow;
    PADDING-TOP: 2px;
    BORDER-RIGHT-WIDTH: 1px;
    BORDER-RIGHT-COLOR: buttonhighlight
}

.buttonOut
{
    BORDER-TOP-WIDTH: 1px;
    PADDING-RIGHT: 4px;
    PADDING-LEFT: 4px;
    BORDER-LEFT-WIDTH: 1px;
    BORDER-LEFT-COLOR: buttonhighlight;
    BORDER-BOTTOM-WIDTH: 1px;
    BORDER-BOTTOM-COLOR: buttonshadow;
    PADDING-BOTTOM: 1px;
    BORDER-TOP-COLOR: buttonhighlight;
    PADDING-TOP: 1px;
    BORDER-RIGHT-WIDTH: 1px;
    BORDER-RIGHT-COLOR: buttonshadow
}

</style>
</head>
<body >

<button onmouseover="this.className='buttonHover'" onmouseout="this.className='buttonOut'" class="buttonOut">Roll over me </button>

</body>
</html>

0
 
avnerCommented:
By the way, the colors I've suggetsed using are a W3C Recommendation :

http://www.w3.org/TR/REC-CSS2/ui.html#system-colors
0
 
gator4lifeCommented:
avner stated:
"gator4life , not true, I have tested it on NS and it works fine"

Sorry avner.  I did not know that these OS user- environment color values had been implemented into the CSS2 specification.  These color values used to only be accessible in Internet Explorer, since they were not part of any standard.  Microsoft must have lobbied pretty hard to get these included into the CSS specifications.  Since they are a standard, then I am not surprised that Netscape, Mozilla, etc. most likely support them now.  However, I did find one quote in the specification that was of interest:

"The set of values defined for system colors is intended to be exhaustive. For systems that do not have a corresponding value, the specified value should be mapped to the nearest system attribute, or to a default color."

Therefore, even though these values are a specification, the OS user-environments *DO NOT* have to specifically map to an identical attribute.  That means these standards are not really cross-OS compatible...very interesting.

Anyways, sorry about the confusion, and thanks for teaching me something new. : )

gator4life
(chomp, chomp)
0
 
avnerCommented:
gator4life ,

When refering to an OS with no default set of colors, I belive we are talking about Cellphones and the like, whihc is not an issue since we are dealing with Javascript (cellphones with no env colors, would have to use WML only anyway).


0
 
gator4lifeCommented:
Or using the condensed styles:

<html>
     <head>
          <style type="text/css">
          <!--
               *.buttonHover {


                    border-color: buttonshadow buttonhighlight buttonhighlight buttonshadow;
                    border-width: 1px;
                    padding: 2px 3px 0px 5px;
               }

               *.buttonOut {

                    border-color: buttonhighlight buttonshadow buttonshadow buttonhighlight;
                    border-width: 1px;
                    padding: 1px 4px 1px 4px;
               }
          //-->
          </style>
     </head>
     <body>
          <button class="buttonOut" onmouseover="this.className = 'buttonHover'" onmouseout="this.className = 'buttonOut'">Roll Over Me</button>
     </body>
</html>

All of those lines of code for so little functionality...I just had to! ;-)

gator4life
(chomp, chomp)
0
 
avnerCommented:
Yeah, you are right, it's probably is shorter and more elegant in this case.
0
 
MrMaloneAuthor Commented:
avner,

Good work.  You got the points since you posted your sol'n before Gator4life's (sorry G4L but I could only give the points to 1 person).  For the record I already resorted to setting the borderwidth to 1px and have a working sol'n similar to that which you posted.  I couldn't not give you the points though after all that work! ;) I use htc's by the way as I develop applications for IE based systems.  This is what I've settled on:

HTC file:

<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="element.style.backgroundColor='#DDD9D3';" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="element.style.backgroundColor='#D4D0C8';" />
</PUBLIC:COMPONENT>

CSS:

INPUT.cmd {
     cursor:hand;
     width:100px;
     border-width:1xp;
     background-color:#D4D0C8;
     behavior:url(text/htc/cmdcontrol.htc);
}

HTML:

<html>
    <head>
     <LINK rel="stylesheet" type="text/css" href="mystylesheet.css" />
    </head>

    <body>
           <input type=button class=cmd value="roll over me">
     </body>
</html>

Cheers.

p.s. a standard button has a borderwidth of 2px.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now