What's been happening?

September 1st, 2008

Posted at 10:47pm by Stan

I've been playing around with Google Gears on an application I work on in my spare time. That application is heavily driven by jQuery, and the decision to leverage Gears came with mixed emotions. In the developer's FAQ there's a pretty diagram which recommends utilizing a "data switch" between the user interaction and the subsequent process. I think this is Google's clever way of saying, make your application driver-driven! This makes sense and fits the design too...

Let's get hypothetical and say we have an interface for your hypothetical driver has two methods, one for reading and one for writing. In driver implementation A AJAX requests are fired off for reading and writing your data, however in driver implementation B we'll rely on locale storage - in this case, Gears. With jQuery you normally just write the act of reading or writing into the handlers, however that just doesn't cut it once you have alternative sources that those handlers need to deal with. One option is to simply test for which "driver" you need and use conditionals to get where you need to going. I like to look ahead though, and surmise that some day I may want to add support for Safari's HTML5 Database Implementation in addition to my online mode and my Gears support. Who knows too... if the application ever gets ported over to Adobe AIR we've added a fourth data source to the mix.

The point is we need to abstract this stuff out. One option is to simply test if you need a driver and then overwrite the handlers, first unbinding them and binding new ones in their place. But what do you do when you want to switch back? We can start encapsulating stuff in functions for binding all of these elements, but we wind up reusing a lot of code in the process. As best I can tell, right now there is one other option, and that's to create an object and have all of the event handlers reference that option for certain tasks. This object then can be dealt with as you're switching between states, but ultimately parallels a traditional driver-based design pattern. The down side to this is it suddenly doesn't look like unobtrusive javascript code (ie. jQuery).

I'm wrestling with what my alternatives to that final solution are... right now it doesn't seem like there are any. I confess I was tempted by Low Pro for jQuery, but suspect this will be limiting in the long run. I'm wondering if anyone else has any ideas? If so, drop me an e-mail I'd love to hear about them.

August 17th, 2008

Posted at 10:03pm by Stan

I have released jGrowl 1.1.1 this evening on the jQuery plugin page. This is a simple maintenance release fixing some minor issues that arose in 1.1.0. One new feature has been added, which is an optional setting to customize the content of the [ close all ] link for containers of multiple notifications. Additionally I have expanded the examples to include some more flashy skinning, and I have added a new example called jTweet. jTweet uses Twitter's javascript API to fetch twitter updates and generate several jGrowl notifications for them. The latest release can be downloaded here. All existing jGrowl users are encouraged to upgrade to this release.

July 8th, 2008

Posted at 9:07pm by Stan

I got back to Pittsburgh yesterday evening to find that jGrowl had received some loving over at WebAppers and DownloadSquad. I think this was because of the jQuery Twitter page. Anyhow, when people get interested in my work I get excited which in turn motivates me to work on things. I've dressed up some notifications with other styling here, including the use of Smoke.png from the MooTools Growl plugin and flora from jQuery UI.

June 18th, 2008

Posted at 7:14am by Stan

I'm very happy to announce the immediate release of jGrowl 1.1.0.

This latest release features the ability to create multiple container instances for jGrowl, allowing a developer to raise and create various notifications in various location on the user's screen. This functionality is accessible via jGrowl() on any normal jQuery selector, note that the selector should belong to the container which holds notifications. Additionally the core method in previous releases, $.jGrowl() has been altered to create a default container. This should maintain backwards compatibility for users of previous releases and additionally provides a quick setup route for using jGrowl.

The demo file has been extensively updated to demonstrate the multi-container aspect of jGrowl, as well as to introduce several minor new features. It is highly recommend that you consult this demo file for further usage information. This release is still fully compatible with Internet Explorer 6.

Update 8/21/08: You can download jGrowl from it's jQuery plugin page at: http://plugins.jquery.com/project/jgrowl

June 13th, 2008

Posted at 5:01pm by Stan

I seem to be on a roll as of late with jGrowl... Today I spent some time working on supporting multiple instances. Hypothetically, someone may want to add more then one jGrowl container to their page, perhaps one in the top left corner and also one in bottom right. With version 1.0.4 this was not possible, jGrowl created a singular instance of itself and it could be docked in only one location. Not so anymore... In what will likely be the 1.1.0 release, slated sometime this weekend - you can have as many jGrowl containers and instances as you want and position them anywhere on the screen. The API has changed quite a bit due to this, but don't worry the old API is maintained through a wrapper method. I've expanded the demo file to demonstrate some of the new possibilities, and I'll update the projects and plugin page as soon as I have finalized testing. Stay tuned...

June 13th, 2008

Posted at 12:34am by Stan

I've just release jGrowl 1.0.4, this is a maintenance release that introduces full support for Internet Explorer 6 and thus making jGrowl compatible with all major web browsers. The download is available off of my projects page or at the jQuery Plugin page. If you're a user of jGrowl I strongly recommend upgrading to this release.

June 12th, 2008

Posted at 3:16pm by Stan

jGrowl support for IE6 right now stinks. It stems from two issues, the first is IE6's lack of support for "element > element" selectors in stylesheets. The jGrowl stylesheet uses this quite extensively for aligning styles to the nodes that it generates. The second is IE6's lack of support for the fixed position style. I've included some sketchy CSS hacks for IE6 in the past, but I also confess I haven't paid much attention to IE6 since my earliest release.

Today I spent some time chewing away at the IE6 issues, and I'm happy to say that I believe I'll have a new release (1.0.4) to roll out tomorrow that fully supports IE6. I continue to use CSS hacks, but this time ones that are a little more friendly and don't require Quirks Mode. I've also separated other browser's styles out using the > in selectors. Style rules that need to be applied to IE and everything else no longer have > in them. Finally, there's an IE6 class that is added to the jGrowl container by the actual plugin when the user is viewing the page in IE6. Additionally I've added the zoom fix for the deault opacity styles since jGrowl, as far as IE is concerned, has no layout.

This release should roll out tomorrow, I'll post an update here and the jQuery plugin page will have the new release as well. For serious users of jGrowl, I highly recommend this release since it opens up compatibility to a wider range of web users.

June 11th, 2008

Posted at 2:32pm by Stan

Growl

I rolled out a new version of my jGrowl plugin today. For those who aren't familiar with it, it's a jQuery plugin that generates unobtrusive user-land messages. I first created it for PageSite and it has since worked its way into just about everything I do these days. This latest release focuses on customization and also includes several bug fixes for the previous release.

[ read more ]

April 15th, 2008

Posted at 12:00am by Stan

The Higher Things website uses a really cool jQuery plugin called Superfish for it's black navigational bar. I first stumbled across this plugin while dealing with an animation problem for a home-grown implementation when we were redesigning the site. Rather then re-invent the wheel I decided to just use Superfish. One of the things that I was never really keen on was the lack of an animation to close the menu when, it just disappears as opposed to when it appears it slides in to view.

As a result I've modified superfish for HT's website and thought I would share the hack here for anyone else interesting in getting superfish to animate when a menu item closes.

First, we need to change some options around, we're going to remove the "defaults" for "animation" and replace it with the following (this should be at line 20):

animationOpen : {opacity:'show'}, animationClose : {opacity:'hide'},

Second, around line 78 we need to change how the method responsible for hiding a superfish menu functions, replace the "hideSuperfishUl" and "showSuperfishUl" method with this one:

hideSuperfishUl : function(){ var o = $.superfish.op, $ul = $('li.'+o.hoverClass,this).add(this); $ul.find('>ul').animate(o.animationClose, o.speed, function() { $(this).css('visibility','hidden'); $ul.removeClass(o.hoverClass); o.onBeforeShow.call($ul); }); return this; }, showSuperfishUl : function(){ var o = $.superfish.op, $ul = this.addClass(o.hoverClass) .find('>ul:hidden').css('visibility','visible'); o.onBeforeShow.call($ul); $ul.animate(o.animationOpen,o.speed,function(){ o.onShow.call(this); }); return this; }

That's it! I set the above defaults following the release to use opacity for animating, however on HT's we use { height: 'show' } and { height: 'hide' } respectively for the animations. You'll note in the hide method we added an animation and then after that animation has finished executing, in a call back we remove the hover class and call the closing callback. In the show method all we did was change the name of the animation property to be used, since we now have two.

March 29th, 2008

Posted at 12:00am by Stan

Earlier today I release jGrowl 1.0.2 on the jQuery plugin page, and I also uploaded the release locally as well. This release is bundled into a zip file and contained within it is a demo page and an accompanying stylesheet. There are some pretty substantial changes in this release, including...

  • Styling is now done externally, not inline.
  • Messages can have an optional "theme" passed in, which defines secondary classes to be applied to messages. This allows for messages to be themed on a per-message basis.
  • Animation speed can be customized.
  • The global closer can be disabled.
  • Added an optional callback to the global closer.
  • Added an optional open and close callback to the individual notifications.
  • Customize the life of a message on a per-message basis.
  • jGrowl automatically starts itself up with the first message.
  • When there are no messages jGrowl will automatically shut itself down.
  • ...fixed various bugs in 1.0.1.

Overall this release is quite a bit better then the previous one. If you have any ideas for future features, or if you discover any bugs please feel free to contact me.

Update 8/21/08: You can download jGrowl from it's jQuery plugin page at: http://plugins.jquery.com/project/jgrowl

1    |    2    »    [2]
Powered by BlogSCL3 0.4.0alpha