Bram.us » Portfolio http://www.bram.us A rather geeky/technical weblog by Bram(us) Van Damme Sat, 04 Feb 2012 11:59:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.2 http://www.bram.us/2007/12/14/my-javascript-non-ajax-progress-percentage-bar-jsprogressbarhandler-02/ http://www.bram.us/2007/12/14/my-javascript-non-ajax-progress-percentage-bar-jsprogressbarhandler-02/#comments Fri, 14 Dec 2007 00:34:29 +0000 Bramus! http://www.bram.us/2007/12/14/my-javascript-non-ajax-progress-percentage-bar-jsprogressbarhandler-02/ Continue reading →]]> jsprogressbarhandlerajax.jpgI seem to be in a scripting mood this week, as jsProgressBarHandler has been updated to version 0.2. This version is a total rewrite of version 0.1 making it even better!

What is jsProgressBarHandler all about?

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Version 0.1 was a mere rewrite to PrototypeJS of the version by WebAppers whilst version 0.2 is a full structural rewrite.

So, what has changed?

Internally jsProgressBarHandler now consists of 2 classes: a jsProgressBar-class which is a class defining a progress bar and a jsProgressBarHandler-class which scans your HTML page for span elements with the progressBar-className and automagically creates progressbars of them. The sepration into two classes enables you, the user, to manually creating new jsProgressBar instances (viz. progress bars) on the fly! The automatic creation of progress bars can even totally be disabled with the ease of setting a simple parameter named autoHook to false.

Anything else has changed?

Yes! It even now is possible to set some options when creating progress bars (note that when using autoHook all the progressbars will use the same default options). The options one can set are width, height and animate. The first two make the creation of bigger and/or smaller progress bars even more easy than before. The animate option enables/disables the use of animation (viz. should a change in percentage slide to the new percentage or directly be applied?)

Cool, is there a demo?

jsProgressBarHandler Demo

Note that next to the demo above isn’t the only one … even an AJAX demo exists!

Where can I download it?

Right here:

http://www.bram.us/wordpress;/wp-content/uploads/2007/12/jsprogressbarhandler_02.zip;Download jsProgressBarHandler 0.2;

WARNING! This version is outdated!
Grab the latest version over at the jsProgressBarHandler Project Page

Wow, you’re going to fast: I have a question, I need help, I need more info, how do I configure this thing?

Don’t worry my friend, there’s a full page here on bram.us devoted to jsProgressBarHandler where you can find all info about it.

]]> http://www.bram.us/2007/12/14/my-javascript-non-ajax-progress-percentage-bar-jsprogressbarhandler-02/feed/ 15 My Release Day – flashLightBoxInjector 1.2 http://www.bram.us/2007/11/22/my-release-day-flashlightboxinjector-12/ http://www.bram.us/2007/11/22/my-release-day-flashlightboxinjector-12/#comments Thu, 22 Nov 2007 22:12:14 +0000 Bramus! http://www.bram.us/2007/11/22/my-release-day-flashlightboxinjector-12/ Continue reading →]]> bridgedGap2I seem to be in a development mood today. After having released bramus_cssextras 0.4.1 earlier today I load upon thee a new version of flashLightBoxInjector, bumping it to version 1.2. Not much has changed since the previous version (1.1), except for the addition of a prependElement function and the addition of a new ass-kicking “Flash Polaroid Photo Gallery” demo which I backdropped from the Trancefusion website I developed this summer, as per request by Roland. And yes my friends, sources are included in the release ;)

]]> http://www.bram.us/2007/11/22/my-release-day-flashlightboxinjector-12/feed/ 2 My Trancefusion 2007 http://www.bram.us/2007/08/21/my-trancefusion-2007/ http://www.bram.us/2007/08/21/my-trancefusion-2007/#comments Tue, 21 Aug 2007 18:42:09 +0000 Bramus! http://www.bram.us/2007/08/21/my-trancefusion-2007/ Continue reading →]]> tf10.gifWoohoow, just pushed trancefusion.be live! Trancefusion I say? Yes Trancefusion, the yearly mass-event/party (5000 visitors!) we, Scouting Deinze, organize. (now you know why I have this huge Trancefusion-sticker on the back of my car ;) )

When I look at the site and the site from last year (which I also developed, just as the one 2 years before that) I can say it’s a huge improvement. Not only is the layout better (designed by Coy), but technically the code itself has improved a lot (and to say I hadn’t scripted ActionScript for 6 months!). Next to the ActionScript, the site hold some technical drool-inducing stuff such as flashLightBoxInjector, which I especially created for this project.

Trancefusion 10 Website

One nasty bug which appeared merely a few hours ago remained unfixable though: the implementation of Flash in Firefox and having the wmode set to transparent (making Lightbox appear ABOVE the swf) breaks the keyboard input. Really strange as this bug only appeared just today (didn’t do any update of my Flash Player). After having done a bit of research, this bug appears to be standing for over 2 years by now (try entering an @ in the examples provided)! Above that I noticed that my preloader “just breaks” with the same settings applied. Sure hope Adobe fixes the implementation of their player before pushing that H.264 update online :P

A workaround was found by keeping the Lightbox hideFlash() method in place (which I disabled before) which automatically hides all flash elements and removing the transparent wmode: keyboard input works “just fine” again! w00t! Too bad the Flash now is hidden when a picture is viewed through Lightbox, but one can’t have it all, can he?

Enough bugsolving! Are you Trancefusion? Line-up this year is massiv [sic]: AC Oliver, Tubes, Michael Forzza, M.I.K.E, Fred Nova and – last but not least – Free vs. Koezie!

See you October 13, aaight?!

And ooh, for the tech-nerds out there: Valid XHTML 1.0 Strict, Valid CSS, PHP, MySQL, SWFObject, PrototypeJS, Custom prototype Class (flashLightBoxInjector), Google Analytics, Google Maps Roadmaps, Google Earth Roadmaps, Flickr Integration (Pictures Section) and lots of XML parsing in the flash source … ;)

]]> http://www.bram.us/2007/08/21/my-trancefusion-2007/feed/ 2 My Bridged Gap – flashLightBoxInjector http://www.bram.us/2007/07/27/my-bridged-gap-flashlightboxinjector/ http://www.bram.us/2007/07/27/my-bridged-gap-flashlightboxinjector/#comments Fri, 27 Jul 2007 00:51:25 +0000 Bramus! http://www.bram.us/2007/07/27/my-bridged-gap-flashlightboxinjector/ Continue reading →]]> gap.jpgEver wanted to launch Lightbox from within Flash? Ever wanted to launch Lightbox from within Flash after having loaded in an external XML (with imagelinks) without having to write extra HTML markup? Ever wanted a real interaction between Flash and Lightbox? Seek no longer! Now you can, with flashLightBoxInjector! (demo)

]]> http://www.bram.us/2007/07/27/my-bridged-gap-flashlightboxinjector/feed/ 0 My Public Release – bramus_cssextras 0.3.2 released http://www.bram.us/2007/07/24/my-public-release-bramus_cssextras-032-released/ http://www.bram.us/2007/07/24/my-public-release-bramus_cssextras-032-released/#comments Tue, 24 Jul 2007 21:26:41 +0000 Bramus! http://www.bram.us/2007/07/24/my-work-in-progress-bramus_cssextras-032-released/ Continue reading →]]> TinyMCE LogoA tiny post to inform you that bramus_cssextras, the TinyMCE CSS Classes and IDs Plugin made it to its first public release (version 0.3.2). Sure hope the documentation is clear, correct and above all complete (feel free to comment if not).

]]> http://www.bram.us/2007/07/24/my-public-release-bramus_cssextras-032-released/feed/ 0 My delay – bramus_classeslist is dead, long live bramus_cssextras! http://www.bram.us/2007/06/27/my-delay-bramus_classeslist-is-dead-long-live-bramus_cssextras/ http://www.bram.us/2007/06/27/my-delay-bramus_classeslist-is-dead-long-live-bramus_cssextras/#comments Wed, 27 Jun 2007 17:27:16 +0000 Bramus! http://www.bram.us/2007/06/27/my-delay-bramus_classeslist-is-dead-long-live-bramus_cssextras/ Continue reading →]]> 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.

To summarize it: bramus_cssextras is a TinyMCE plugin which extends TinyMCE’s functionality by providing the option to setting class and id attributes on any HTML element within TinyMCE, in a nice and easy way.

Hope you can wait ’til July as writing documentation can be quite time-consuming ;)

UPDATE bramus_cssextras has been released by now ;)

]]> http://www.bram.us/2007/06/27/my-delay-bramus_classeslist-is-dead-long-live-bramus_cssextras/feed/ 0 My Master Plan : Online! http://www.bram.us/2007/04/20/my-master-plan-online/ http://www.bram.us/2007/04/20/my-master-plan-online/#comments Thu, 19 Apr 2007 23:56:32 +0000 Bramus! http://www.bram.us/2007/04/20/my-master-plan-online/ Continue reading →]]> PlansAfter quite a few evenings of designing; One evening of slicing/building markup/creating stylesheets; And 2 evenings of porting the sliced up design to WordPress (first time I ever did that actually) by breaking The Loop, stripping content from Pages and tucking them in The Sidebar and spending lots of time on and around The Codex I load upon thee the 3rds.be website along with its dazzling Mascot dubbed Mister Sideburns!

3RDS Mascot : Mister Sideburns
3RDS Mascot: Mister Sideburns, designed by Bouncy

Everything should be in place over at 3rds.be. If not, feel free to inform me ;) And oh, as you can see I moved away from the rather dark damask pattern and ended with a nifty wood-texture (no trees were harmed).

What are you waiting for? Go check out 3rds.be!

(Tired yet satisfied) Bramus!

]]> http://www.bram.us/2007/04/20/my-master-plan-online/feed/ 8 Their adventure (Jeugdboekenweek 2007) http://www.bram.us/2007/02/14/their-adventure-jeugdboekenweek-2007/ http://www.bram.us/2007/02/14/their-adventure-jeugdboekenweek-2007/#comments Wed, 14 Feb 2007 22:26:08 +0000 Bramus! http://www.bram.us/2007/02/14/their-adventure-jeugdboekenweek-2007/ Continue reading →]]> Jeugdboekenweek 2007 LogoAbout a month ago I was contacted by the non-profit organisation Stichting Lezen Vlaanderen (an organistation to promote reading (as in books) here in Belgium), asking if I were able to create 2 small games for them.

One of the projects of Stichting Lezen is Jeugdboekenweek, a week to promote reading for children aged 6 to 12, and was first organized in 1972. Nowadays Jeugdboekenweek is organised nationally and nearly all schools, cultural centres, libraries, etc. participate. Since 2002 Jeugdboeken also has a website where they start their campaign one month before Jeugdboekenweek itself. On that website the children can find tips, a quiz, information and some games.

Jeugdboekenweek

The theme of Jeugdboekenweek this year is Avontuur (Adventure) and the more awesome artwork was created by Tom Schamp, as clearly can be seen by the style found in this year’s poster

Jeugdboekenweek Poster 2007

Main element in the design of the poster is the crocodile. From thereon the team at Stichting Lezen came up with the idea of creating a pacman-like game. Also inspired by the poster, they wanted an e-card where one would be able to slide all body parts to form a composition. You must remember a toy you had when you were young that could to that: rotate some body parts and create a unique person with shoes that totally would not match the pants he was wearing (how do you call such a toy?). The e-card was dubbed “avontuur-figuur” and was given a send to a friend option (that’s what an e-card is all about, not?) and an export option.

Avontuur Figuur

Both the pacman restyle and avontuur-figuur were finished somewhere last week and today I was given notice that the website was placed live :)

So, what are you waiting for? Go visit www.jeugdboekenweek.be and click through to the avontuur-figuur e-card and krokoman game!

B!

]]> http://www.bram.us/2007/02/14/their-adventure-jeugdboekenweek-2007/feed/ 2 Our newest Wax Coating – Now with 80% more shiny! http://www.bram.us/2006/12/04/our-newest-wax-coating-now-with-80-more-shiny/ http://www.bram.us/2006/12/04/our-newest-wax-coating-now-with-80-more-shiny/#comments Mon, 04 Dec 2006 21:09:41 +0000 Bramus! http://www.bram.us/2006/12/04/our-newest-wax-coating-now-with-80-more-shiny/ Continue reading →]]> Wax LogoAt work the weeks have been hectic as they always are near the end of the year. We at Wax Interactive however still did find time to build a new company website!

Wax Mini Site 2006

As some of you might know we already pimped our site a bit back in September when Wax became a part of the Itelco Group

The version back then was a onepage minisite as seen below and only contained the real essentials:

  • About Wax Interactive
  • Tiny selection of portfolio
  • Contact Information

      • The site was good to be built in a real short period of time (XHTML valid & SEO Friendly), yet the javascript (Just love those script.aculo.us effects!) wasn’t degrading gracefully at all making it quite useless when having javascript disabled.

      Wax Mini Site 2006

Wax Full Site 2007

As of 7PM this evening we, the wax team, present you the new and improved Wax Interactive 2007 Company Website featuring (no direct links, it’s up to you to discover):

  • Clean, smooth, elegant, strict & loose design
  • Rotating flash sneak previews/teasers of the portfolio projects (unobtrusive and degrading gracefully!)
  • News section with monthly listing (blog style)
  • Portfolio section with – unobtrusive – iPhoto alike image scaler (not in IE though, buggy browser – long live conditional comments!) and filtering possibility on "type/service" and "used technology"
  • (Unobtrusive and gracefully degrading) sliding contact section with a tiny amount of AJAX (and JSON on the return value)
  • Google Maps implementation
  • Team page with faked Bramus! in the photo
  • Open Job Positions
  • RSS feeds for the masses!
  • Search engine friendly URLs and titles
  • …
  • (and of course a nifty CMS for us to update the site)

Summing it up: everything one could expect from an always evolving and growing web design and web development company

Enjoy our new site! I know I did whilst building it!

Bramus!

]]> http://www.bram.us/2006/12/04/our-newest-wax-coating-now-with-80-more-shiny/feed/ 2 My Trancefusion 2006 (TF9) http://www.bram.us/2006/09/15/my-trancefusion-2006-tf9/ http://www.bram.us/2006/09/15/my-trancefusion-2006-tf9/#comments Thu, 14 Sep 2006 22:45:43 +0000 Bramus! http://www.bram.us/2006/09/15/my-trancefusion-2006-tf9/ Continue reading →]]> Trancefusion 2006The latest personal project I’ve been working is the website for Trancefusion, our yearly event we organize with our scoutsgroup.

What once (40 years ago!) started as a small party named “Scouts & Gidsenbal” (SGB from now on) grew over the years. By 1997, after moving to various – read: bigger – locations to finally end up in the “Brielpoort” (one of Belgium’s biggest halls located in our hometown Deinze), SGB attracted more than 3000 people.

The concept had changed over the years, and in 1997 SGB got a facelift. The dance-aspect of the party (which already had it’s own room/hall) was named Trancefusion and that party was boosted as THE main event of the evening since house/trance/techno/… are very popular. The shift in course was an instant hit: by now, 9 years later, TF attracts 5000 people who all are there for one cause: music. Many of the visitors still come for SGB, many others come for the top-notch deejays.

Trancefusion 2006 - Flyer

Enough history, on with the nerdy stuff. The Trancefusion 9 website has been launched! Designed by Coy (who also created the poster & flyer, as he usually does), “website-ified” by me (did I just invent a new word?).

It’s not my usual “XHTML/CSS/PHP/MySQL”-site, it’s full flash this time since such a party requires some interactive things which cannot be achieved with the general techniques I use. However, I still was able to get real nerdy and bounce in a Googlemaps-implementation for the roadmap.

See you october 14!

B!

]]> http://www.bram.us/2006/09/15/my-trancefusion-2006-tf9/feed/ 3