jQuery Growl 1.0.0-b3 Released

I just released the latest beta of jQuery Growl, adding in the new noticeDisplay/noticeRemove features.  I updated the jQuery Plugin Project page and uploaded the latest ‘beta 3′ to release it to the general public.

This release is rather minor, and only really provides a small bug fix and introduces the ability to override noticeDisplay() so that you can have your own custom animations and effects to display your notice.

Enjoy and let me know if you experience any problems with it, or have any updates that are within the ‘growl scope’ (I’ve been asked by a few people to make updates/changes to the Growl Plugin which I decided not to implement due to the lack of ‘Growlness’ in the requests.  Please refer to the official Growl homepage and experiment with the actual application before asking for feature updates, thanks.).

Javascript Calculator

While working on a side project, for which I found a small amount of time to work on. I created this rather simple and basic calculator, made with jQuery (Of course).

You can view the calculator here: jQuery Calculator

It was rather simple to build, and I don't even think that the source is really worth describing or going into detail with.  The only thing I think is worth mentioning is the use of the 'eval' function, which allowed me to dynamically create javascript on the fly and take the result of it.

In this case, I passed in the Left and Right values along with the operator and simply stored the output.  For example, if you typed in "55", hit "+" and then entered "100".  I simply call:

Which resulted in the numeric value of 155, of course.

Optimizing Web-Forms with jQuery

Ever look at some of your forms and think, wow, that's repeatitive.  Yep, you know those multi-level search forms, or tabbed interfaces with repeated drop down values? Those are the ones.

Ever wonder how you could optimize them for the client and reduce some of the overhead? For example, say you've got a site that has multiple categories, and for each category you can search by State, Region and some other 'Long List' of filterable data (model, manufacturer, artist, author, etc) -- ever think it was a good idea to create a tabbed interface to help break it out ... since Searching by Artist really has different fields then searching by Author ... one's a song, the others a book ... they have similar qualities, but not the same so the form differs for each.

Say for example, you have 5 forms on your 'search page' and each form is hidden behind a 'tabbed user interface' (toggled display attributes with a little bit of simple javascript), now, on each of these forms you have the same select/option drop-down with the same values.  The only thing that differs, or may not, is the elements ID attribute.

Ever looked at how much space was consumed by a simple US State drop-down? Nearly 4kb of data is inside the <select /> tag <option value="xxxxx">Alabama</option> ... 50+ times (especially if you include regions and sub-regions in the list).  Now, you've got this same drop down in 5 places on the page -- thats 4kb times 5, nearly 20kb of bandwidth required by the end user to download your page now.

Be nice to trim that down to a simple 5kb, wouldn't it?

With jQuery, we can ... and here's how:

We start with this, and we populate all of our values into it -- pretty simple, your site probably already has this going on -- multiple times (gotta love CTRL-C/CTRL-V action, eh?).

Now, we add a little bit of jQuery:

Wait ... uhm, we're missing something ... the destination place holders, so let's add some in:

Repeat the above as many times as you need too, in as many places as you need, save and load up your page ... watch as all the 'replicated' drop downs automatically populate themselves using the first drop downs values ...

Pure magic, really.

Ok, it's not magic ... it's jQuery ... and even then, it's really just as simple with pure JavaScript.  If your site does not already include jQuery in it's list of requirements, then simply swap out the $() selector stuff with document.getElementById calls, and then write a simple 'clone' function (I'll probably write something about doing it this way later on ... right now, I'm hungry.)

WordPress Growl … thoughts?

I am currently working on integrating my recently released 'jQuery Growl' with WordPress 2.5, as an administrative plugin.  Allowing a logged in Site Admin (User Level >= 10) to be notified of system messages such as 'Comment Posted', 'User Logged In', 'Post Published', etc ... as well as allowing the site administrator to enable the 'whose looking' feature which will just log all requests to the site and notify the administrator of every page request ...

Now, due to the large number of requests that would be created if this was 'literally real-time', I'm thinking of limiting the checks to every 10 seconds (possibly providing an override in the options?) and only retrieving the last 10 notices ... if any of them are found in your current 'notice stack', then it will ignore it -- keeping the internal 'notice stack' to 10 items or so.

With that said, I'm curious as to whether or not this is a useless feature, or if people would actually use it

So, let me know.

jQuery Growl 1.0 Released

I've just released jQuery Growl 1.0 'Preview' and submitted it to the jQuery Plugin Repository. jQuery Growl is a jQuery based version of Growl for OS X.

The 'home page' for this plugin is currently located here on Fragmented Code.

I have lots to do to 'finish this up', but this is a pretty solid 'preview release' and is now open to the general public. I implemented something very close to this at the office on Friday, and just couldn't resist releasing a jQuery Plugin (the one at the office uses jQuery, but is tied heavily into the 'framework' we're building there -- its currently proprietary, so ... don't bother asking, but we may release bits and pieces to the public at some point).

A co-worker likes to point out my 'lack of support for IE' when I release code snippets, and ... as such, he pointed out the same 'lack of support' with my jQuery Growl 'demo' template ... my response is,

if you can get IE to act right, I'll support it

With that said, the demo looks a little 'odd' in IE -- however, the demo uses a 'custom' template, the default template works perfectly fine (last I checked it, which was a while ago, *shrug*). The demo is a perfect example of 'templating' the output though ... and your welcome to create as many IE-friendly templates as you want ...

And, on that note ... if you create any custom templates, please, let me know, I'd love to show case them with the plugin ...

Fun with jQuery

I was a bit bored this evening, and was speaking with one of my employers' web designers earlier about jQuery and some of the 'cool' things you can do with it. One of the more interesting things about jQuery, in my opinion, is the 'animate' function. Everything else is cool too, don't get me wrong ... "animate" is just one of the 'cooler' features, to me.

As I'm not a 'designer' or an 'animator', I've never really played with it too much, despite how much it's intrigued me all this time. So, with that, I decided to 'draft' a quirky little prototype of some jQuery animation magic ...

The idea is pretty simple, I have a single H1 tag in my BODY and in $(document).ready() I just grab the .text() and break it out into 'letter parts', hide the original H1 and then append the 'letter parts' into the DOM and run some animations on them ... all while, at the same time, running a generic 'move the box' animation-queue.

You can view this 'Fun with jQuery' demo here:

http://projects.zoulcreations.com/jquery/jquery.animate.html

http://projects.zoulcreations.com/jquery/jquery.slider.html

If you have any interesting ideas for jQuery animations, let me know ... I'd love to see how far this can go ...

UPDATE 2008-04-15: (Added 'jquery.slider.html' reference)

SWFObject, ExternalInterface and Internet Explorer

I was working on something earlier today, and became so frustrated with it that I just got up and went home early for the day.  I was very pleased with the work I had completed to this point, and as soon as I launched the dreaded Internet Explorer browser to 'test compatibility' ... I immediately threw my arms up in the arm and spouted out a handful of expletives.

I created a very simple Video player in Adobe Flex 2.0, and exposed all of its functionality through ExternalInterface so that a javascript framework I am working on could communicate with it -- allowing for 'media controllers' (play, stop, pause, forward, backward, rewind, progress, etc) could be rendered to the page using HTML and CSS.  I had the following general code in my Adobe Flex application:

I dropped a reference to my compiled SWF onto the page using the latest SWFObject 2.0, recently released on Google Code. I even back-ported it to the last 1.5 release on blog.deconcept.com, when it failed initially ... assuming, of course, that the 2.0 release was still 'buggy'.  I stood corrected.

I did some research, and found a few posts related to the issue, one that I found more or less 'ensuring' was Mihai Bazon's.  He basically stated that to accomplish the ExternalInterface integration to my page, I'd have to load my SWF's with the initial page ... well, this is sort of a 'oops, would have been nice to know this AHEAD OF TIME' thing, as it makes quite a few changes to the framework a requirement.  Especially since Flash Video's are going to be one of the driving forces to the end result.

So, with that ... Mihai suggests that you can load the SWF's dynamically still, if you load them into an IFRAME.  This seems like a logical solution, but I had another alternative idea ... which is to use Flash's LocalConnection system to 'relay' the events, and simply loading a small lightweight 'listening server' on the page at 'page load' which can be passed the 'destination' and the 'method' with 'arguments'.  Now, to pull this off, all dynamically loaded SWF's on the page would have to implement the same basic startup process ... Which would go something like:

Pass a static param into the 'listener server', this represents it's "LocalConnection Name" that it will listen on

Pass the same param into all the dynamically loaded SWF's that will 'attach' to the 'listener server'

Once the dynamically loaded SWF is done, in it's "creationComplete" it can simply connect to the 'listener server' and ask to be an event handler.

When you have javascript on the page that needs to execute some ActionScript in a dynamically loaded SWF, the Javascript can tell the 'listener server' and then the 'listener server' can basically 'relay' the information to the handler.

Now, I've only thought about this for a few minutes ... and I haven't tried to put it into practice, not sure if I can 'late bind' "external interface callbacks" with the "early-load" SWF ... or if all the "addCallback" methods have to be executed as part of the "creationComplete" process or not.  Knowing what I know so far of ActionScript and Flash, I'm thinking it's just some sort of a goofy limitation either with the Flash Player 9 Plugin ... or with the way Internet Explorer allows plugins access to the page's JavaScript run-time.

Either way, I'll probably be trying to put one of the two idea's into practice, as it will be a required feature set for the framework I'm building.

I'll write more about the final solution, and possibly some example code for those who may be struggling with the same issue.

JavaScript, CRC32, MD5 and SHA-1 …

Jon Davis and I were talking and he sent me a link to this thing called "TIDE", which is apparently a javascript IDE written entirely in ... Javascript. While digging through the examples provided, I noticed that one of them was a CRC32 function written in Javascript. Jon, being the curious one that he is, decided to snoop around on Google for a bit and found a site called "Web Toolkit" which has a bunch of various code snippets for different types of things (JavaScript, CSS, DHTML and even PHP). In the JavaScript section you can find code for implementing CRC32, MD5, SHA-1, SHA-256 and a few more functions.

Jon runs a website called CacheFile.net and thought these scripts would be fairly useful to the community as a whole if he wrapped them up into a nice JavaScript class object... and so he did.

You can find this resource at: http://cachefile.net/scripts/webtoolkit.info/

You can also find Jon's original post on this subject here: WebToolkit.info Scripts Wrapped

jExpressionist, a jQuery Expression Builder and Test Suite

Ok, so ... I was thinking to myself, hey ... you know those Regular Expression Helper and Test Suites out there (RegEx Buddy, etc) ... well, what about a jQuery Expression Test Suite? Why not, right?

So, I started working on one ... and decided to call it "jExpressionist" (yeah, I know, how original, eh?).

You can check out jExpressionist, in all of it's ridiculously lacking glory here:

http://projects.zoulcreations.com/jquery/jexpressionist/

I'll be tweaking it a bit here and there as time goes by, I have a few changes on my local test server already ... but somehow managed to break the IFRAME based preview-pane when I did a few $.dialog() statements ... when it's fixed, I'll upload a 'themed' version of jExpressionist.

jQuery-based Card Match Demo

This is a totally unfinished, and practically abandoned demo I was working on in an attempt to learn jQuery. It's basically your standard 'Memory' style game, however, the cards dont flip over (I got lazy, yeah yeah).

You can try it out here: http://projects.zoulcreations.com/jquery/match/