Posted by Jim S on 09/25/07 20:27

On Tue, 25 Sep 2007 16:21:24 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>
>> I still mean to get to moving buttons.
>
> Okay I think I know what you mean. You want to make the "buttons" to
> look like they depress like real buttons. Well your can*
>
> The '*' means of course MSIE will not cooperate without some hacks...
>
> For real modern web browsers just add:
>
> ul.buttonbar li:active { border-style: inset; }
>
> All this does is when you mouse down on a link the parent LI's borders
> swap from outset to inset style giving the appearance of a button.
>
> Now MSIE will not work because it does not support :hover and :active
> pseudo-classes on any elements other than A elements with HREF
> attributes (i.e., links). So your either need to use some JavaScript
> hack or use MSIE's special "behavior" property with their special HTC
> file. I fine the latter easiest. You need to add a special class for IE
> for the target element. The class name is "active" relating to the
> pseudo-class "active" that other browser will use. I kept the names the
> same to keep the purpose clear...
>
> /* supporting browser will use this pseudo-class rule */
> ul.buttonbar li:active { border-style: inset; }
>
> /* MSIE will use this real class rule, not the '.' not ':' */
> ul.buttonbar li.active { border-style: inset; }
>
> /* use MSIE's special behavior to attach the HTC the LI elements */
> ul.buttonbar li { behavior: url(IEFixes.htc); }
>
> Here is the code for the HTC, plain text file named "IEFixes.htc" I
> modified it to streamline a bit...
>
> //--------------------------- start cut ---------------------------
> <public:component>
> // For MSIE use JScript to attach JS functions to compensate
> // for missing pseudo-class support
> // from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
> // updated for html4.01 jnl 3/06
> <public:attach event="onmouseover" onevent="DoHover()">
> <public:attach event="onmouseout" onevent="RestoreHover()">
> <public:attach event="onmousedown" onevent="DoActive()">
> <public:attach event="onmouseup" onevent="RestoreActive()">
> <script type="text/jscript">
> function DoHover(){
> element.className += ' hover';
> }
> function DoActive(){
> element.className += ' active';
> }
> function RestoreHover(){
> element.className = element.className.replace(/\shover\b/,'');
> }
> function RestoreActive(){
> element.className = element.className.replace(/\sactive\b/,'');
> }
> </script>
> </public:component>
> //---------------------------- end cut ----------------------------

Thanks Jonathan.
I'm going to take a break as me head hurts :o)
I know it's just fluff, but simple folk are easily impressed and it keeps
my brain ticking over.
--
Jim S
Tyneside UK
www.jimscott.co.uk

[Back to original message]