Jon
Rohan

I recently saw an article on CSS text rotation on the internets and decided to try my own experiement.

What I wanted to make was a clock. The basis of this project is using the -webkit-transform:rotate(0deg); css property. This allows you to rotate any object 360 degrees. So I began to wonder, if I have a line, and I setup a javascript timer can I rotate it every second?

The design is inspired by @eston‘s Sarai desktop.

This clock won’t work in IE. There is an IE rotate property, but it only rotates at 0, 90, 180, 270. So that won’t work for this clock. Here’s the IE rotate property anyways

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

So How did I do it?

I started with an external div for the clock. Giving it a width and height of 100px and position relative (so I can position the clock hands)

#clock {
  margin: 25px;
  float: left;
  width: 100px;
  height: 100px;
  position: relative;
}

#sec {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  border-top:50px solid #353535;
  height:30px;
  left: 49px;
  margin:10px 0;
  position:absolute;
  top: 0;
  width:2px;
 }

#min {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-top:50px solid #353535;
  height:30px;
  position: absolute;
  left: 48px;
  top: 0;
  margin:10px 0;
  width:4px;
 }

#hour {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  border-top:35px solid #353535;
  height:25px;
  left:47px;
  margin:20px 0;
  position:absolute;
  top:0;
  width:5px;
}

The tick marks are also the lines, with a top and bottom border rotated 180 degrees.

The javascript is a simple timer which updates the degrees of each hand based on the time.

(function(){
  var tick = function() {
    var now = new Date();
    $("#sec").css({"-moz-transform":"rotate(" + (now.getSeconds() * 6) + "deg)",
    "-webkit-transform":"rotate(" + (now.getSeconds() * 6) + "deg)"});
    $("#min").css({"-moz-transform":"rotate(" + (now.getMinutes() * 6) + "deg)",
    "-webkit-transform":"rotate(" + (now.getMinutes() * 6) + "deg)"});
    $("#hour").css({"-moz-transform":"rotate(" + (now.getHours() * 30) + "deg)",
     "-webkit-transform":"rotate(" + (now.getHours() * 30) + "deg)"});
  };
  setInterval(tick,1000);
})();

If you enjoyed reading this post, check out these posts Using CSS3′s :target pseudo-class to Make a Slideshow, CSS 3 @font-face.

During my career, I’ve run into a few bookmarklets that are useful for web development, and I’ve created a couple.

The Fold Bookmarklet

We’ve all been there, had a product manager obsessed with “The Fold” (where the bottom of the browser ends, and you must start scrolling). I had one, and eventually made this bookmarklet to insert a fold line at 768px.

Disable Links Bookmarklet

This bookmark came to life because I kept trying to mock up a page slightly using firebug, and would accidentally click a link then loose all my changes.

Firebug Lite Bookmarklet

I didn’t create this one, but it’s awesome! For people who can’t use firebug, you can use this bookmarklet and lite version of firebug will be inserted into the page.

If you enjoyed reading this post, check out these posts Submit to Digg Bookmarklet, CSS Clear Fixes.

In an effort to practice my design skills and hone them I decided to start a series of design explorations. The first being Digg.com. These explorations are how I would redesign the website if I had complete control.

THESE DESIGNS ARE IN NO WAY ASSOCIATED WITH DIGG, THEY ARE JUST EXPLORATIONS

The Design

This design exploration is a logged in version of the digg homepage. Let me explain my decisions.

Layout

The first thing I wanted to pick was a layout. I choose a three column layout, for a few reasons. I felt like the digg stream should be closer to the top, which gives it more focus IMO. Also I wanted an importance order, the first being navigation, then content and last upcoming content. This moves the extra links and stuff from the top to the left and right.

Color

I used the same color pallet that digg has today, but I use green as an emphasis, instead of blue. I really just choose the green cause I liked it.

Content

The left column (primary column) contains the navigation for moving around the categories, the digg logo, and a large submit new button. I felt like the Submit new button had to be the most distinct call to action on the page. This is digg’s bread and butter. ;) So I made it large and orange. The placement of the logo I felt should be at eye level with the other columns, because it decreased the vertical space. The logo itself was my attempts to make something new and fresh feeling.

The main column contains only the digg stories. I purposfully left out, the header “All, News, Videos, & Images” because I didn’t want anything getting in the way of the stories, I felt like the indicated category on the left was enough to let the user know where they are. The main column is fluid, I did this mainly because digg’s site does it now. But I like the feeling of the stories not being restricted.

The right column, contains these things as I veiw it; Search, User, Personalized Feeds(Friends, Upcoming) and Top Stories. I see the right column as the stream that feeds the main column. These are the specialized stories that haven’t made it yet, but the digg algorithm finds them important. And because the user’s photo and name are there, the user can resonably assume that those stories are for him.

What I missed

There are some things I skipped cause they’ll take more thought, and some that I left out because this is a mock, and I don’t see a change in behavior.

The skipped points are sub-categories and sorting by time or type. My first instinct was to place these things at the top of the river of stories. But I soon realized that this added garbage to the river, and could cloud the stories. I also didn’t place the paginator, because I can’t decide on wheather the pagination should be outside the white box, or if digg should adopt a “more” method similar to twitter’s stream.

Some of the things I left out just because I see no change; I feel like the items around the digg story are not gonna change much, like the icons and I think the username can/should stay with the story. One thing I do feel unecessary is in the digg shade today, it says “100 diggs” I think the diggs is unecessary. Removing it gives the count more space, and highlights the fact that you can digg it “+ digg”

This design is far from perfect, and I’ll be the first to admit that, but I think I demonstrated some of the main design points I feel could make a solid re-design of Digg.com.

And Here’s the Result

If you enjoyed reading this post, check out this post Submit to Digg Bookmarklet.

There is a common problem in front end engineering where, when you float an element it is actually removed from it’s parents’ flow. This can cause the elements below the floating element to run into the floating elements. Like below. The green box is floating and it’s parent has the red border. The blue box is below the red border box.

There are a few solutions to this, but I have heard of a new solution that I don’t think is widely published. overflow:hidden;

First lets go through the other solutions.

clear:both

This is the most common that I’ve found, and the one I’ve used the most. The style in this code is inline, but typically you can just create a class called .clear and apply these styles.

<div style="border:1px solid red;">
  <div style="background-color:green;float:left;width:20px;height:20px;"></div>
  <div style="clear:both;"></div>
</div>
<div style="background-color:blue;width:50px;height:50px;"></div>   

In this example you place another element at the end of the child elements in the red border box. This last element gets applied the style clear:both which disallows any floating elements on either side of it.

This can run into problems if you have multi-column layouts this can clear the content in the other columns

clearfix hack

This is essentially taking the previous method and adding to it. I don’t use this very often.

.clearfix :after  {
  content :  "." ; 
  display :  block ; 
  clear :  both ; 
  visibility :  hidden ; 
  line-height :  0 ; 
  height :  0 ; 
} 
 
.clearfix  { 
  display :  inline-block ; 
} 
 
html[ xmlns]  .clearfix  { 
  display :  block ; 
} 
 
*  html .clearfix  { 
  height :  1 % ; 
}

This method works but it feels like a lot of overhead, and now my CSS is non-standard.

overflow:hidden

In this method you apply overflow:hidden to the parent element which is the red border box. And that’s it!

<div style="border:1px solid red;overflow:hidden;">  
  <div style="background-color:green;float:left;width:20px;height:20px;"></div>
</div>
<div style="background-color:blue;width:50px;height:50px;"></div> 

Pretty simple! And it doesn’t require extra div tags. I’ve tested this in IE7, Firefox, Safari, and Chrome works in all.

If you enjoyed reading this post, check out these posts Creating Triangles in CSS, Web Development Bookmarklets.

I often work on sites that call for “ghost text boxes”. This is when a text box is already populated with words when the page loads. And then when the textbox is given focus the text goes away. Like This

I’ve seen a few ways to do this, explicitly writing a function that switches text, but this is too specific. This means that I’ll need to re-write this for every ghost text box on the site. Some people will add the functions in the onfocus and onblur attributes on the <input> tag. Same deal…

So I wrote this plugin to make my life simpler. How it works is, anytime you want a textbox to have ghost text you give it a placeholder attribute and put the ghost text inside. like so

<input type="text" class="ghost_text" placeholder="This is Ghost Text"/>

Then I just setup the ghost text globally.

$(".ghost_text").ghostText();

And we’re done! That was easy.

Here’s the plugin. It’s may not be perfect, and there are most likely hundreds of these on the net. But here is my implementation.

/* Copyright (c) 2009 Jon Rohan (http://dinnermint.org)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.0.0
 * Written with jQuery 1.3.2
 */
(function($){$.fn.ghostText = function() {
  return this.each(function(){
    var text = $(this).attr("placeholder");
    if(text!=""&&($(this).val()==""||$(this).val()==text)) {
      $(this).addClass("disabled");
      $(this).val(text);
      $(this).focus(function(){
        $(this).removeClass("disabled");
        if($(this).val()==text) {
          $(this).val("");
        }
      });
      $(this).blur(function(){
        if($(this).val()=="") {
          $(this).val(text);
          $(this).addClass("disabled");
        }
      });
    }
  });
};})(jQuery)

If you enjoyed reading this post, check out this post jQuery Auto-growing Textarea Plugin.