Posts Tagged ‘web design’

A new look

// October 17th, 2008 // No Comments » // Blog

I spent some time the last couple of days updating the theme to this blog. I decided to start completely from scratch in an attempt to achieve exactly what I am aiming for. At this point, it is still very much a work in progress, but the idea is to have this blog represent an actual timeline of my networked online presence.

The overall look and feel is somewhat inspired by comments from Jason @ 37signals regarding The Price is Right:

There’s really so much to learn from The Price is Right. Simplicity, experience, clarity, intuition, big type, fun, colors, tone, personality, democracy, audience participation, a little bit of chaos, humility, dings (you win) and buzzers (you lose), educating the consumer, etc. it’s quite a formula. Instead of reading that business book next week just watch the Price is Right instead. You’ll learn more and have a better time too.

Right now I have Twitter working inline. I’m finishing up getting links from del.icio.us in there too. From there, who knows. It’d be a lot simpler to just grab the sidebar widgets, but I wanted something different aesthetically.

Neater “other” field

// August 1st, 2008 // No Comments » // Blog

Do you think drop down select lists that have “Other” are made ugly with the necessary test field to capture the “Other” forced to sit right next to lit like this:

Well here is a slick alternative that makes use of Script.aculo.us:
Demo

Here’s the Javascript:


   function swapthem() {
	Effect.toggle('test1','blind')
   	Effect.toggle('test2','blind')
   }

   function pop() {

     len = document.f1.s1.length
     i = 0
     chosen = "none"

     for (i = 0; i < len; i++) {
       if (document.f1.s1[i].selected) {
         chosen = document.f1.s1[i].value
       }
     }
     if (chosen == "other") {
	  swapthem()
	 }
   }

And the HTML:


	<form name="f1"action="">
	  <div id="test1">
		<select name="s1" onChange = pop()>
		<option value="home" selected="selected">
                  Home
                </option>
		<option value="work">Work</option>
		<option value="mobile">Mobile</option>
		<option value="other">Other</option>
		</select>
	  </div>
	  <div id="test2" style='display:none;'>
		<input type="text" name="t1">
                <a href="javascript:swapthem()">
                   list
                </a>
   	  </div>
	</form>