For one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples:

The HTML and CSS are both straightforward and have a structure and style common to many web navigations and menus (for the sake of post length, I’m not including HTML/CSS code examples here but you are free to snoop around in the demo or view the files in the download below).

In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. I’ve added .stop() to eliminate any queue buildup from quickly mousing back and forth over the navigation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// Begin jQuery
 
$(document).ready(function() {
 
/* =Reflection Nav
-------------------------------------------------------------------------- */	
 
    // Append span to each LI to add reflection
 
    $("#nav-reflection li").append("<span></span>");	
 
    // Animate buttons, move reflection and fade
 
    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });
 
/* =Shadow Nav
-------------------------------------------------------------------------- */
 
    // Append shadow image to each LI
 
    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');
 
    // Animate buttons, shrink and fade shadow
 
    $("#nav-shadow li").hover(function() {
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });
 
// End jQuery
 
});

Please note, for the purposes of this quick demo, I did not bother including support for IE6.

View Demo   or   Download

Update 06/01/2009: I updated the shadow example so that it has more of a bounce to it.

Update 07/08/2009: As Cody Lindley points out in the comments (thanks!), this example does not require the UI and could work with jQuery alone (I’ve updated the link in the post). However, this being a navigation example, I’ll leave the UI script in the demo and download for users who want to experiment with animating text, background, borders, or outline colors.

The web community has been abuzz lately with talk about dropping support for IE6 and rightfully so! I couldn’t agree more for most sites, though I’m sure there will be the occasional client who either requests IE6 to be included in testing or it turns out their audience actually does use IE6 according to the site’s stats. Nonetheless, the majority of mordern websites could certainly do without supporting IE6. I would guess somewhere between 30% of my development time is spent fixing the crippled browser, if not more, and I’m looking forward to an enormous decrease in frustrations! It was always a frightful thing to fire up Windows and find out what horrors IE had done to a perfectly good site. I don’t blame the browser either; the problem was for too long (way too long) IE6 still had a large user group. Thankfully, those numbers are continually decreasing and I’ve decided this is the year I’ll be dropping support for IE6. If a future client requests the browser to be supported, that’s fine, but it will come at additional costs for the extra development and testing time.

As for how I’m going to ignore the outdated browser, I wanted to notify IE6 users of the issue rather than assume they already knew they were using an outdated browser. My solution was to create a warning message that gets inserted after the opening <body> tag via Javascript. Conditional comments ensure this message (as well as the HTML code within the body) will only appear for IE6 or previous versions. The message is styled in a very Microsoft-esque way so even the hardest-core IE6 user will be able to recognize it. Where does the link point to? Firefox, of course.

This site is currently using what I’ve dubbed the “Attention IE6″ script so go ahead and open IE6, then visit www.adrianpelletier.com. I’ve configured the script to work in conjunction with jQuery because that is the framework I was already using but I’m sure you could easily adapt it to fit your own needs. I’m posting a download link for anyone who cares to use this approach on their own website. The setup is very simple, just include the following conditional comment in the <head> of your document.

1
2
3
4
5

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/attention_ie6.js"></script>
<![endif]-->

Next, download the following files and place in the appropriate Javascript, CSS, and images directories:

Download

And so, farewell to IE6. I cannot say that I will miss you.

Update 05/31/2009: I want to emphasize that this experiment is not a fix-it-all solution by any means. As stated above, a large majority of modern websites would have no problems dropping support IE6. For example, this site currently receives around 3% of users on IE6 and that number continues to drop. That’s not a large enough audience to worry about, in my opinion. There are, however, still specific scenario’s where IE6 maintains a much higher user percentage (i.e. corporate businesses that place restrictions on browser updates). In those cases, I do believe IE6 should be included in development testing.

I also do not advocate blocking or punishing IE6 users. My intentions with the above approach were to 1) inform the user that they are using outdated technology and 2) warn that the site may look as it should. However, I have not restricted the user’s access to the site’s content and would never recommend doing so.

I don’t consider this article to be the final answer, not by a long shot. However, I would hope that ideas such as these will at least strike up conversations and thoughts about advancing web development and what the next step should be.

Among the countless IE annoyances, the duplicate character bug is one I’ve ran into more than once. Position Is Everything has a thorough write-up on the puzzling behavior, which seems to be triggered by HTML comments between floats and sometimes hidden elements. There are a couple different workarounds such as a -3px margin on the last float or using conditional comments in place of regular HTML comments. A colleague and I have found another way to fix this issue which has worked on every case so far and is a slightly easier/cleaner option.

If you place an empty element (it can be a p, span, div, anything) directly after the element which is duplicating characters and set the display to none in the CSS, the problem will disappear. What happens is because the last element within the floats is being hidden, there are no characters for IE to duplicate. For future maintenance, I’ve added a comment within the HTML (as shown in example) so that I’ll know why that extra element is there. I would never recommend placing unused elements within your HTML as it isn’t semantically correct but if you’re looking for a quick fix, this will do the trick.

HTML:

   ...
   <div id="footer">
      <p>This element was duplicating characters.</p>
      <span class="ie_fix"><!-- do not delete this,
      it fixes the IE duplicate characters --></span>
   </div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>

CSS:

.ie_fix {
   display: none;
}