Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Jan Brasna]

Thats right. I hadn't tested in IE 5. There is another way to create an 
anonymous function in JavaScript and this one works in IE 5 as well. :-)


Aaah, god bless you ;) I was playing two days with eval()s and dividing 
it to a function definition and a call etc. and no luck. This is great!



--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

Jan Brasna wrote:
It seems to be working only in IE 6.0. May someone else confirm this 
results?



Yes. Many friends and colleagues reported it this morning. It fails on 
the { } JS block.



Thats right. I hadn't tested in IE 5. There is another way to create an 
anonymous function in JavaScript and this one works in IE 5 as well. :-)


For example:

input {
/* whatever:focus */
background-color: expression(
this.onfocus = new Function("this.className += ' onfocus';"),
this.onblur = new Function("this.className = 
this.className.replace('onfocus', '')")

);
}


Thanks you all for the hint!

Happy coding, Klaus


PS: It seems to me, that one should mention, that this technique will 
not work in IE for the Mac (no support for dynamic properties).


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Jan Brasna]

It seems to be working only in IE 6.0. May someone else confirm this results?


Yes. Many friends and colleagues reported it this morning. It fails on 
the { } JS block.


--
Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Roberto Gorjão]

Olá Klaus,

I’ve seen your blog entry and I’ve read your suggestions and they all 
seem very interesting and useful. I tested your demo page in I.E. 5.0 
and 5.5 for windows, and also in IE for Mac, both for OS 9 and OS X. It 
has not worked in any of these browsers, what I found odd and can’t 
explain. It seems to be working only in IE 6.0. May someone else confirm 
this results?


Cumprimentos,

Roberto Gorjão

--
Klaus Hartl wrote:


It looks odd, but it works!

Here's a demo page:
http://stilbuero.de/demo/whatever_hover/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[David Hucklesby]

Klaus Hartl wrote:
>
>
> whatever:focus though works perfectly:
>
>
> /* whatever:focus */
> input, select, textarea {
> background-color: expression(this.runtimeStyle.backgroundColor,
> this.onfocus = function() { this.className += ' onfocus'; },
> this.onblur = function() { this.className =
> this.className.replace('onfocus', ''); } ); }
>
Thank you for this, Klaus. Now I can add this to my "help-ie.css"
and take the JS out of the "help-ie.js" file. Thank goodness for
conditional comments!

Sorry for hijacking the previous thread.

Cordially,
David
--
David Hucklesby, on 7/12/2005

--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

> .whatever {
> behavior: expression(
> this.onfocus = function() { this.className += ' 
whateverfocus'; },

> this.onblur = function() { this.className =
> this.className.replace('whateverfocus', ''); });
> }

(Mis)Using the behavior property is a bad idea. I had some strange side 
effects, i.e. it threw IE in a loop loading background images over and 
over again.


whatever:focus though works perfectly:


/* whatever:focus */
input, select, textarea {
background-color: expression(this.runtimeStyle.backgroundColor,
this.onfocus = function() { this.className += ' onfocus'; },
this.onblur = function() { this.className = 
this.className.replace('onfocus', ''); }

);
}


Regards,

Klaus

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

Is there any way to get IE to understand "focus"?



Looks like a good place to use Sons of Suckerfish [1], especially the
Focus [2] part.

Prabhath
http://nidahas.com

[1] http://www.htmldog.com/articles/suckerfish/
[2] http://www.htmldog.com/articles/suckerfish/focus/


Hi,

the suckerfish solution (the old solution I would call it) and the 
approach using Dynamic Properties are the same from a technical view. 
But I think, the Dynamic Props approach has some advantages:


* We don't have to include a script anymore, which is loaded by every 
browser and therefore we would have to do some browser-sniffing. This 
makes your javascript a little "cleaner" and smaller.

The hack stays, where it belongs - in your IE specific style sheet.
* We can get rid of an onload event (which is not really necessary anyway).
* We can use some more advanced selectors better than 
getElementsByTagName to attach the focus/blur events. It's easier to 
attach different styles to different elements...



Regards,

Klaus


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Prabhath Sirisena]

On 7/12/05, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> David Hucklesby wrote:
> > Is there any way to get IE to understand "focus"?

Looks like a good place to use Sons of Suckerfish [1], especially the
Focus [2] part.

Prabhath
http://nidahas.com

[1] http://www.htmldog.com/articles/suckerfish/
[2] http://www.htmldog.com/articles/suckerfish/focus/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

David Hucklesby wrote:

Is there any way to get IE to understand "focus"?


Hi David,

have you tried:

.whatever {
background: #808080;
}
.whatever:focus, .whateverfocus {
background: #eaeaea;
}


.whatever {
behavior: expression(
this.onfocus = function() { this.className += ' whateverfocus'; },
this.onblur = function() { this.className =
this.className.replace('whateverfocus', ''); });
}


I haven't tested that - let us know, if this works!

Regards, Klaus

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[David Hucklesby]

On Mon, 11 Jul 2005, Klaus Hartl wrote:
>
> hm, I think using a property like "behavior" for assigning these
> mouse events might be a good idea - should not have any side
> effects and to me that even makes some sense :-)
>

Is there any way to get IE to understand "focus"?

Cordially,
David
--
David Hucklesby, on 7/11/2005

--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

Indeed.

- zoom on an inline element, this will more behave like inline-block.
- applied on an container element (affecting floats, relatively 
positioned constructs, and more), it may change the rendering 
fundamentally.


-> avoid "layout", no need to call the evil


hi ingo,

you name it! but on the other hand "layout" can be very helpful to fix 
rendering bugs. the holly hack (height: 1%) for example is nothing else 
than triggering layout...


hm, I think using a property like "behavior" for assigning these mouse 
events might be a good idea - should not have any side effects and to me 
that even makes some sense :-)



regards,

klaus




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Ingo Chao]

Klaus Hartl schrieb:

One can also use a totally unused property to assign the events, like:
.whatever {
zoom: expression(
this.onmouseover = function() { this.className += ' 
whateverhover'; },
this.onmouseout = function() { this.className = 
this.className.replace('whateverhover', ''); });

}

But this may have side effects in some cases. "zoom" for example 
triggers "layout", which can have some effect on the rendering...


Indeed.

- zoom on an inline element, this will more behave like inline-block.
- applied on an container element (affecting floats, relatively 
positioned constructs, and more), it may change the rendering fundamentally.


-> avoid "layout", no need to call the evil

Ingo

--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

IE/Win:
.whatever {
background-color: expression(this.runtimeStyle.backgroundColor,
this.onmouseover = function() { this.className += ' whateverhover'; },
this.onmouseout = function() { this.className =
this.className.replace('whateverhover', ''); });
}



Very nice! You can take this part out of the expression and it will 
still work: --this.runtimeStyle.backgroundColor,--


Did you leave that part in by accident or was there a purpose?


Hi Brett,

thanks for the tip! I did not leave that part in by accident - I just 
thought, if I leave out defining the background color somehow, I would 
overwrite the background from .whatever in the basic style sheet.


One can also use a totally unused property to assign the events, like:
.whatever {
zoom: expression(
this.onmouseover = function() { this.className += ' 
whateverhover'; },
this.onmouseout = function() { this.className = 
this.className.replace('whateverhover', ''); });

}

But this may have side effects in some cases. "zoom" for example 
triggers "layout", which can have some effect on the rendering...



Regards, Klaus


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[Klaus Hartl]

Neat. But then on this end ( XP_SP2)  IE6.0 'Security' setting at 
"high." Now what I'll do?


Any JavaScript is turned off with security setting "high". No difference 
if you use an behavior, these dynamic properties I mentioned or just a 
normal javascript file.


Therefore I recommend using whatever:hover for some nice and useful 
effects, for example highlighting form elements, table rows and so on, 
but not for anything critical. It just should degrade gracefully without 
javascript enabled.



Cheers, Klaus
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] whatever:hover fast and easy via Dynamic Properties

[David Laakso]

Klaus Hartl wrote:


Hi all,

this may be of some interest here... I found a way to easily implement
whatever:hover using Dynamic Properties. Here's an example of the code:
[...]
Here's a demo page:
http://stilbuero.de/demo/whatever_hover/
...and a blog entry of mine about all this:
http://stilbuero.de/blog/2005/07/whateverhover-fast-and-easy.html
Klaus
--
[EMAIL PROTECTED]

Neat. But then on this end ( XP_SP2)  IE6.0 'Security' setting at 
"high." Now what I'll do?

Regards,
David Laakso

--
David Laakso
http://www.dlaakso.com/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/