January 2008 - Posts

• Code Tips & Tricks 3: CSS Menu Concept

  This is an interesting idea for a navigation menu.  This is a pure concept and I'm not sure if it would work with any site design but I learned everything I know about CSS from experimenting and coming up with useless ideas.  So, the idea is that the menu bar looks normal till you hover over it.  Once you have over it, all the links appear to blur while the item that is being hovered over remains the same.  This is how I choose to implement this, however, you could make the non-selected items smaller, change color, or even rotate.  The possibilities are endless, so experiment with it and let me know what interesting things you come up with. Step 1: Create your images for the menu. In this case I am using images because I wanted a blurring effect, if you just want to do simple text manipulation then there is no need for images. The image should look something like the image on the left.  Refer to my previous post to understand why both states are in one image. STEP 2: Now it is time to create the HTML which is pretty straight forward.  I have simplified it, so some it is not an optimized menu but you should be able to get the idea. It consists of a simple div container with the links placed inside. 1: <div id="nav"> 2: <a href="#" id="LINK1">LINK</a> 3: <a href="#" id="LINK2">LINK</a> 4: <a href="#" id="LINK3">LINK</a> 5: <a href="#" id="LINK4">LINK</a> 6: </div> STEP 3: Now comes the magic, it is time to create the styles for the links.  You can implement these in line or in a style sheet.  There are three main styles to implement.  The default style for the link, the hover style for the container, and the hover style for the links inside the container.  One strange thing that I have done is set the text-indent property to -9999999px.  What this does is is allow me to have the link text for SEO but also not have it displayed on top of the images. 1: <style type="text/css"> 2: #nav a 3: { 4: text-indent: -999999px; text-decoration:none; display:block; 5: height:50px; width:100px; background: URL('images/btn.png'); float:left; 6: } 7: #nav:hover a {background-position:0 -50px;} 8: #nav a:hover {text-decoration: underline; background-position:0 0;} 9: </style> LINK LINK LINK LINK Posted Jan 29 2008, 05:54 PM by Matthew M. Osborn

• Cubical Decorations

  I know I said I was going to be posting once a week and I have already broken that string because I haven't posted in 2 weeks. For what its worth we just had a release at work so I haven't had much free time. Sorry. I have a few posts the I'm currently working on so keep an eye open for those.  They include a rather length introduction to DIV's (inspired by my boss asking me to teach him the ways of the div) and a pretty cool CSS menu trick that I just picked up. Until then, I ran across some pretty handy posters the other day while reading some RSS feeds.  There is a new poster for the .NET Framework 3.5, as well as a poster to the default shortcut keys in Visual Studio 2008.  So get to decorating your cubicles in true geek fashion. .NET Framework 3.5 Poster Visual Studio 2008 Shortcut Keys Poster Posted Jan 28 2008, 05:50 PM by Matthew M. Osborn

• Code Tips & Tricks 2: Pure CSS Roll Over

  Many of us us roll over images on our navigation or other items in our web pages.  One thing that can be problematically is users with slow connections or larger images can cause a flashing when you roll over when the file is being downloaded.  One way to solve this is to use JavaScript to preload your images on the page.  However, there is a much easier way to do it with just a little CSS. The first thing to do is to create the images for the roll overs. Once you have these don what you need to do is put on on top of the other so they look something like this. So the trick comes when setting up the background image in the CSS.   1: <style> 2: #navigation a{ 3: background:url(images/button.gif) no-repeat 0 0; 4: width:41px; 5: height:45px; 6: display:block; 7: text-align:center; 8: float:left; 9: margin:0 5px; 10: padding-top:10px; 11: text-decoration:none; 12: color:#333; 13: } 14:   15: #navigation a:hover{ 16: background:url(images/button.gif) no-repeat 0 100%; 17: color:#FFF; 18: } 19:   20: </style>   What you do is basically change the background position so that only one of the images is displayed at a time.  This means that once the first image is loaded they are both there everything is done on the client side.  While this isn't that great of a trick it is handy in making roll overs with complex images just as reflections.  Here is a sample: 123 Posted Jan 13 2008, 11:30 PM by Matthew M. Osborn Filed under: Code Tips & Tricks, CSS, Design, X/HTML

• HEROES happen {here} : Update

  Most all of the launch events have been opened for registration including the Salt Lake City event.  To register go to HEROES happen here See my previous post for more details. Posted Jan 11 2008, 04:44 PM by Matthew M. Osborn

• HEROES happen {here}

  For those of you who don't know yet Microsoft has opened registration for the first of several launch events for VS2008, SQL2008, and Server2008.  The first event is in Los Angeles, CA on February 27.  Registration for satellite events should be open soon. Register here. Posted Jan 09 2008, 12:36 PM by Matthew M. Osborn

• Code Tips & Tricks 1: GhostDoc & NDoc

  Documentation is the coders best and worst friend.  It is a two sided sword, it makes your life easier but no one likes writing it.  So coders do what we do best and find a way to make the computer do it for us. There are two tools which I use on a regular basis when I'm working on a project.  while these tools do not work perfectly they do cut down the amount of work it takes to get good project documentation. The first step and probably the most useful to a coder is XML comments.  These are the comments above a method that are used to generate the handy intelisense comments.  One of the first code practices I believe you should implement is providing XML comments for every method and class.  I know you're saying great that just doubles my work load but not quite. Roland Weigelt has come to the rescue by creating a tool he calls GhostDoc.  GhostDoc is a plug in for Visual Studio that generates XML comments for you.  It uses some basic configurable rules to determine what the comment should be.  If you have a standard naming scheme for your methods and classes you can create rules to generate the comments you want.  I'd like to take a disclaimer here and say you should not just download GhostDoc and comment everything with the default comments.  While it works good it does not work great and sometimes requires some editing, however, you can eliminate most of this by creating custom rules. 1: /// <summary> 2: /// Gets the ghost doc URL. 3: /// </summary> 4: /// <param name="peram1">The peram1.</param> 5: /// <returns>URL to download GhostDoc</returns> 6: public string GetGhostDocURL(int peram1) 7: { 8: return @"http://www.roland-weigelt.de/ghostdoc/legalStuff.htm"; 9: }   The next tool came in very handy when I was still in school and I was required to create documentation for every project that I did.  I have always used XML comments because I often reuse libraries and I hated going back to figure out what a method I had written 2 years earlier did. The tool that will save you time when creating documentation is NDoc.  It is an open source project that looks at your XML comments in your code and creates .cfm help files as well as MSDN styled web pages.  The styles can be customized to fit your companies page or to simply put you logo in the corner.  This is by no means a be all end all of documentation generation but it gives you a good boiler plate. NDoc can be downloading here. The use of these two tools should make the documentation process a  little less painful for you and if not you can always hire an intern to do it for you. Posted Jan 03 2008, 02:01 PM by Matthew M. Osborn Filed under: Code Tips & Tricks