Creating Nice '|' Divided Menus with CSS

it is common for websites (this one included) to have the ubiquitous '|' as a link divider, here is a neat way to do it with pure css

To get this menu:

You dont need to actually put in the '|' character, you can do it with just the following advanced css selectors:
<style type="text/css">
	ul#nav li{
		float:left; 
		margin-right:20px;
	}
	
	ul#nav li:after{
		content:'|';
		margin-left:20px;
	}
	
	ul#nav > li:last-child:after{
		content:'';	
		margin-left:0;
	}
</style>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Other Crap</a></li>
</ul>

I realize it's not exactly space-saving, but it is a cool trick that could be adapted to all sorts of possible situations.

<i> is for image, sprite image

a slightly modified, very simple approach to css sprites

Css Sprites are nothing new, it is a way to take one image and use it for everything for faster page loads; pretty simple. On my latest project, I came across a simple way to to employ these sprites in a logical manner; this method even makes for intellisense images in Visual Studio.

prepare your sprites

The first thing to do, is to get your sprites together in a zip file. Basically gather up all the pictures and icons you will be using and put them into a single folder, then zip them up. Here is the zip I am using for the demo demo_sprite.zip (14.12 kb). Then simply go to Project Fondue set up your settings and process. For the purposes of this method, set the 'Css Prefix' to 'i' and clear the other 'Class Output option' fields. Now you have your css, and you can download the image that Fondue produced, which is the image directly to the left in this post. The tough work is alreaday done, now you are ready to implement it.

the <i> tag

As stated in the title, I chose to use the <i> tag. This tag was originally used for italics, but that practice is not always followed, and most people use CSS reset anyway, so it is up to us to choose what we want it to mean... and I chose 'image' (the img tag wont work as it rendered the ugly 'image not found' image in most browsers). So for this to work, you are going to have to first reset the <i> tag to nothing in css, then set it's background to the sprite image; I will assume you are using your own css reset, and my sprite to the right is called sprites.png.:
i {background:url(Images/sprites.png) no-repeat; 
   display:inline-block; width:24px; height:24px; }

/* code produced by Fondue */
i.danger { background-position: 0 0; } 
i.download { background-position: 0 -74px; } 
i.error { background-position: 0 -148px; } 
i.folder { background-position: 0 -222px; } 
i.reload { background-position: 0 -296px; } 
i.success { background-position: 0 -370px; } 
i.trash { background-position: 0 -444px; } 
i.warning { background-position: 0 -518px; } 

I am setting the default height/width to 24px because that is the size of my icons, if all of your are not the same, you can either set a default size here, or size every one indivually; I recommend using the most common size as the default for the smallest css.

*If you do have images of different sizes, be sure to set their height/width in their corresponding css classes.

use it

Now you are all set, the html:

<i class="danger"></i>


Produces and:

<i class="download"></i>


Produces and so on. Plus, if you are using visual studio, you will notice since these are css classes, they pop up in your intellisense, so it is easy to push out images on the fly in code.

Using html label tags with asp.net

I am amazed to see how many asp.net programmer do not use this

The label tag is extremely useful and easy to use, it boggles my mind why more Asp.Net devs do not use it. Remember, I am talking about the html label tag, not the asp.net asp:label which produces a span.

what does it do?

Many of you probably know what it does, but many may not. Quite simply, it makes bunch of text clickable for the related form element. For example, here I am not using a label:
Click Me:

As you can see, you need to click on the textbox itself to get focus on it, clicking on 'Click Me' does nothing. Below, I am using a label tag around the title:

how do I use it?

The syntax is simple! For regular html, this is all you need to do:

<h5><label for="txt">Click Me:</label></h5>
<input id="txt" type="text" />


For asp.net markup, it's a little more, but still incredibly simple:

<h5><label for="<%= txt.ClientID %>"></label></h5>
<asp:TextBox ID="txt" runat="server" />


Notice that some inline magic had to be done to account for the sometimes crazy nested control names that asp.net can dish out. This works for any kind of form element, it's great. Some asp.net controls like CheckBox, RadioButton, etc. employ it with the 'Text' property, but controls like DropDownList, TextBox, etc. do not.

so why aren't you using it?

Make your users lives just a little easier and go wrap all of you form element titles in label tags, it's stupid not to.

EDIT: As Frederik pointed out below, you can use the asp:label if you set the AssociatedControlID which will work just as well. I just prefer to use the html label tag as it is less markup; thanks Frederik!

CSS image map with rollovers :: map of the United States

A fully interactive image map of the united states using pure CSS; great rollover technique

I had actually written this in 2006, but I saw this technique used recently and apparently it's a 'new' technique. You can see this example here. Really the coding is pretty simple, though a little bit tedious.

First thing is to simply make a list of the items you want in the image map. I use dl->dt/dd here instead of a ul->li which would work just as well. Notice my dt element is just 'us', then I start with the states: 'al', 'ak', etc. Also notice that each dd has an 'img' id and each a holds an id and a span with the state name in it.
<dl id="imap">
   <dt><a id="us" href="#nogo" title="us"><span>United States</span></a></dt>
   <dd id="imgal">
     <a id="al" href="#al" title="Alabama"><span>Alabama </span></a>
   </dd>
   <dd id="imgak">
     <a id="ak" href="#ak" title="Alaska"><span>Alaska </span></a>
   </dd>
  ...
</dl>

Next we move on to the css, which is pretty simple to understand, it is just that getting the values is a pain. One of the most imporatant values is the position of the 'box' for each state. You can see if you look further into the css that all of these are relatively positioned in relation to the whole map - it is the upper-left corner of where the 'box' is. I say box because css only works in squares. It takes some planning, but most any shape can be achieved by overlapping squares, and that overlapping is controlled by z-index. Also you will see that the images are positioned negatively against the position so they sit int he right place. And finally, the height and width are just the height and width of the image.
/*ALABAMA*/
#imap #imgal { left:400px; top:220px; z-index:20; }
#imap a#al:hover { background:url(images/states/al.gif) -400px -220px; }
#imap a#al { width:45px; height:70px; }

Repeat this over and over, and you have a full 'image map' made with CSS only. Not the fastest method, but it works and is better than the old image map methods IMO.


Text Input Watermarks using Javascript (IE Compatible)

Simple way to add watermarks to your textboxes for a little flair in your input forms

I have always used the TextBoxWatermark control that is supplied with the AjaxControlToolkit which is very easy to use and I highly recommend it.  But recently I was asked to figure out a way without using 3rd party tools, hence in JavaScript.  At first I figured it was going to be simple, just clear the text when you click on the box and maybe change the background color.  Simple, that works.   Thats when I ran into my next problem.

 

I wanted a textbox that was forr passwords, it would start out and say 'password' but then when you clicked on it, that would disappear and it would become a type="password" box (display text as: ******).  It worked flawlessly! ...in non-crappy browsers.  IE7 dumped all over my dreams yet again and left me with a Javascript error.  Turns out you can't change the type property in IE7 (apparently it works in IE6???) which is completely stupid.

 

So, I did some good old googling which brought me here to find out that in order to change type, you now have to make an entire new object and swap it out with the old one.  So after that, it works, but my focus is all screwed up: I click on the blank, the password text disappears, but the cursor is not in the textbox I just clicked?!  That brought me here which showed me a crazy way to reset focus on a lost object:

window.tempObject = newObject;
   setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);

Now everything seems to work just fine.  BUT, they aren't.  For one thing, I had had an onblur statement in my textbox originally (not in the example, but for discussion purposes) and since the new object did not have an onblur, I had to make sure to re-add that back in.  Also, the same loss goes for CSS class, but that might want to change, so I added a new field into the function to take into account a new CSS class.  If it is left blank, it will inherit the old CSS class if there is one, or simply have no class like Britney Spears. 

 

Ok, so I *thought* that would be easy, but IE comes back again to spite me.  For most browsers, you can set Object.setAttribute("onblur", "JSmethod") but IE decides that isn't good enough, so you have to to this Object.onblur = function(){js_function(god, damnit, ie);}; (from this thread).  Ok, now that we have that fixed, we can look at the CSS class.  It's mostly the same, but this is yet another IE specific problem.  You need to include two different declarations: Object.setAttribute("class", "css_class"); for most browsers and Object.setAttribute("className", "css_class"); for IE.  This time the IE fix/hack will not work for cross-browser compatibility.  So here is the finished JS:

 

[code:js]

 function makePassword(oldObject, newClass)
{
    //newclass is the new css class to pass to the textbox
    //otherwise leave it blank ('') to inherit it's old class
    //or if there isn't one, have no class
    var newObject = document.createElement('input');
    //only switched to password if the original text was password
    newObject.type = (oldObject.value == 'password')?'password':'text';
    if(oldObject.id) newObject.id = oldObject.id;
    /// this decided whether to keep the old class or get a new one
    var cssClass = (oldObject.className && newClass.length < 1)?oldObject.className:newClass;
    newObject.setAttribute('className', cssClass);// for IE
    newObject.setAttribute('class', cssClass);// for others (these are both needed)
    //the following is hard coded to add onblur functionality to the control
    //newObject.setAttribute('onblur', 'blurred(this)');// this would work if it wasn't for IE
    newObject.onblur = function(){blurred(this,newClass);}; // because of IE
    oldObject.parentNode.replaceChild(newObject,oldObject);//this is necessary because of IE
    //this is needed since a focus() will only work the second time since it happens too 'soon'
    window.tempObject = newObject;
    setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);
}

[/code]

 

Remember though that you will have to validate that the original values are not in the textboxes when the user submits, as they will not be empty initially.  Here is a fully working example to mess with, it shows how to use it both for a simple watermark/mask and also with a password field change.  It also includes how to add javascript function calls and deal with changing (or persistent) css:


 

'Auto-tabbing' to next TextBox with asp.net and Javascript

If you have a form that limits characters entered into a textfield, using this simple approach you can automatically jump to the next control, making it easy for your user

Say you have a zip code field that takes in 5 numbers, next you have a state dropdown.  Your user should be able to type in the 5 digit zip code, then boom, the focus is automatically shifts to the dropdown.  It is very simple to implement.  It just requires the following JS function:

 

function next(currentControl, maxLength, nextControl)
   {
    if(document.getElementById(currentControl).value.length >= maxLength)
    document.getElementById(nextControl).focus();
  }

 

and then just call this from a textbox in html:

<input id="Text1" onkeyup="next('Text1', '5', 'Text2')" type="text" />

Or if you are using an asp.net TextBox control:

txt1.Attributes.Add("onkeyup", "next('txt1','5','txt2')");

it's just that easy... here is an example using both asp.net and just html:



Rounded Text Box Inputs - Slick looking and customizable

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

 I saw some of these rounded textboxes somewhere (?) and I though they looked pretty good.  Even though they don't really go with any of my sites, I wanted to know how they were done.  I figured the easiest way to get them working without making a ton of images would be to use CSS sliding doors technique I picked up from http://alistapart.com/ a while back (awesome site!). 

 

The finished product looks pretty good, uses strictly html and css (asp controls work great too) and really couldn't get much easier.  It works for single-line textboxes as well as checkboxes.  You could easily take the concept to a multiline textbox if you just added some larger images.  The code is pretty self-explanatory, so I won't get into the details here.  I included the .png files so you can customize the colors if you want - just drop in the code and go.



Iconize Textlinks with CSS

This is a great way to add a little visibility to your users, it adds an icon next to your file links, showing them visually what it is

I take no credit at all for this, all the credit belongs to http://pooliestudios.com/projects/iconize/ 

 

This is a great tool - and very simple when you look at it I got rave reviews when I implemented this on our in-house web-based fileshare system at work.  Hopefully it can help you out too!

 

 

Sticky Footer using only css/html (works in IE)

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

For css, all you need is this:

* { margin: 0;}
html, body { height: 100%;}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push { height: 4em; /* .push must be the same height as .footer */}

And for html, this:

<body>

  <div class="wrapper"> 

    Put your content here

    <div class="push"></div>

  </div>

  <div class="footer">
    Footer Here

  </div>

</body>

All credit goes to http://ryanfait.com/sticky-footer/ - thanks this is great!

 

 

best javascript toggleDiv function ever

Everyone has a javascript toggleDiv function somewhere, but this is the cleanest one you will ever see

All this is is an expand and collapse of whatever you want it to expand/collapse - it is made for divisions with the 'block' declaration, but could also be used for inline elements if you simply changed it to 'inline' 

function toggleDiv(divid){
  var div = document.getElementById(divid);
  div.style.display = div.style.display == 'block' ? 'none' : 'block';}

Basically it is just a condensed if/then statement.  Keep in mind it will only work on the very first click if you already have 'display' set to 'block' or 'none' at first, otherwise it will take 2 clicks.  It is about as simple as it gets.