Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
12,990 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" | ||
| "http://www.w3.org/TR/html4/strict.dtd"> | ||
|
|
||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <title>Elements.MultiHighlight Demo</title> | ||
| <link type="text/css" rel="stylesheet" href="css/Identity-Standards-Styles.css" /> | ||
| <script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script> | ||
| <script type="text/javascript" src="mootools-1.2.4.4-more.js"></script> | ||
| <script type="text/javascript" src="../Source/Elements.MultiHighlight.js"></script> | ||
| <script type="text/javascript"> | ||
|
|
||
| window.addEvent( 'domready', function() { | ||
|
|
||
| $$('.link1').multiHighlight('#eee','#000'); | ||
| $$('.link2').multiHighlight(null,'#eee', {duration:'short'}); | ||
| $$('.link3').multiHighlight('#eee',null, {duration:'long'}); | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| <style type="text/css"> | ||
|
|
||
| body{ padding:0; margin:0 } | ||
| .link-container{ margin:0 auto; width:300px; padding:5px; background-color:#aaa } | ||
| .link1 { | ||
| font-size: 10px; font-family:arial, Helvetica, sans-serif; | ||
| width:50px; height:15px; margin:10px 0 0 10px; padding:2px; | ||
| display:block; float:left; | ||
| color: #eee; background-color:#000; | ||
| text-decoration: none; text-align: center; | ||
| } | ||
| .link2 { | ||
| font-size: 10px; font-family:arial, Helvetica, sans-serif; | ||
| width:50px; height:15px; margin:10px 0 0 10px; padding:2px; | ||
| display:block; float:left; | ||
| color: #000; background-color:#aaa; | ||
| text-decoration: none; text-align: center; | ||
| } | ||
| .link3 { | ||
| font-size: 10px; font-family:arial, Helvetica, sans-serif; | ||
| width:50px; height:15px; margin:10px 0 0 10px; padding:2px; | ||
| display:block; float:left; | ||
| color: #000; background-color:#aaa; | ||
| text-decoration: none; text-align: center; | ||
| } | ||
| /* additional .link styles for modern browsers */ | ||
| .link1, .link2, .link3 { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } | ||
|
|
||
| .clear-floats{ clear:both; } | ||
|
|
||
| </style> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="link-container"> | ||
| <a class="link1" href="#">home</a> | ||
| <a class="link1" href="#">about</a> | ||
| <a class="link1" href="#">contact</a> | ||
| <div class="clear-floats"></div> | ||
| </div> | ||
| <div class="link-container"> | ||
| <a class="link2" href="#">home</a> | ||
| <a class="link2" href="#">about</a> | ||
| <a class="link2" href="#">contact</a> | ||
| <div class="clear-floats"></div> | ||
| </div> | ||
| <div class="link-container"> | ||
| <a class="link3" href="#">home</a> | ||
| <a class="link3" href="#">about</a> | ||
| <a class="link3" href="#">contact</a> | ||
| <div class="clear-floats"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
e3fc028There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, I've optimized your script a little: http://gist.github.com/543599
I've not tested if it works, but it should. Hope it helps!
e3fc028There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey thanks for the input!
A couple things I noticed though. "elem" would need to be replaced with "e.target" since it's not passed in via the "each" loop anymore and also setting the previous styles/starting styles in the events will end up giving incorrect style properties to the element if it is moused over then back before the transitioning has fully completed, leaving the element in a state of being partially transitioned. This is why I did the "each" loop to store the starting values within the element, I really didn't want to go that route but couldn't really think of any other solid way of saving the initial style properties for the element. I am going to clean this up today and use some of the optimizations you suggested.
Here is a link with a working example of code you suggested so you can see what I'm talking about on leaving an element in a partially transitioned state. Just quickly mouse over and out the elements a few times and you should see the issue. http://mootools.net/shell/dxww6/
e3fc028There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn't think about the partial finished fx, so you're right :). Anyway, looking forward to the cleanup
e3fc028There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just pushed an update up, would appreciate to hear your thoughts or any suggestions you might have for this release.