LogFile

jQuery console is a short bookmarklet that, when activated, loads jQuery into the current page (from Google’s hosted AJAX libraries) then overlays an interactive Javascript console permitting the evaluation of arbitrary expressions. Successive clicks will toggle the console’s visibility. It’s useful for using jQuery to quickly manipulate pages that don’t already include the library or for adding rudimentary console features to browsers other than Firefox.

(more…)

Somewhat delayed but hopefully worth the wait, boxy 0.1.4 is ready. Boxy is a Facebook-style dialog library for jQuery with a rich API for manipulating windows. It’s also pretty well documented.

Changelog:

1. Fixed issue with multiple visible modals
2. Moved modal opacity value from CSS to code to appease IE (not ideal)
3. Moved default options to Boxy.DEFAULTS for application-wide configurability
4. Added custom callback for attaching behaviours to dialog content
5. Added Boxy.alert() for displaying simple messages
6. Added Boxy.confirm() helper
7. Added support for unloading/removing boxy instances: boxy.unload(), boxy.hideAndUnload(after), constructor option ‘unloadOnHide’
8. Boxys created with Boxy.ask() or its derivatives now unload themselves on dismissal
9. Fixed centering issue in IE6 (non-standards compliant mode)
10. Added afterShow callback, fired whenever boxy becomes visible
11. Added Boxy.load() for manually loading boxy content via AJAX
12. Moved WRAPPER to from Boxy.prototype to Boxy to improve app-wide configurability
13. Complete rewrite of $.fn.boxy; see elsewhere for explanation
14. Removed ’single’ plugin option
15. Added option to link each boxy instance to the DOM element which triggered it; this is automatically severed when boxy is unloaded
16. Added option to filter AJAX content using jQuery selector
17. Fixed positioning bug with Opera
18. Added beforeUnload callback
19. Added Boxy.isModalVisible() for testing if a modal dialog is currently visible
20. Added afterHide callback
21. Added afterDrop callback
22. Modal shading now resizes with browser window
23. Added clickToFront option, bringing a dialog to front when clicking anywhere within it
24. Added Boxy.linkedTo() to get boxy instance linked to a given element via ‘actuator’ option
25. Added boxy.toggle() to toggle between visible/hidden

There’s also a new test and examples page that gives all of the major features a workout.

This will be the final release before 1.0; from now until then I’ll be concentrating solely on fixing bugs and stabilising the API. I think I’ve managed to accommodate most feature requests in one way or another.

Linkage: project page | github | direct download from plugins.jquery.com

Just a couple of extractions from recent projects that may be useful to somebodies.

First up is an automatically growing textarea. This implementation is borrowed from Facebook and uses an off-screen auxiliary <div> to calculate the required dimensions of the textarea. Usage is simple:

$('textarea').autogrow();

Next is a cookie-based style switcher, the obvious use of which is toggling between small/medium/large text. Quite why the browser supplied zoom features are insufficient is a mystery to me, but hey ho, the client is always right.

cookieResize('#sizer a', 'medium');

The first argument is a selector matching the resize/style-switching links. When the user clicks any of these its CSS class will be applied to document.body - this class name will also be stored in a cookie for retrieval on successive page views. The second argument is the default class to use if no cookie is present.

No official plugin pages for these; just copy and paste into your project…

Linkage: auto-growing textarea | cookie-based style switcher

I’m pleased to announce the release of boxy 0.1.3. This is mainly a bug-fix release but there are a couple of new features in there as well.

Changelog:

• Fixed CSS class name in middle-bottom cell of wrapper markup
• Pressing escape now closes modal dialogs (as long as dialog is closeable)
• Added getter and setter for dialog title
• Title text is now wrapped in <h2></h2>
• Title parameter now works when passed to plugin
• Close text is now configurable via closeText constructor parameter
• Titlebar text is “unselectable” while dragging
• Close event is rebound correctly if boxy has been cloned
• Fixed bug where border would compress when dragged offscreen
• Dialog can now be centered on a single dimension
• Numerous code cleanups

Linkage: project page | github | direct download from plugins.jquery.com

Thanks to everyone who submitted bug reports and patches.

Just a quick heads-up; a couple of people have enquired about a discussion place for Boxy so I’ve set up a new Google Group.

0.1.3 release is coming soon.

Today I have another jQuery plugin to unleash upon the bearded masses. Boxy is a Facebook-inspired dialog/overlay featuring animation, drag and drop and a comprehensive API for interacting with dialog instances. There’s also fairly detailed documentation.

Here’s a quick screenshot:

Visit the boxy project page for live examples and documentation, or download direct from the jQuery plugin page. Sources at github.

Update: version 0.1.1 has been released; thanks to Robin Whittleton and Fabio Fedelix for their contributions. View the release notes.

Another update: version 0.1.2 is hot off the platter. Support for fixed positioning plus another couple of IE bugs have been smited. Relase notes here; thanks again to Robin W for the patches.