So we can do $(this).hide("fade"); and it does the same as the code before, fade the element to 0 and then hide it, $(this).show("fade"); would make the element visible and fade to 1$(this).hide("blind"); or $(this).hide("slide"); are some other things that culd be implemented

Theres allot of good implementations for Properties, and on Elements they are very usefull

* Usage:* new Next.Color(r,g,b);//parameters* new Next.Color([r,g,b]);//array with 3 numbers* new Next.Color({R:r,G:g,B:b});//object with R,G,b or r,g,b members* new Next.Color("RGB(r,g,b)");//String RGB CSS* new Next.Color("#FFFFFF");//String HEX CSS

You can export to:ArrayObjectRGBHEX

It have a helper function very cool when we need to check and use some color, lets say:

Friday, January 18, 2008

In Java a property is for example "int getX()" "setX(int i)" this property is called "x"

In JavaScript 1.6 we have support for getters and setters, so we are able to make x a property that calls a different callback when is accessed, so instead of do "var a=this.getX()" we can do "var a=this.x" and it will internal call a getter funtion tomcalculate and return the value

Its all nice and good but.... Internet Explorer dot support Javascript 1.6, in fact they only support 1.2...

Unfortunately there is no way for a JavaScript library to fix that, well some guy did it but using some dirty VBScript methods, thats not good....

So my idea was to provide some kind of Properties support but since we don't have a way to do it as it should lets extend it a little bit.

So with my code we can't make "var a=this.x;" but we can do:

var this.x.get(); this.x.set(v); //And the neater one var anim=this.x.getAnimation(options) this.x.animate(options)//same as before but automatic starts animating

On "options" we specify "from"( optional: if not specified it uses current value), "to" ("where to animate"), duration (the time it takes), interval ( for make animation smother or less smother )

So its the same options as we pass to a Next.Animation, it actually uses it, so you can do with the returned animation: play, reverse etc...

Now.... How to implement a property? Well, i am posting a simple( and a bit stupid example )

At the moment only Next.Number is done.The first parameter is the object were the functions will be applied, this case is null because we the functions are on global scope, the other 2 parameters is the getter and the setter function.

Ok this may look hard to implement and don't look so nice, you are right!

But this property system can be applied on HTMLElement, since the property need to be registed on the thisObject i decided to extend the HTMLElement.extend so it also create the propertiesSo we have HTMLElement.props that is an array, you can add objects with property options and they will be automatic applied to HTMLElement whan you use Next.byId, $ or other element functions

So i decided to implement a basic Animation system, it might look stupid and uneusefull, but when i post other thing that will be based on this you will understand.

The animator class is simple to use

var anim = new Next.Animation({onStep:function(v){ //v will be between 0-1}});

You can specify other options like:duration - the time the animation will take - defaut=1000interval - the interval between animation - default=20onStep - the callback function called each step of animationonComplete - the callback function called when animation ends

Now what you can do with "anim" object?

seekFromTo(from,to)//seek from one position to otherseekTo(to)//seek to the positionjumpTo(to)//jump to position without animatetoggle()//toggle directionplay()//play from 0 to 1reverse()//play from 1 to 0stop()//stop animation

And for now its all i have on animation, it might need some fine tune to fix some stuff

Hi, we all need sometimes to get the style of one HTMLElement, and most times we do

var a=theelement.style.color;

If there was a "color" rule on the element own style, that will work. But it wont work if the "color" was set on a CSS rule.So that breaks, for example in PrototypeJS they have $("elid").visible() that should return true if the element is visible, how they check?

element.style.display!="none";

But that will say the object is visible if i set it to display:none on a CSS rule

While working with PrototypeJS i had lots of troubles cause i always had to use style="display:none" or the animation stuff ( Script.aculo.us ) would not work.

Tuesday, January 15, 2008

In most modern browsers there are Interfaces for all kind of elements. All them extend the base Interface: HTMLElement. For example a div tag use the interface: HTMLDivElement that extends HTMLElement.

//now we need to create a helper function to extend the object on unsupported browsersHTMLElement.extend= function(element){if (element && !element._extended && !Next.browserExtensions){for (var i inHTMLElement.prototype){ element[i]=HTMLElement.prototype[i]; } }return element; };//this is a marker, so we dont exten the same object each time we need it HTMLElement.prototype._extended=true;

HTMLElement.prototype.hide=function(){

this.style.display="none"; } ;

//now we need a function to get the element and extend it Next.byId=function(element){returnHTMLElement.extend(document.getElementById(element)); };

Next.byId("test").hide();//Now it works on all browsers

This implementation is simple and not much heavy and works well.Others would make everything rely on Object extenders

With some work we could do it able to have different functions for different tag's.

Its all for now! Its time to implement ll this on Next!The next post i might talk about animation say tuned!