Posts tagged "prototype"
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.
|| date: 9 June 2010
|| time: 11:31pm
||
|| I've written an update to this article for those interested in
|| auto-populating input fields with MooTools.
||
|| [2]: /autopopulating-input-fields-with-mootools/
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 type="text/javascript"
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).
|| date: 27 June 2009
|| time: 6:21am
||
|| I have completely rewritten the code so that it no longer requires
|| empty functions inside the brush files to act as indicators of readiness.
|| Instead, the required brushes are retrieved in a daisy chain. This is both
|| more elegant and more reliable. Additionally, style sheets are now also
|| retrieved on demand.