jqPuzzle Skinning Patch
This modified version of jqPuzzle allows for completely reskinned puzzles to be created. Examples of this can be seen on the new www.DiscoverHorses.com website under their Kids->Games section.
Where I spend my day …
my desk, where I spend all my time.
jQuery Growl 1.0.1 Released
The first ‘stable’ release of jQuery Growl has been posted to the jQuery Plugins Repository. This release does not bring any ‘major’ new features to the table, but it does bring with it a nice long ‘testing phase’ where the plugin has been tried, tested and proven to work on a number of ocassions. There is one new feature, which is the ‘close’ link that can now be included in the noticeTemplate — this link, when available, has a ‘click’ event assigned to it which calls ‘notice.remove()’ when clicked.
Also, James over at Honest Illusion has written up some decent documentation for the plugin, just ignore the ‘rant’ about my lack of documentation and skip to the good part … thanks again James.
On that note, if you’ve been using jQuery Growl on your site, please leave a comment on my blog and let me know. I’d love to see some of the implementations that have come about since the creation of the plugin. Thank you.
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.).
CakePHP 1.2 and JSON
While working on BartenderDB.com I decided to try to make the ‘data entry’ as ‘fluid’ as possible, meaning … lots and lots and LOTS of AJAX. Using jQuery of course.
While looking for some nice Cake 1.2 JSON information, I ran across an interesting post on Pagebakers called Using JSON in CakePHP 1.2. I gave it a quick read (actually, I skimmed it for code snippets and just rolled my own from the ‘general idea’) and it helped out tremendously. I was up and running with JSON in under 5 minutes. Great resource, and kudo’s to the poster.
After setting up my JSON Views, I realized that Cake was still in ‘debug’ mode — so I modified my views/layouts/json/default.ctp and simply added a Configure::write(‘debug’,0); to it … and viola, problem solved, all my JSON requests were free of Cake’s added dev/staging information.
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:
-
var result = eval('55' + '+' + '100');
Which resulted in the numeric value of 155, of course.
IE7′s Implicit CSS Quirks
If your developing an absolutely positioned site layout, and wondering why IE always seems to be a bit 'off', it might be because of the odd implicit CSS values that it has. For example, the BODY element has an implied 2px (medium) thick border, that is set to the 'inset' style.
This is done, I guess, to give the page a visually appealing look inside the IE container ... but is obnoxious as it has to be overriden in CSS explicitly and if you forget ... your layouts are all off.
I wrote a rather simple QUnit test, as an exploration of the QUnit framework and found that my tests kept failing in IE due to a 2px difference in absolutely positioned elements offsets -- which, should always be the top/left values when the element is explicitly positioned absolutely (top and left are both set, no inheritence).
To determine this, my test utilized the isObj() function of QUnit, and looked similar to this:
-
module("Absolute Position");
-
test("Top Left (0,0)", function() {
-
$('#testDiv').css({position:'absolute', top: 0, left: 0});
-
var expected = {top: 0, left: 0};
-
ok(true, $('#testDiv').offset().left + ', ' + $('#testDiv').offset().top);
-
isObj(expected, $('#testDiv').offset(), "Element should be {left: 0, top: 0}");
-
});
The first assertion, 'ok', was done simply so I could see the top/left values in the event of a test failure. I think a nice addition to the QUnit framework would be a 'pretty print' function for objects so you could see exactly why a test failed when the expected result is a simple object (no functions attached to it).
QUnit for jQuery
I've been intriqued by the concept of Unit Testing for quite some time, though, honestly, have never really looked much into it. A coworker sent me a link to a LosTechies.com blog and now I'm even more intriqued ... Unit Testing specifically for my jQuery, hrm .... now that sounds interesting.
I'll be exploring this on my free time for sure.
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:
-
<select id="myFirstStateDropDown">
-
<option value="1">Alabama</option>
-
<option value="2">Alaska</option>
-
....
-
<option value="50">Hawaii</option>
-
</select>
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:
-
$(document).ready(function() {
-
var replicated = $('select.replicated');
-
for(var x = 0; x <replicated.length; x++) {
-
var rel = $(replicated[x]).attr('rel');
-
var src = $('#' + rel);
-
var dst = $(replicated[x]);
-
dst.empty();
-
dst.append($('option', src).clone());
-
}
-
});
Wait ... uhm, we're missing something ... the destination place holders, so let's add some in:
-
<select id="mySecondDropDown" rel="myFirstStateDropDown" class="replicated">
-
<option value="">-- Any --</option>
-
</select>
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.)
jQuery Javascript Library has Problems?
I was trying to load the jQuery Javascript Library docs today, and recieved this ridiculously amusing response from the server.
Now, I'm not a marketing wiz or anything... but I do believe, that's just not a good error message.
I'm going to continue enjoying my usage of the jQuery Javascript Library, even though it's developers think "it has a problem".
Newer Posts »