jQuery Morph Preview

I was looking through some of the features offered by MooTools, and came across the Fx.Morph demo. I liked the look and feel of this and have seen it before in the past. However, in the past, I assumed it worked much like the common jQuery.animate(css,options) function. I actually looked at the demo and realized, it was morphing from one named style to another, without passing the actual style information into the ‘animation’, just the ‘morph to’ CSS class.

I did a bit of research, and found out that it’s pretty easy to retrieve the current stylesheets and CSS Rules in Firefox (Safari and Opera also support this, to my knowledge) and so, began to create a simple ‘jQuery.Morph‘ plugin for myself. I threw up a quick demo page, that is actually just a pseudo-recreation of the MooTools Fx.Morph demo (same Markup, same Style). You can compare the two and see some minor differences … namely the background color not fading in as smoothly as it does with MooTools.

I hope to be able to finish this up at some point and release it to the general public.

You can view the preview here:

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

UPDATE: I looked into the IE Support a bit more and figured out how to use document.styleSheets instead of the original method, and jquery.morph.js has been updated to reflect that.  However, there seems to be a small bug in jQuery 1.2.3 (maybe not so small? ) that is throwing errors in IE when you try to animate things like ‘color’ and ‘overflow’ (basically, anything that does not map back to a ‘unitable numeric’).

[js]fx.elem.style[ fx.prop ] = fx.now + fx.unit;[/js]

This is the offending code, in the _default for the step.  I didn’t look through jQuery enough to figure it out (thousands of lines of code without a ‘goto definition’ isn’t fun to debug) but I believe this should be considered a bug … especially since the code does not validate either before calling this _default function or in the _default function.  As it’s a “default” handler, it should assume all possible types of values and gracefully exit if it’s “no good”.  Which, it appears to do in Firefox, but that could just be because Firefox ignores when you try to set a style to an invalid value, and IE is simply saying “Hey, dummy, you cant do that” (forgiveness is a nice thing, you know?).

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)

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/

« Older Posts