Custom Dropdown

The functionality of our drop-down will mimic that of a regular dropdown box with one exception. Since we can not style the scrollbar, our drop-down will never display one. Instead, it will just keep expanding as you add new links.

HTML
To start off with, our select needs a few different elements to work properly. First off, we need a container that will hold our select. We will also require a list of elements that we want to appear when you click the drop-down. Finally, we need a default element to hold the current selected item and an arrow to signify that we can click on it to display more options. I’ve assigned the classes and Id’s to the elements as necessary. clair-select-active is the default item that will be displayed as well as what is displayed when an element is clicked on.

<div class="clair-select-container">
  <div class="clair-select">
    <div id="clair-select-active">Where My.Feet Have Been</div>
    <ul class="clair-select-links">
      <li><a href="#">Nookish</a></li>
      <li><a href="#">Orange Pine Co</a></li>
      <li><a href="#">Where My.Feet Have Been</a></li>
      <li><a href="#">Your Website</a></li>
    </ul>
  </div>
</div>

CSS
Before we get to the clair specific styles, these are the default ones applied to the entire page:

body{
  font-family: Arial, sans-serif; 
  font-weight: normal;
  font-size: 14pt; 
  background-image: url('bg.png'); 
  margin: 0px;
}
a {
  color: #CCC;
  font-weight: bold;
  text-decoration: none;
}

The first style we get is the clair-select and the clair-select-container These style our entire select container.

.clair-select-container{
  position: relative;
  padding: 10px 0px;
  margin: 0px 0px 40px;
}
.clair-select {
  background-color: #000; 
  color: #CCC;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -o-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
  padding: 10px 12px 5px;
  font-size: 14px;
  display: inline-block;
  border: solid #555; 
  border-width: 1px 0px 0px 1px;
  width: 230px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.7;
  filter: alpha(opacity = 70);
  position: absolute;
  z-index: 2;
}

The purpose of clair-select-container is to make sure when we expand our select dropdown it doesn’t push elements out of the way. Instead of floats nicely above them, and our slight opacity setting will display a faint outline of what it’s coverting.

There is a lot of vendor specific styling going on in clair-select, but the only one that I think warrants explanation is box-sizing and filter.

• box-sizing: is a CSS3 spec that allows us to change the way that the browser interprets the “box-model” I’ll have to do another post to fully explain the box-model, but essentially it is the difference between including padding and border sizes within the “width” element, or adding it on afterwards. This forces Firefox to render the box-model the way Internet Explorer would ¹.
• filter: is a Microsoft proprietary spec that allows us to use a number of IE only effects. The particular effect I am utilizing is alpha-blending which allows us to change the opacity of the element. I’ve turned the opacity done just a little so that things are still readable, while allowing us to see the background. This has the added benefit of a neat visual effect whereby it looks like our element is slightly inset.

The next style we’re going to add is that of the active element. All we do here is add the arrow as a background image and position it to appear on the right side of the element.

#clair-select-active{
  background-image: url('down.png'); 
  background-repeat: no-repeat;
  background-position: right;
}

Finally, we’re going to style all the links. Nothing too fancy here. We’re just getting rid of bullets, spacing everything out a little and treating the anchor tags as block elements within our li’s.

.clair-select-links {
  margin: 0px; 
  padding: 5px 0px 0px;
  display: none;
}
.clair-select-links li{
  list-style: none;
  padding: 1px;
  margin: 0px;
  overflow: hidden;
}
.clair-select-links li a{
  font-weight: normal; 
  display: block;
  padding: 5px;
  margin: 0px;
}
.clair-select-links li a:hover{
  background-color: #282828;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  color: #DDD;
}

JavaScript
To add functionality to our drop-down we need a bit of JavaScript. I’m utilizing jQuery, but your own JavaScript library should have similar functions. We need to add two kinds of functionality.

1. We need to switch between minimized and maximized states whenever a user clicks on the clair-select-active element.
2. We need to switch to minimized and populate clair-select-active with the text from the menu item

$(document).ready(function(e) {
  // This is just for cross-browser prettiness
  $('#clair-select-active').css('cursor','pointer');
 
  // This will toggle everything as necessary
  $('#clair-select-active').click(function(e) {
    if($('.clair-select-links').css('display') == 'block') {
      $('.clair-select-links').slideUp(); 
    }
    else {
      $('.clair-select-links').slideDown();
    }
  });
 
  // This will populate clair-select-active with whatever you click on
  $('.clair-select-links a').click(function(e) {
    e.preventDefault(); 
    $('#clair-select-active').html($(this).html()); 
    $('.clair-select-links').slideUp(); 
  });
});

And that’s it, you’ve built a custom select drop-down. With a little JavaScript trickery, we can even go so far as to include it within forms. We’d just need a hidden form element and then when we populate clair-select-active we would also populate the value attribute of our form element.

This solution works in the following scenarios:

• IE 7+
• Firefox 3.5+
• Chrome 3+
• Opera 10+

You can download all the files used in this tutorial here: Custom Select Files

At some point in your web programming or web design career you will inevitably encounter the dreaded file upload “utility”. This piece of crap, is only present to allow users to select a file on their machine and eventually transfer it to your servers. Of course, this is a vital piece now, but perhaps at the time it was something that was easily overlooked. After all, at a time when your ISP speeds were approaching the 14.4kbps mark, uploading files was really something only the computer geeks did.

Now however, with profile pictures, online resumes, cloud storage and so much more, the file upload feature is front and center. Some places have gone so far as to eliminate the default HTML object and instead go with a Flash equivalent. This doesn’t really fix the issue, it’s like me saying “oh your computer doesn’t work? Here, use my iPad” ¹ It’s just a bypass. We need to fix this now! It’s already too late, we’re just playing catch up.

Understanding the Process
File uploading is one of those features that, if you’re unlucky, you’ll have to design a layout around. That’s because, for some reason, every browser has decided that the File upload object is completely immune to CSS. No amount of styling can ever achieve what you want. It will always look like ass.

File upload in Firefox and IE

There is no easy way to style it, there is no way to replace it (unless you use flash, but that’s a whole different issue) and the only way to get around it is to hide it or integrate it directly into your design. There is absolutely no way to pretty it up. You can’t adjust the size of the button or the size of the input box. You are essentially stuck, with what you see. No way around it. Or is there?

Short of changing your entire design to work with default form elements (euych!) the only way to fix the file upload feature is to hide it completely. See, because we can still apply some style features to an encapsulating element ². So we could technically just hide the entire form field, and absolutely position it over our custom designed field. If we do it all right (we WILL have to use either a custom IE stylesheet or a bunch of hacks) we can make it look like our pretty file upload field is actually doing the work!

The Code
The code for this is primarily CSS with some JavaScript sprinkled in to make sure that everything is positioned where it should be. I am utilizing the jQuery library for a lot of this simply because I use it in a lot of my projects. If you use any other libraries, they should all have equivalent methods and if they don’t, you should ditch them and switch to something else. If you are trying to follow along in straight JavaScript good luck. One of the primary reasons I work with a JavaScript library is because of cross browser inconsistencies. With a library, I can be sure that someone has gone through the painstaking task of setting up different kinds of math and implementation for the different browsers.

<html>
<head>
  <title>File Upload</title>
  <style type="text/css">
 
  </style>
</head>
<body>
<div id="fake-file">
  <input type="text" id="fake-file-title" name="fake_file_title" value="">
  <button>Browse</button>
</div>
<div id="file-constraint">
  <input type="file" id="real-file">
</div>
 
</body>
</html>

The CSS below is what we will be using to style our new input fields.

#fake-file input {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 2px;
  }
  #fake-file button {
    -moz-border-radius: 3px; 
    border: 1px solid #555; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px;
    padding: 1px 8px;
    background-color: #FFF;
  }

Now it’s as simple as adding some positioning values to our file-constraint field. We will also alter the z-index and position it higher vertically than our fake file upload. Then we can simply utilize some JavaScript to make things work like it should.

#file-constraint {
position: absolute; 
top: 0px; 
left: 0px;
z-index: 2;
display: none;
}

Bam instant hidden. Based on the position of your actual fake file field the top/left attributes will obviously change. The JavaScript is just as simple. I am utilizing jQuery to hook in to the onChange event for the real-file field, but it’s not necessary. You can do the same without a library. I just prefer jQuery because it means I can target all browsers the exact same way.

$('#real-file').change(function(e) {
var str = $(this).val(); 
str = str.split('\\')[str.length-1]; 
$('#fake-file-title').val(str);
});

Basically we get the value of the file upload field. In Firefox this is just the name of the file, while in IE it contains the complete path to the file. I prefer stripping out the path, but that is up to you. Basically the value from the real file field is just assigned to the fake file field.

Working with file uploads are a hassle and this really only covers a portion of the client-side. There are still many things to take into account such as temporary file locations, file permissions, fake-ajax / standard uploading etc. This tutorial isn’t meant to be a complete compendium of all things file uploading, but merely to point out some annoying UI inconsistencies.

The Vision
I wanted to create a completely self contained Website IM system. Apart from an installation file that would handle the database setup, I wanted developers to be able to copy a few lines of code into their current websites and have the client up and running. It would consist of a little bar along the bottom of the screen that would allow the user to easily keep track of their contacts as well as any open conversations. From the beginning the idea was the integration with a website had to be simple. If I ever felt the need to include it in a website I was developing, I didn’t want the hassle of actually integrating it. I wanted to be able to say something like swim_ui(); and have it take care of everything else. I knew it wouldn’t be THAT simple, but simplicity was something I was aiming for. Here are a few examples of what I expected the app to look like.

Refining
Once I had established a rough look to the IM client I took a moment to re-evaluate the different elements involved. It is something, that as a designer, I find essential to do. I had to make absolutely sure that every element in the prototype was required 100%. If it could do without, it was useless and removed. The reason was simple. I didn’t want a massive file included with every page. It would become a problem as websites grew.  Even the use of images was something I didn’t want to get in to. As I said before, my motto with this was “If it could do without, it was useless” and there was no room for useless elements.

The Static Mockup
This is another step that I absolutely have to go through. Before I start adding the dynamic PHP and even Javascript, I build a completely static version of what I want to eventually build. For one thing it lets me re-evaluate everything in the design, and when deadlines start coming up, it’s easy to find things that will give you problems later on. As well, actually having a finished product really boosts your morale and makes you want to work more. The static mockup was very simple. Even though I eliminated the chat taskbar, you’ll notice (or maybe not, since the screenshot is rather hard to read) I left the chat taskbar text in place. This is because that even though we won’t have a physical task bar, it will still exist in our code. This lets us position things properly.

<div class="im-bar">
	<span class="task" id="'user-id'">
		<div class="convo">
			<img src="/icon/cancel.png" id="close-win" alt="Cancel">
			<span class="system">You have entered a conversation with Name</span>
			<textarea name="message" id="message"></textarea>
		</div>
		<div class="win" name="Name">Name</div>
	</span>
	<div class="more">
		<div class="user-info">
			Angelo R. 
			<span><img src="/icon/bullet_green.png" alt="Online" id="status"></span>
		</div>
		<div class="contacts">
			<span id="cname1" name="Name">
				<img src="/icon/user.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name</li>
					<li class="status">Status</li>
				</ul>
			</span>
			<span id="cname2" name="Name 2">
				<img src="/icon/user_gray.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name 2</li>
					<li class="status">Status</li>
				</ul>
			</span>
			<span id="cname3" name="Name 3">
				<img src="/icon/user_gray.png" id="cname-dp" alt="Username">
				<ul>
					<li class="name">Name 3</li>
					<li class="status">Status</li>
				</ul>
			</span>
		</div>
		<div class="bottom-bar">
			<img src="/icon/add.png" id="add" alt="Add User">
			<a href="#">Settings</a>
		</div>
	</div>
	<div class="info">
		<img src="/icon/bullet_green.png" alt="Online" align="top">Online 
		<span><img src="/icon/bullet_arrow_up.png" alt="More"></span>
	</div>
</div>

As you can see I’ve tried to keep the code as self explanatory as possible. It’s very simple HTML without the use of Tables or any inline CSS. This was to ensure that even skinning the SWIM system would be as simple as editing a single file.

The CSS for this file is where things will get a lot more confusing. Because of the fact that this will be included in your website, I had to ensure that my css wouldn’t overwrite any of your css. So everything is explicitly stated. When I wanted to style the .info class, I pointed to it through it’s full “path” of .im-bar .info This was to ensure that only that element would get skinned. The CSS is a little advanced, and has an added line for webkit based browers that the gecko ones won’t see. This is also only going to look exactly as planned in those browsers. Sorry Trident users, I’ll be updating this code once I sort out a few more bugs.

.im-bar{
	position: absolute; 
	right: 20px; 
	bottom: 10px; 
	z-index: 100;
	font-family: "Arial", sans-serif;
	font-size: 0.8em;
	color: #555;
}	
.im-bar a{
	color: #333;
	font-weight: bold; 
	text-decoration: none;
}
	.im-bar a:hover{
	text-decoration: underline;
}
.im-bar .info, .im-bar .win{
	display: inline;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border: 1px solid #EFEFEF;
	width: 100px;
	padding: 5px 10px 5px 5px;
	background-color: #F0F0F0;
	margin: 0px 6px;
	cursor: default;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .win{
	width: reset;
}	
.im-bar .info span{
	float: right;
}
.im-bar .info:hover, .im-bar .win:hover{
	background-color: #E7E7E7;
}
.im-bar .more{
	display: none; 
	border: 1px solid #EFEFEF;
	width: 200px;
	height: 350px;
	position: absolute; 
	right: 0px;
	bottom: 30px;
	background-color: #F0F0F0;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	padding: 10px;
	padding: 0px;
	z-index: 100;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .more .contacts{
	background-color: #FFF;
	height: 86%;
	width: 100%;
}
.im-bar .more .contacts span{
	display: block; 
	margin: 0px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #F0F0F0;
	text-align: left;
}
.im-bar .more .contacts span:hover{
	background-color: #FAFAFA;
}
.im-bar .more .contacts span img{
	float: right;
	padding: 3px; 
	width: 40px; 
	height: 40px;
	border: 1px solid #F0F0F0;
	margin: 2px;
}
.im-bar .more .contacts span ul{
	padding: 10px;
	margin: 0px;
}
.im-bar .more .contacts span ul li{
	list-style: none;
	cursor: default;
}
.im-bar .more .contacts span ul li.status{
	color: #CCC; 
	font-style: italic;
}
.im-bar .more .user-info,.im-bar .more .bottom-bar{
	padding: 4px;
}
.im-bar .more .user-info span,.im-bar .more .bottom-bar a{
	float: right;
}
.im-bar .task .convo{
	display: none; 
	width: 250px;
	height: 300px;
	position: absolute; 
	bottom: 30px; 
	right: 0px;
	display: block;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border: 2px solid #EFEFEF;
	background-color: #FFF;
	padding: 10px;
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.9);
}
.im-bar .task .convo #close-win{
	position: relative; 
	bottom: 20px; 
	left: 250px;
	cursor: pointer;
}
.im-bar .task .convo #message{
	width: 100%;
	font-family: "Arial", sans-serif;
	font-size: 1em;
	color: #555;
	height: 60px;
}
.im-bar .system{
	color: #CCC; 
	font-style: italic;
	height: 75%;
	display: block;
}
.im-bar .task .convo .text{
	font-style: normal;
	height: 75%;
	display: block;
	overflow: auto;
}
.im-bar .task .convo .text p{
	padding: 0px;
	margin: 2px;
}

You’ll notice that everything in the stylesheet is actually really simple. Other than a few pieces such as the overflow attribute in the .im-bar .task .convo .text selector which just adds a scrollbar to the chat window if necessary. The z-indexes are also used to place windows on top of each other (obviously) but keep things in the high 90′s. This is so that incase you have an z-indexed elements on your website, this will hopefully not interfere.

Finally, here’s a screenshot of what our HTML mockup looks like. Stay tuned for the next part in which we add jQuery into the mix to really get our Prototype up and running!

SWIM - Minimized Convo Windows with Open Chat Window

SWIM - Open conversation window