If you’re like me, you frequently need a quick reference for finding the right web-safe font for a website. I’ve compiled a list that outlines the various fonts that Windows ships with, along with the Mac equivalent (or just very similar). Special thanks to ampsoft.net.
(more…)
Want to post new jobs to popular micro-blogging service Twitter? Of course you do. Follow the tutorial below to make your Jobberbase site almost as cool as AllDevJobs.com. (more…)
Sometimes while working on various client projects, I need to familiarize myself with the JavaScript library my client is using. Below are some great quick reference “cheat sheets” that can get you started using libraries you are particularly unfamiliar with. (more…)
I was working on something the other day and needed a quick snippet of JavaScript to convert values to pixels from any string. Below is a quick function:
function px(val) {
return parseInt(val)+"px";
}
}To use it, just wrap your string with the function and it should convert it to pixels for you:
var oldValue = '65';
var newValue = px(oldValue);
Let me know how this works for you and if you make any modifications to improve it. Thanks!
I recently released a developer job board built with Jobberbase, an open-source job board software written in PHP/MySQL. While I can’t recommend it for a large job networking site, it is a great piece of software for adding a simple job board to your existing website. I thought I would give a quick rundown on its features, installation process, and some customization tips to get you started.
Below, I’ve listed some of the features of Jobberbase:
OK, so the Content Creation Kit is easily the most powerful module for Drupal. But only when paired with the Views module. The CCK module allows you to create custom content types. The Views module allows you to create a page that displays content that can be sorted, arranged, and displayed in almost any fashion, with some simple ajax functionality to boot.
To give an example of these two modules working in concert with each other, I will attempt to explain a recent site I built, along with talented interaction designer Parth Bhawalkar, completely in Drupal, the Stray Rescue of St. Louis website. (more…)
Sometimes you may want to find the dimensions of the user’s browser window. Below is a list of the propertiesthat are accessible with different browsers. Traditionally, window.innerWidth/window.innerHeight is the most widely accepted way to obtain these values, however, there is deviation between IE 4 and IE 6+ in “standards compliant mode.” Below, I have listed the different ways to find the window height and width.
The script below will alert the proper window height and width in various browsers.
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
To continue my series of form validation and presentation posts, I have built a simple form validation script that does not require a library to use, which makes it very small, even uncompressed, totaling only 7kb. This validation script currently handles the following types of fields:
The script relies on class names assigned to each input field such as “required” “isemail” “minlength:4″ or “phone” to apply validation rules. (more…)
Alright, so I know everyone has their own crazy way of doing rounded corners. I am here to tell you to stop adding <div class="lefttopcorner"></div> and <div class="righttopcorner"></div> to your markup. It’s bad. Not to mention ugly. So stop. I want to tell you up front, no this doesn’t work for most browsers, but it will be supported in pretty much every future browser (cross your fingers for IE8) ever in the history of the world because it’s way easier than all that crap you were doing before. So here you go:
Add this to the appropriate CSS selector and you’re golden (at least in Webkit/Mozilla browsers and any future implementation of border-radius in IE):
.hotBorders{
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}You may ask, well, if this is not 90% browser-supported, why should I use this? Because it cleans up your markup, your CSS, and keeps the user’s browser from requesting a bunch of .PNG images that probably don’t work in a lot of the older browsers you are targeting.
Heck, if you want to get super-crazy with Mozilla, you can even specify the corners you want to target for rounded corners. If you provide two values for each, you can be more specific with the curvature of the corner.
.hotBorders{
-moz-border-radius-topleft: 4px 8px;
-moz-border-radius-bottomright: 4px 8px;
-webkit-border-radius-topleft: 4px 8px;
-webkit-border-radius-bottomright: 4px 8px;
}You could also set the style all on one line if you prefer:
.hotBorders{
-moz-border-radius: 4px 2px 40px 5px;
-webkit-border-radius: 4px 2px 40px 5px;
}There is some debate as to how the different engines interpret the border-radius values and render the corners. It is suggested that if you want to set specific values for each corner, you should not put all 8 values on one line like this:
.hotBorders{
-moz-border-radius: 4px 2px 40px 5px 6px 2px 3px 3px;
}Instead, you should assign two values for each corner:
.hotBorders{
-moz-border-radius-topleft: 6px 3px;
-moz-border-radius-topright: 6px 3px;
-moz-border-radius-bottomleft: 3px 6px;
-moz-border-radius-bottomright: 3px 6px;
}This seems to be the best way to get both Safari and Firefox on the same page. If you have any more information or have tested this extensively, please post your results in the comments.
IE will catch up to everyone else shortly, and it will be worth it for you to future-proof your code now, even if your IE users see those jagged edges on their screen. Twitter thought it was worth it. Not sure why they use tables for their page layout though.
This is the first in a series of posts on simple CSS and JavaScript form enhancements and validation. More specifically, these are for people using Prototype or jQuery to handle one or two small tasks on a page and really should be using a simple script like this one to handle such tasks.
This method uses CSS to add a pseudo class of :focus to all form elements and for users on browsers that don’t understand this pseudo element, the javascript adds a class of focus to each element. This method ensures the highest level of compatibility and visual consistency for all users.
View the demo:
highlightOnFocus Demo
Download the example:
highlightOnFocus.zip
To the right, you’ll see an example of what this object does. It adds a classname of “focus” to a form element when the cursor has entered the field and removes the class when the cursor leaves the field.
You will need to include the following code in the <head> section of your page:
<link rel="stylesheet" type="text/css" href="./css/highlightOnFocus.css">
<!--[if lte IE 7]>
<script type="text/javascript" src="./js/highlightOnFocus.js"></script>
<![endif]-->When IE is the browser, the script will automatically walk through your page elements, identify any forms, loop through the form elements and add focus and blur events that basically add and remove a class of “focus” to the fields. Firefox 3, Safari 3, and Chrome do not need the javascript thanks to the :focus pseudo selector.