A customised version of iBox is used extensively on bioneural.net (e.g. the Flickr photocast here) and iBegin have just released version 2. This free JavaScript lets you display automatically scaling images, external documents, or embedded containers in an overlay dialog without needing to reload the page. iBox has gained some weight since v1.2.1 (2006) but remains compact compared to other Lightbox-alike solutions and just as simple to use, now boasting wider browser support and new plug-in capabilities (e.g. for embedding YouTube videos). In most cases it degrades gracefully when JavaScript is disabled (it won't display hidden inline containers; JavaScript is required to play YouTube videos).
Tag archive for 'javascript'
So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.
Continue reading 'How to safely inject CSS3 using jQuery'
Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability.
Continue reading 'Corners, gradients and shadows with jQuery'
Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!
Continue reading 'The best way to do corners and gradients'
The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.)
Continue reading 'bioneural.net site preference panel revisited'
As I recently noted, both WordPress and K2 have migrated from using Prototype plus script.aculo.us to using the jQuery JavaScript library. Prototype is a JavaScript framework, including a library of functions used to build Ajax applications. It's best buddies with script.aculo.us, an add-on JavaScript effects library that extends the capabilities of the former. So where does jQuery fit in?
Continue reading 'From Proto.aculo.us to jQuery'
