Entries in website development (2)


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 plug-in...my 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.


New Site Launch: DRC1000.com

Every now and then I get to work on a website that is not only challenging, but a whole lot of fun, and drc1000.com is one of those sites. Designed by John Sabo from Sabo Creative, DRC1000.com is one of the most beautiful and graphically intensive websites I have ever had the pleasure of working on.

Click to read more ...