Some Mac users will be familiar with the LargeType function integrated in Apple’s Addressbook. It enables you to right-click on a phone number and enlarge it so it’ll look similar to this:
Image from http://macmechanic.com/tips/?p=16
There is also a LargeType enhancement for OS X to activate LargeType in the OS X context menu system wide.
Inspired by this, I recently wrote a quick JavaScript based on prototype that simulates the OS X LargeType functionality by displaying text in a LargeType-like overlay for websites.
View the demo » (Quick’n dirty version)
How to use
- Download prototype and include with
<script> - Download LargeType.js and include with
<script> - Add class name
.LargeTypeto arbitrary HTML-elements. - Done. The script now wraps the element’s content in a link and attaches the display event for the LargeType container.
You can download all demo files here. I’m planning to dissect the JavaScript and CSS here soon, but the code has adequate commented sections so that you can get the picture of how it works (I’ll be here in case of questions).
Thoughts
While preparing the script for a public release, a first few ideas came up on how I could enhance the script:
- Implement the same functionality without any JS but with CSS 2.1 selectors
(adjacent E+F and :focus state) - Intelligent font-resizing during window resize to avoid line-breaking
If you have suggestions on how one could improve this little script, feel free to submit a comment. Have fun with the script! I hope you can use it.
RT @dertimbo LargeType JSPosted in Developing, Tags:javascript, prototype
Possibly Related Entries
- No related posts
Who is this?
freshlabs journal is the bi-lingual weblog and digital playground of Tim Isenheim, designer and webdeveloper from Hamburg, Germany. More →
