My Javascript (non-AJAX) Progress Bar Class : jsProgressBarHandler, now with Ajax!

jsprogressbarhandlerajax.jpgJust to inform everyone that jsProgressBarHandler now has a second example where 5 Ajax calls are made and the progress bar is updated accordingly. Nothing spectacular imo as none of the jsProgressBarHandler source was changed (the progress bar still is no Ajax at all), only helping out Chris who asked for a likewise example 😉 Hope it helps some (many?) of you out there 🙂

My Bridged Gap – flashLightBoxInjector … not limited to Flash you know

bridgedGap2After having read a question over at the Lightbox forums where user npaust wanted to start Lightbox from a dropdown (a select-element that is), I’ve set up a little demo where this alternative usage of flashLightBoxInjector is demonstrated. Above that I’ve knocked a small bug out of flashLightBoxInjector bumping it to version 1.1.

My Javascript (non-AJAX) Progress Bar Class : jsProgressBarHandler

progress.gifDon’t you just hate it when people wrongly label something as AJAX? A fine example of this is the – so called – AJAX Progress Bar. Above that the javascript could … well … let’s say “a rewrite needs to be done” popped up in my head, resulting in jsProgressBarHandler, a Prototype.js class to dynamically creating (unobtrusive of course) and manipulating progress bars.

Continue reading “My Javascript (non-AJAX) Progress Bar Class : jsProgressBarHandler”

My Code Snippet : Automatically start Lightbox on page load (autoFireLightbox)

lightbox.gifEver wanted to automatically start Lightbox so that it shows an image immediately after the page has loaded? It’s possible!

Someone posted a little Javascript Code Snippet that provides this functionality in the Lightbox Forums. Although the code is OK, it requires editing Lightbox.js, which will of course break when a new version is released (it’s never a clever idea to edit core files).

I took the freedom to modify the implementation a bit (the core hasn’t changed though): Instead of editing your Lightbox.js file, you only need to modify your HTML head element so that it includes the extra functionality of kickstarting Lightbox:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<script type="text/javascript">
// Automagically load Lightbox on Page Load - by Bramus! (
// Code modded from
function autoFireLightbox() {
	//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
	setTimeout(function() {
		if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox')!=-1) {
Event.observe(window, 'load', autoFireLightbox, false);

Note #1: it is important that this extra snippet is placed underneath the 3 javascript includes required by Lightbox as the function calls a variable created within Lightbox.js

Note #2: the reason we’re calling a setTimeout (a 250 milliseconds delay) is to fix an issue in IE where the variable myLightbox would be non-existent immediately after page load.

Note #3: getting a myLightBox is undefined error? Great, you’re using the most recent Lightbox version … and that one requires 1 tiny fix 😉

To now use this functionality make sure you have given your a-element an id …

<a href="images/image-1.jpg" rel="lightbox" id="image001"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

… and then call the page by adding a # followed by that id:

That’s it, you’re done!

A working demo can be found over at

To make things complete: this will not work with flashLightBoxInjector as the swf (or a return from your AJAX call, that’s possible too you know), dynamically builds a list of linked images when the swf is loaded/call has been returned.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

My delay – bramus_classeslist is dead, long live bramus_cssextras!

TinyMCE LogoJust an update to tell you that I won’t make it to posting bramus_classeslist online by the end of the month, as I promised, since bramus_classeslist exist no more. Wait, there’s some good news too: bramus_classeslist has changed names to bramus_cssextras as its functionality has been extended to supporting the setting of id attributes on elements too, a quite obvious evolution.

Continue reading “My delay – bramus_classeslist is dead, long live bramus_cssextras!”

My TinyMCE Classes Plugin : bramus_classeslist : The missing (visual) link between the front- and backend

TinyMCE LogoWhen writing a backend for a site combined with TinyMCE I’ve always found it a big hassle to visually link the content of the editor with the content of the actual site. Yeah yeah, there exists something like a content_css setting but that’s not really it as the options are limited. Fed up with this I decided to crank a nifty plugin out of my fingers …

Continue reading “My TinyMCE Classes Plugin : bramus_classeslist : The missing (visual) link between the front- and backend”

My note to myself : Prototype.js vs. JSON.js : 1 – 0 (or JSON.js considered evil)

JSONSpent 1.5 hours today fighting with them javascript libraries after having updated a site from Prototype.js pre 1.5.0 tot the latest version (1.5.1 at the time of writing) as an update of the used to its latest version (1.7.1 beta 3 at the time of writing) was needed (and that version requires prototype 1.5.1). So what could possibly go wrong with a regular version update? A lot sadly enough.

Continue reading “My note to myself : Prototype.js vs. JSON.js : 1 – 0 (or JSON.js considered evil)”


del.icio.usReceived an e-mail in my inbox from the admin Frank after he read my previous post where I explain on how to use his servive to visualizing your bookmarks. All the cons/thoughts I mentioned he answered/knocked off the table making the service he offers even better!

Continue reading “BRAMUS.IN.SPIRE.US – Update”