Recently I was creating a contact form for a client’s website. Due to the fact that the form was in a rather small area, I didn’t have very much room for the text and inputs. See my solution below.

Usually I would write the name of the input followed by the input like this:

First Name:

Since I didn’t have room for that I had to come up with a solution.

The first thing I thought was to add the name of the field as a value:

What I don’t like about that solution is that the user has to select the text manually, delete it, and then fill out the field. I wanted the text to disappear when the user clicked into the input. I looked around and figured it out; here’s how it looks / works finished:

All you need to do is add onfocus="this.value=''" to your input. So the code for this input looks like this:

Here’s one other similar technique that might come in handy. The following input selects the text on input, instead of clearing it.

Here’s the code for that technique:

I was coding a page the other day and needed to have a button that could refresh the webpage when pressed. Turns out jQuery can take care of this rather easily. Check out the demo below, and keep reading for the code.

View Demo

First hook your page to jQuery in the head of your page.

Then add the following code below that (still in the head of your document).

Hook your button up with the same id that you have in the above code.

That’s all there is to it!

Websites need to have the copyrights on them. Usually this is found in the footer of the site. As I was updating a client’s site the other day I noticed his copyright info was still 2009; so I updated it in the template, applied it to the pages, and re-uploaded everything to the live site.

One of the worst things you can do with your website is to not make updates once it’s live. Fresh content is the only thing that will keep your users AND search engines returning. One of the best ways to let users know that you never update your website (saaarcasm), is to have a copyright in the footer of your website from 2003. It really is a pain to have to go in at the first of every year to update all of your client’s websites though. Luckily, Javascript can save us. Using Javascript we can add a copyright to the webpage that will automatically update with the current year. Check out the demo, and then keep reading to grab the code.

View Demo

All you need to do is paste the following code right into the XHTML where you want the copyright to show up, Javascript does the rest!

In a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple of questions from some users.

1. Can you make a background behind individual Tweets?
2. Can you put the date on it’s own separate line?

As the case goes with a lot of things these days jQuery to the rescue! Check out the demo to see both of these things in action, and then continue reading to see how to accomplish these things with jQuery and download the source files.

View Demo

The jQuery and CSS code to make this happen came from Chris over at CSS-Tricks. I slimmed down and edited it to make it work for me. Here is a zip of the files used for the demo so you can download and edit it as you want.

Download Files

You’ll see in the head of the index page the jQuery which makes it work. The line you need to change is the following:

First replace the part I highlighted in Blue “ilz_” with your Twitter user name.

Next, replace “count=5″ with the number of tweets you want to show up on your page.

Other than that, you should be able to style the rest of the text, links, etc. as long as you know basic CSS. Enjoy!

Recently I was put in charge of creating a product slider for a client’s website. There would be four products shown at a time, with one new product being revealed each time as the slider moved from the right to the left. I figured there was a jQuery slider out there that I could manipulate for this, and after a little hunting I found one.

The actual slider and website I created it for isn’t live yet. I used the base slider I created and used a few Apple images to show the general idea in the demo. So check out the demo, and then keep reading to see the details.

View Demo

So the original code for this slider is jCarousel. I figured I would put up this demo to show how with a few modifications to the code you can create a useful product slider. You’ll notice how it’s created with an unordered list. I also showed how you can use rollover effects, and link each image to a webpage; which is obviously the point of the slider in the first place.

The slider has an autoplay feature. I added some code to the original jCarousel to make the slider go only one product at a time. This is in the head of the index.html file. The line “scroll: 1“. If you want it to scroll 2 items, change it to 2, and so on.

Now I admit the code here isn’t the prettiest, but as I mentioned this was created strictly for the demo, to show some of the possibilities. I’m going to provide all these files in a .zip file for download, in case you want to play around with the slider. Enjoy!

Download the Files

Using page anchors is a pretty basic web design technique. If you want to link to a certain part of a page you create an “Anchor” at that part of the page. This anchor is what you point your link at. You can link to an anchor on the current page, or to an anchor on a certain part of another page. Useful, but not all that exciting.

There is, however a quick way to make even the simple act of scrolling up and down a page more visually appealing. It’s called Smooth Scroll. Check out my demo to see this in action, and then keep reading to learn how to add Smooth Scroll to your website.

View Demo

So lets start with the basics. To add an anchor on your page add the following in the place that you want you page to scroll to.

Then to point your link at this anchor, use the following. (This is to point to an anchor on the same page as the link.)

In case you were wondering, the following is how to point at an anchor on a different page.

All you need for the Javascript Smooth Scroll effect is to link to the JS file, it does everything else for you.

Dowload Smooth Scroll Javascript

You’ll see the zip has all original files for the Smooth Scroll. Now I give credit where it’s due, this entire zip is from DezinerFolio. Make sure you check those guys out for some great freebies and code.

To link to the Javascript file, put the following in your head.

The javascript file is the only file in the zip that you need to use for the Smooth Scroll to work. Have fun, and if you want to an actual webpage that uses this effect, check out the website portfolio of my website.

Lots of people use Twitter. Love it or hate it, it’s true. I follow other people in the design industry to see what they’re up to. I use my Twitter page to post updates on things in my life, mostly design related.

One of the great things about Twitter is that you rarely ever go to the actual site. You can use a program like Tweetie or TweetDeck to send all your Tweets. Another great thing is the ability to embed your recent Tweets onto other websites. It’s a rather simple process, so check out my demo and then keep reading to learn how you can embed your Tweets on your page.

View Demo

Copy the above code and paste it right into your XHTML code on your webpage, (right in the body).

All you need to do is replace where I have “beantowndesign”. That is my Twitter user name, replace it with yours. The other thing you get to decide is how many of the most recent posts you want to show. Change the part where it says “count=1″ to however many Tweets you want to show up. For example, in the demo I decided to show my last 3 Tweets.

So that’s all there is to it.. how you style the text, links, and surrounding environment for the feed is up to you and your creativity.

On my portfolio website I have an About page, where I explain… who I am of course! So I have a picture of myself in the sidebar, but got the idea that it’d be nice to have the picture change randomly on page load. I looked around at a few different options. Some were Javascript, some were PHP. It wasn’t worth turning the page into a PHP page just for this effect, so I went with Javascript. There are a lot of different options, but here’s the one I went with.

I made a div to surround the image, with the class of “me-box”. I gave this div a border, so the images will all appear to have a border when they are loaded. Next comes the Javascript code. This is where you give the src to your images. This code is put right in the body of your page where you want the images to appear, not in he head tag. A quick little piece of code that got the job done exactly like I wanted!

See the random image loading in action.

Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

The first thing to get is the Dreamweaver plugin from the guys over at Kaosweaver. Here’s the link to the plugin. Once you download and install that, open up Dreamweaver and the page you want to apply the style switcher to. Under Commands, you’ll see Style Switcher Lite.

Click on that and this little box pops up.

This is where you set your day and night stylesheets, and set what time of day you want the sweets to switch. What you do in the stylesheets is up to you. You can change colors, background-images, the options are endless. For the effect I wanted, I changed the background images of two things.. the clouds and the buildings (Boston skyline), which floats in front of the clouds.

So there you have it, here are the two versions that you’ll see at BeantownDesign.com, depending on what time you’re looking at the website.

The other day I was cutting and coding a website for a bank. One feature that was in the header was the current date, which would update daily (duh). I know in a previous project I had done this with Javascipt, so I back-tracked and got the code I used before. Here is the code, which will print the date on your web page in the following format:
July 18, 2009

The first step is to link your XHTML page to the external Javascript page, which has the code which will make it all happen. Paste the code below in the Head of your page.

Link to external Javascript File

<script type="text/javascript" src="js/date.js"></script>

Next up is the make this Javascript page that you just linked to. Paste the following code inside a new javascipt page, and save it as “date.js” inside your “js” folder. You can of course use different names, just make sure you link them up correctly.

Here is the code for your Javascript File

// JavaScript Document

//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May",
"June","July","August","September","October","November",
"December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", "
+ d.getFullYear();
//---------------   END LOCALIZEABLE   ---------------

The last step is the put the following code in your XHTML file where you want the date to be written. The id="date" that you see is for the CSS styling of this text. You can rename or remove it if you are styling it differently.

Paste this inside your XHTML file

 <p id="date">
<script language="JavaScript" type="text/javascript" >
document.write(TODAY);</script></p>

So there it is.
You can view a live example here.

I also packed this up into a zip so you can download and have all the files; including the XHTML, CSS, and JS.
Download the zip here.