input field restricting to numbers only

This page shows a technique for restricting the field to just numbers. The script also allows you to automatically jump to the next field if the user presses the decimal key.

Put this JavaScript to head tag in your HTML page

<script type="text/javascript">
<!--
function numbersonly(inputfield, e, dec) {
	var key;
	var keychar;
	if (window.event)
		key = window.event.keyCode;
	else if (e)
		key = e.which;
	else
		return true;
	keychar = String.fromCharCode(key);
	if ((key == null) || (key == 0) || (key == 8) ||
		(key == 9) || (key == 13) || (key == 27))
		return true;
	else if ((("0123456789").indexOf(keychar) > -1))
		return true;
	else if (dec && (keychar == ".")) {
		inputfield.form.elements[dec].focus();
		return false;
	}
	else
		return false;
}
//-->
</script>

Now, we will use our script in HTML form

<form action="/signup" method="post">
	<label>U.S. ZIP Code:</label><input type="text" name="zip" size="5" maxlength="5" value="" onKeyPress="return numbersonly(this, event)"/>
	<button type="submit">Submit</button>
</form>

• HTML
• CSS
• JavaScript

Create fixed size thumbnails with ImageMagick

First get Image Magic and install it. You'll find the binary release for any platform accompanied with installation instructions on the Image Magic website.

The Image Magic tool we use is convert. It lets us apply various filters and operations to the images in just one step. Open terminal and go to the directory where you placed the images. What we are going to do is to resize all pictures to 100×100 pixels keeping proportions (no stretch or squash) and then extend the canvas size to exactly 100×100 pixels so that all thumbnails have the same size.

convert -resize 100x100 -gravity center -extent 100x100 -background white big_cover.jpg small_cover.jpg

-resize 100x100 it's self explanatory. Note that the image is not stretched to fit the given dimensions.

-gravity center centers the thumbnail in the canvas.

-extent 100x100 extends the proportionally resized image to fit exactly 100×100 pixels.

-background white create a white canvas to the thumbnail. If the image does not fit completely the 100×100 space, convert will fill the empty space with the specified color.

PS: For better quality, we recommended use PNG format

• Images
• HTML
• Java
• Grails

CSS Hack Wraps Long text in pre HTML tag

Unless the post body / column is big enough, the pre HTML tag will NOT automatically wrapping a long text in a narrow, fix-length post body! However, there is CSS hack for <pre> HTML tag that seems able to really solve all these glitches perfectly!.

How to wrap a long text / code snippet in <pre> HTML tag – a simple way? Wonderful CSS hack that's able to automatically wrap long text in a pair of <pre> HTML tag:

pre {
	white-space: pre-wrap;		/* css-3 */
	white-space: -moz-pre-wrap !important;	/* Mozilla, since 1999 */
	white-space: -pre-wrap;		/* Opera 4-6 */
	white-space: -o-pre-wrap;	/* Opera 7 */
	word-wrap: break-word;		/* Internet Explorer 5.5+ */
	width: 99%;			/* remove horizontal scroll-bar when viewing in IE7 */
}

• CSS
• HTML

CSS Pseudo Menu Items

The usually when you need to do inline menu really fast, the most of designers use this method

<ul>
<li><a href="#">Item One</a></li>
<li>|</li>
<li><a href="#">Item Two</a></li>
<li>|</li>
<li><a href="#">Item Three</a></li>
<li>|</li>
<li><a href="#">Item Four</a></li>
</ul>

with the end result looking like the following

Item One | Item Two | Item Three | Item Four

However I'm sure you will all agree that this is far from ideal. In that example alone we're sticking in an extra three list items that contribute absolutely nothing other than website and as we're all told, we should be separating content from website with the use of CSS.

So where do the pseudo elements come in? Well, if we strip out the three redundant list items our code will now look like the following

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
</ul>

And CSS code

ul li { list-style:none; display:inline; float:left; margin:0 5px 0 0; }
ul li:after { content:"|"; margin:0 0 0 5px; }
ul li:last-child:after { content:""; } 

By applying the following CSS to our code our example menu item now looks exactly like what we were aiming for

Item One | Item Two | Item Three | Item Four

Lets now breakdown the CSS and see what each part plays in order to achieve our final result?

The first section of CSS will set out a list like normal, removing all list styles, making the menu display inline, floating every list item left to make them all fall in line with each other and finally adding a margin to the right to add more spacing to the list items.

In the next section we make use of the :after pseudo element on the list elements. We use the content property to add the vertical line after each menu option and adding a margin to the left to make sure that the vertical line is evenly positioned between it's surrounding li elements.

Within the final section of our CSS code we make use of two final pseudo elements; :last-child and :after. The :last-child pseudo element will find the last element within any parent element. In the second section of our CSS we used the content property to add a vertical line after each li but because we are targeting the last element we can remove the vertical line by adding in another content property and leaving it blank and the :after element tells the browser which side of the element we are targeting.

• CSS
• HTML