?
Solved

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

Posted on 2003-03-26
10
Medium Priority
?
491 Views
Last Modified: 2008-02-01
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
Comment
Question by:MrMalone
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 14

Expert Comment

by:avner
ID: 8209686
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
 
LVL 5

Expert Comment

by:gator4life
ID: 8211543
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
 

Author Comment

by:MrMalone
ID: 8211718
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Accepted Solution

by:
avner earned 900 total points
ID: 8215679
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
 
LVL 14

Expert Comment

by:avner
ID: 8215684
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
 
LVL 5

Expert Comment

by:gator4life
ID: 8215751
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
 
LVL 14

Expert Comment

by:avner
ID: 8215763
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
 
LVL 5

Expert Comment

by:gator4life
ID: 8215820
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
 
LVL 14

Expert Comment

by:avner
ID: 8215832
Yeah, you are right, it's probably is shorter and more elegant in this case.
0
 

Author Comment

by:MrMalone
ID: 8216794
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

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question