jQuery… IBM endorsed?!?
Now that I have your attention, it's not completely what you are thinking, they haven't endorsed it for E-Com, but they have a very nice article written up in the DeveloperWorks under "XML - Web Development". I have toyed with jQuery a bit and I think it may be a better solution for simple animation and style changing. It is by no means a replacement for prototype (which is so powerful - for js - that it gives me headaches), but it is a nice solution to simple problems, and it has some very nice features (you can select anything, seriously, anything on the page). There's just one thing to remember... Unobtrusiveness is the key so remember to put everything in the "document ready" section.
$(document).ready(function() { // put all your jQuery goodness in here. }); |
OR you can use the short cut, like so...
$(function() { // Put more jQuery goodness here. }); |
So if you wanted to do a click event, you would do something like this.
$(document).ready(function() { $('#buttonDiv').click(function() { $('#grow').animate({height: 500, width: 500 }, "slow", function(){ alert('The element is done growing!'); }); //alert function }); //click function }); //ready function |
I threw in some extra commenting so you could more easily see the ending tags of each function (also this blog engine tends to remove all whitespace in the code section so while it looks pretty while typing, it usually comes out stripped...) Also something to keep in mind is that all javascript should be unobtrusive, meaning you shouldn't need to use onClick events unless you absolutely have to. So as typed in the jQuery example above, the line " $('#buttonDiv').click(function() {//do something} " would be something close to " docuement.getElementById('buttonDiv').click(function() {//do something} " in standard javascript.
Anyway, that is a quick intro to jQuery, check "Simplifiy Ajax development with jQuery" on DeveloperWorks for more.
Print This Post
Useful JScript Event Handlers
I was working on Freemotion - more specifically the consumer side where you can choose a vendor/distributor in your area - and noticed that the page didn't work in Firefox, but was working flawlessly in IE. Naturally this had to be fixed, as it is pure blasphemy to have IE working when Firefox doesn't. So I checked the event handlers on the select box and found an onkeyup, and an onchange. Now normally the onchange should be sufficient to change the page, however I ended up using an onmouseup in conjunction with the onkeyup. It fixed the problem, and now I post what I found on the interweb in my search for event handlers.
Useful javascript event handlers:
* onAbort - The user aborts the loading of an image
* onBlur - form element loses focus or when a window or frame loses focus.
* onChange - select, text, or textarea field loses focus and its value has been modified.
* onClick - object on a form is clicked.
* onDblClick - user double-clicks a form element or a link.
* onDragDrop - user drops an object (e.g. file) onto the browser window.
* onError - loading of a document or image causes an error.
* onFocus - window, frame, frameset or form element receives focus.
* onKeyDown - user depresses a key.
* onKeyPress - user presses or holds down a key.
* onKeyUp - user releases a key.
* onLoad - browser finishes loading a window or all of the frames within a frameset.
* onMouseDown - user depresses a mouse button.
* onMouseMove - user moves the cursor.
* onMouseOut - cursor leaves an area or link.
* onMouseOver - cursor moves over an object or area.
* onMouseUp - user releases a mouse button.
* onMove - user or script moves a window or frame.
* onReset - user resets a form.
* onResize - user or script resizes a window or frame.
* onSelect - user selects some of the text within a text or textarea field.
* onSubmit - user submits a form.
* onUnload - user exits a document.
Print This Post