It's where I share interesting info with other web geeks
Yesterday I wrote a simple class which auto-populates input fields, and thought it worth sharing. I was originally inspired to write this code by Roger Johansson's post titled Autopopulating text input fields with JavaScript. While I approached the problem from a slightly different angle, I made sure to avoid the pitfalls Roger mentions.
Nothing new here. I've combined Prototype 1.6.1 and the various files that make up script.aculo.us 1.8.3 (except unittest.js) into one file, which I've minified using the YUI Compressor. Further compression has been achieved by gzipping the minified file. All three versions are available for download:
I suggest including the Prototype and script.aculo.us version numbers in the
src:
<script src="/scripts/prototype+scriptaculous.min.js?p=1.6.1&s=1.8.3"></script>
This prevents caching issues that might otherwise arise upon updating to a newer version of prototype+scriptaculous (I'll update the three files — and this post — each time a new version of Prototype is released).
I began this post three months ago, got stuck, and put it in the too hard basket. I wanted to devise a workable solution to my stumbling block before publishing this information. I'm getting ahead of myself, though. First, the background.
As I began writing this post, I had just completed a redesign of this site. The new design removed unnecessary distractions to allow readers to focus on the clearly presented content. I moved site navigation from the sidebar (which I axed altogether) to the header. I decided to fix the header in place so that the navigation and search form would always be visible. This required very little effort, but overcoming the problem posed by fixed-position headers took a great deal of trial and error. To save others from going through this tortuous process I'll describe my various approaches, and list the benefits and drawbacks of each.
In my post titled Captions over images I advocate the use of definition lists for captioning images. Earlier today I was asked whether this meaningful markup could be used in conjunction with an "image slider" such as Easy Slider 1.5.
I had a look at the Easy Slider source code and decided to write my own image slider using Prototype rather than hacking someone else's code to pieces. It's a proof of concept rather than a full-blown "plugin", but it demonstrates that such functionality is achievable using elegant, meaningful markup.
Check out the Prototype image slider demo to see the code in action.
It's no secret – I love Coda! It's a pleasure to use. It looks so damn good. When I started using SyntaxHighlighter I set out to create a Coda theme. Thankfully, the good folks at Panic had done the ground work for me. All I had to do was create a style sheet that would make my code snippets look as sexy online as they do in my text editor.
Or so I thought.
SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript (as stated on its wiki). One of its deficiencies is that it retrieves all its brushes each time a page is loaded, despite the fact that in many cases only one or two (or none) are required.
Currently, Prototype is my JavaScript framework of choice (although I'm really looking forward to trying jQuery). I have used Prototype to create a brush loader for SyntaxHighlighter, which retrieves brushes on demand to reduce page loading times (in certain circumstances).