jQuery Plug-in: fluidFontSize

I recently finished a development project for a client that challenged me a bit, which is not necessarily a bad thing.  The client wanted the site to be scalable across multiple screen resolutions, and not just horizontally scalable, but vertically.  It was important that any scrolling on the site be limited, if not non-existent, on even the smallest screen resolutions.

Using jQuery, I was able to determine the screen widths/heights of the end-user screens and keep the site scaled proportionally.   But then I began to notice something happening: The paragraphs on some of the pages, particularly when viewing on smaller screens, was disappearing, falling out of divs, or hanging over images.  I realized quickly that I was going to have the scale the fonts as well in order to keep the text in containers.

Did a quick search, and after trying unsuccessfully for a couple days with several plug-ins, I realized I was going to have to go a step further.  While the plug-ins I did try were very good, I couldn't get them to work correctly when using fluid heights in my containers.  So, I created my own first as a matter of fact.

Frankly, it's a very simple, easy plugin.  It simply takes a max-height option that you specify and divides it by the actual height of the container as it's displayed on the screen.  Taking that percentage, we adjust the font accordingly.  The second option allows you to subtract a hair more if needed. Take the following example:

$("#content_box").fluidFontSize({maxHeight: 365, aDrop: .5});

The 'aDrop' option will simply take the newly calculated font size and subtract .5.  This can also be set to zero, the default (recommended for most cases) is 1.

Demo is available here for download.


Lion and the Mouse

OSX Lion Mouse PreferanceFor those of you impatient souls, like myself, who bit the bullet and installed OSX Lion yesterday, you may have noticed something wrong with your mouse after your initial reboot.  Suddenly, my wife and I were finding that the scroll wheels on our mice were not working...but wait...they were.  Just in the wrong direction, or the right direction, depending on how you look at it.

After years of working with the scroll wheel only going one way, I wasn't really interested in this development.  The fix is easy, although not easily noticable in preferances.  Simply go to your System Preferances > Mouse and uncheck the box that says "Scroll Direction: natural".  Problem solved...


Quick-Tip: Take Screenshots in Snow Leopard

One question I often get asked is how to take screenshots on Mac OSX.  The answer is really quite simple...

The Everything Shot

To take a screenshot of everything on your display, simply press the "Shift-Command-Number 3" keys, in that order.  Your screenshot will be saved to your desktop.

The Windowed Shot

Sometimes you may want to get a screenshot of just a single application.  Press the "Shift-Command-Number 4" keys followed by the space bar.  You will see your pointer take shap of a camera.  Simply click the open application that you want to capture and go grab your screenshot on the desktop.

The Custom Shot

Sometimes you may want to just grab part of a screen or window.  To do this, simple repeat with the "Shift-Command-Number 4" keys without the spacebar.  You will see your mouse pointer take the shape of an aiming tool with the X and Y coordinates of it's current location.  Select a starting point and then click and hold to the area you want to capture.  Once selected, simply let go of the clicker and your image will be saved to the desktop.

The Advanced Shot

It is also possible to grab a screenshot from the terminal.  Open the terminal and type the following

screencapture ~/Desktop/myimage.jpg

You can of course name the image anything you want or change the location.  The '~/' in the directory simply defines your home folder.  Type "screencapture --help" to see the more advanced options available with the screencapture terminal command.


Apple's iPad Misses the iBoat

Don't get me wrong, it's not that I don't think the iPad is impressive (even if the name isn't). From what I can see, without holding it in my hands, it boasts a beautiful display, is super responsive and has some nice multi-touch features and eye-candy. But what exactly are we looking at here?

Click to read more ...


Add Text to PDFs in Mac

I stumbled across a little gem today when I was looking for a way to add text to a form I was asked to fill out and fax. Realizing I had nothing in my software arsenal that could add/edit text to PDFs like Adobe Acrobat, I did a quick Google search and came across FormulatePro.

Click to read more ...