Simple Javascript Object Check

Alright this is something fairly simple but it is useful when you want to have javascript check if an object exists before trying to manipulate it.  As we should know, javascript will die if you try to do an action on an object that doesn't exist.  This is part of the simplicity and low-weight of javascript that makes it great for the web.

So before you try to do anything to an object that might not exist on a particular page, put in the following line of code:

if (document.getElementById('the_id_of_the_object') != undefined)

{

     //code goes here

}

Again, something super simple but may save you some problems in you're building a larger site with pages that might not have the same objects but share the same scripts.

When Tables are Okay

The trend in web development/design is to work with CSS to create layouts.  In the past we used tables to structure websites, this was mainly because of their easy, the lack of development of CSS, and the lack of CSS standard compliance in web browsers.  There are times when tables are applicable even though there is a certain stigma to using them nowadays.

I found the following article very useful in helping to figure out when tables are a good choice and should be used.  If you're interested, take a read: Tables for Tabular Data - What is Tabular Data?

EM Conversions for Base Font of 12px

In order to make things really easy, I made this little table to help with conversions from pixels to EMs.  I'm used to using pixels and I'm sure most everyone is, so here is something simple.

The following table applies to a browser that is set to 'medium' font-size (the standard).  Since most websites use a standard 12px font for text, I set the body font to this value so that the EMs are pegged at 12px (i.e. 1em = 12px).

Base (from browser): 16px;

Body (CSS): 75% (12px);

Befor getting to the conversions, take a look at the above values.  You'll need to set your BODY tag to font-size: 75%.  75% of 16px is 12px, this is what we want to work with or else the table below will not work.

Conversions

Column 1: Desired in px | Column 2: Outcome in em

 0px =  .000 em

 1px =  .083 em

 2px =  .166 em

 3px =  .250 em

 4px =  .333 em

 5px =  .416 em

 6px =  .500 em

 7px =  .583 em

 8px =  .666 em

 9px =  .750 em

10px =  .833 em

11px =  .916 em

12px = 1.000 em

13px = 1.083 em

14px = 1.166 em

15px = 1.250 em

16px = 1.333 em

17px = 1.416 em

18px = 1.500 em

19px = 1.583 em

20px = 1.666 em

21px = 1.750 em

22px = 1.833 em

23px = 1.916 em

24px = 2.000 em

Again, the formula is: desired-font/parent-font = font-in-em (i.e. 10/12 = .833em)

Hope this helps!

Sizing Text with EMs

EMs can be tricky to deal with.  To sum them up, however, they basically allow for resizing of text in Internet Explorer.  If you set the text to a pixel value, IE doesn't allow for resizing of that text.  It seems obvious why (to preserve your intended designs) but other browsers don't have this rule.

Here are some basic rules:

• The default font-size at 'medium' on regular browsers is 16px
  
• EMs are dependant on their parent element's size

With that said, here is an example of working with EMs:

• Default browser size: 16px
• Intended font-size: 12px
• Value in EMs: 12/16 = .75em

Remember when calculating EMs that the EM inherits its denominator (in the equation) from the parent font size.  The calculation is also based on pixel values.

For further reading on EMs check out the following sites:

Pixels to Ems Conversion Table for CSS

How to size text using ems

CSS Cheat Sheet

Another great cheat sheet to help when you can't remember syntax.  This one is for CSS!  The guys at addedbytes make these and they're really useful!  Great stuff.

CSS Cheat Sheet (V2)

Mod_rewrite cheat sheet

A great cheat sheet for mod_rewrite syntax.

MOD_REWRITE Cheat Sheet (V2)

Simple form confirmation

If you want a simple form confirmation, here you go:

<form onsubmit="return confirm('Are you sure you want to send this?');">

Just make sure the onsubmit is in your form tag and it will have a popup dialog confirming the submission of the form.  Very simple.