Hi all,
First, thanks for MochiKit, a very useful library.
I wanted to implement an effect where mousing over an element (in this
case a list item) would change the background color and then
onmouseoff the color would fade back to the original background color.
The first issue was when I would quickly move the mouse over an element
that was already fading, the new effect would pickup the current
background color and then fade to that instead of to the original
background color.
The second issue was the "finish" method of Highlight was setting the
background color to the endcolor, this is has an unfortunate side
effect; as the original color was calculated from a style and by
setting it on the dom node it overrides any settings from the style.
Then if later I push a new class onto the node (say with a different
background color) then any settings on the dom node override any in the
new style.
Then I noticed the restorecolor option but saw that it wasn't being
utilised so first off I changed Highlight.finish to use it instead.
This still didn't work as code to set default values for these options
use the ! operator, which means it overwrites empty strings.
Now some of the time I really do want the background color set to an
empty string, which in effect says "go back to whatever your style
says".
So I changed it to use MochiKit.Base.isUndefinedOrNull instead and hey
presto it works beautifully.
I have included a diff (against svn version) and an example;
1033,1035c1033,1036
< if (!this.options.restorecolor) {
< this.options.restorecolor = d.getStyle(this.element,
<
'background-color');
---
>
> if (MochiKit.Base.isUndefinedOrNull( this.options.restorecolor )) {
> this.options.restorecolor = d.getStyle(this.element,
> 'background-color');
1064c1065,1066
< backgroundColor: this.options.endcolor
---
> // backgroundColor: this.options.endcolor
> backgroundColor: this.options.restorecolor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html>
<head>
<script TYPE="text/javascript" SRC="MochiKit/MochiKit.js"></script>
<script TYPE="text/javascript" SRC="MochiKit/New.js"></script>
<script TYPE="text/javascript" SRC="MochiKit/Visual.js"></script>
<style>
li {
background-color : #C0C0C0;
border-left : none;
padding-left : 14px;
}
li.hover {
background-color : #FFFFFF;
border-left : 10px solid blue;
padding-left : 4px;
}
</style>
<script TYPE="text/javascript">
var onMouseOver = function( e ) {
addElementClass( e.src(), 'hover' );
};
var onMouseOut = function( e ) {
removeElementClass( e.src(), 'hover' );
new MochiKit.Visual.Highlight( e.src(),
{ startcolor : "#FFFFFF",
endcolor : "#C0C0C0",
restorecolor : "",
duration : 0.5 } );
};
var init = function( ) {
forEach( getElementsByTagAndClassName( 'li' ),
function( node ) {
connect( node, 'onmouseover', onMouseOver );
connect( node, 'onmouseout', onMouseOut );
} );
};
connect( window, 'onload', init );
</script>
</head>
</html>
<body style="background-color : white;">
<ul>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
<li>Item Two</li>
</ul>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/mochikit
-~----------~----~----~----~------~----~------~--~---
