Friday, September 12, 2008

(about john resign and dojo)

Visual Jquery
  • "window.addEvent() is not a function" as it is in mooTools. I want to add an event to the resize() and scroll() functions of the browser window. Ok, let's see how to add an event to the browser onLoad using jQuery. Thanks to the Jquery site, J.Eggers, random acts of coding and Jorn Zaefferer I got my first glimpse at how to go about this.
Here is how I managed to get the onload events to work in JQuery. You use "ready" instead of adding the onload event to the window. Next...


$(window).ready(function(){
$(window).resize(function (evt) {
log.positionLog();
});
$(window).scroll(function(evt) {
log.positionLog();
});
});



  • Success. Is it right, is it wrong? This is where things get really hard for coders who honestly don't have the real deep, deep understanding of the frameworks. I might be happy that this works, but maybe I don't have to call the window object from within the window object. Why can't this.scroll() work once inside the object event? I don't know and honestly, I am sure I will learn in time. It is things like this that cause memory leaks and bugs. The framework allows me to do what I think is right, and I am happy that it works. But is it really right?. Time will tell.
Turns out all I need to do is this:

$(function(){
// add my events in here.
}

This is a nice shortcut.

  • Now that I have a basic understanding of at least a few ways to add events to elements, what of creating elements by scratch? in mooTools, i simply say new Element(type, options).
In Jquery, again, there are several ways to do this, but I chose a simple way and it worked.

this.container = $("

Hello

").appendTo("body");


- i dont like how mouseleave and mouseenter have no shortcuts, so now I need two different ways to bind events.

-I dont like how I have to print HTML into the div call, but i guess it may make things easier, I just prefer the conceptual difference with addEvent.

- I dont like how I have to dance to get the browser version. Much easier in mooTools.jQuery.browser.msie && (jQuery.browser.version <= 7)

- whereas I found the addition of dynamic elements to the dom intuitive and quick with mooTools, I find it frustrating with Jquery.

- I love the css styling. I love computed width and height. Mootools does this too, but it seems easier in JQuery.

- $each is now $.each and of course you don't need to bind this.

- You use a string id "#logContainer" to find an element you just added.

- $$(item) os $(item).get() in jQuery.

- fireEvent is trigger()

- makeDraggable with an onDrag function becomes draggable with drag function.

- getCoordinates has no bottom or right style.

- containment is a nice property on draggable element.
- the draggable control doesn't take into account a scrollable area, and pushes your element to the top.

- I love how you can call width() to get the offsetWidth.

- i use log.append() to add ChildNodes, andin mooTools I was also supposed to do that, but I forgot to. I like how JQuery seems to nicely guide you towards using the framwork.

The problem was, when I alerted $("logContainer").innerHTML, I kept getting "undefined".

issues: i kept finding old jquery code examples. HArd when stuff just doesnt work.


No comments: