giovedì, luglio 20, 2006

standardise IE setAttribute (Part 2)

I go back to this subject because I've done some improvements to
the custom comment script that should Standardise IE 5.x setAttribute,
I create no other Object that could collide, look:


document.createElement = function(cE,interface){
//this is for DOM node not dinamically created
onload=function(){
var list=document.all;
var max=list.length;

while(--max)
{
list[max].getAttribute=interface.getAttribute;
list[max].setAttribute=interface.setAttribute;

}
//HTML node
list[0].getAttribute=interface.getAttribute;
list[0].setAttribute=interface.setAttribute;
}


return function (tagName) {
var element = cE(tagName);
element.getAttribute=interface.getAttribute;
element.setAttribute=interface.setAttribute;

return element;
}
}(document.createElement,{

getAttribute:function (attribute) {

switch(attribute){
case "class": attribute = "className";break;
case "for": attribute = "htmlFor";break;
case "style": return this.style.cssText;break;
case "type":return(this.id)?((document.getElementById)?document.getElementById(this.id):document.all[this.id]).type:this.type;break;
case "accesskey":return this.accessKey;break;
case "maxlength":return this.maxLength;break;
}
return this[attribute];
}

,setAttribute:function (attribute, value) {

switch(attribute){
case "name":return document.createElement(this.outerHTML.replace(/name=[a-zA-Z]+/," ").replace(">"," name="+value+">"));
case "class": attribute = "className";break;
case "for": attribute = "htmlFor";break;
case "type":
var me=this.parentNode;

if(!/id=/.test(this.outerHTML))
this.id=this.uniqueID;
if(me){
this.outerHTML=this.outerHTML.replace(/type=[a-zA-Z]+/," ").replace(">"," type="+value+">");




var t=me.childNodes;
var max=t.length;
for(var i=0;i<max;i++)
if(t[i].id==this.id){
t[i].getAttribute=this.getAttribute;
t[i].setAttribute=this.setAttribute;
}
}else this.type=value;

return;break;
case "accesskey":this.accessKey=value;return;break;
case "style": this.style.cssText =value;return;break;
case "maxlength":this.maxLength=value;return;break;
}

if(attribute.indexOf("on")==0){


this[attribute] = function(){eval(value)};

}
else
this[attribute] = value;
}
});


to use it just insert this line of code:

<!--[if lt IE 7]><script language="javascript" type="text/javascript" src="IEDOM.js"></script><![endif]-->

where IEDOM.js is the name of the script ..
Enjoy!


P.s. Look at http://www.devpro.it/JSL/ for a Great Library (
I would make a post for who don't want to Prototypize Object but won't use this great library!!
)

Update:
there are two known issues with this library:
first, if you use innerHTML instead of createElement you don't have the standard setAttribute,
so the solution is getting the node you are adding and extending the methods to each node it has

the second issue is the setAttribute("name") not updating dom. You was forced to return the correct node with setAttribute, so

var t=document.getElementById("x");
var n=t.setAttribute("name","usrname");
if(n)t=n;

now t is correct ;)

martedì, luglio 11, 2006

Another Pearl in the Javascript World

He Done It!


After my IE setAttribute solution (get here the complete solution along with my framework)


Andrea Giammarchi wrote a solution for the replace method, now you can use replace with a function as parameter, and is Standard ECMA compatible!


Try it or Get It!


It works on IE 5.x+, FF, NN,Opera, Safari, Konqueror ,


currently I haven't the complete compatibility list because is in a test state.


Now Javascript world is more standard!!! ;)


Example:


ECMA define that the function get the follow parameters


a)the Match of Regex passed as 1st argument


b)the N submatch (also known as parenthetical matches) with 0<N<99


c)position of the match in the original string


d)the original string


so "a12b34".replace(/[0-9][0-9]/g,function(a,b,c){return (Number(a)+1);}) must return "a13b35" in all the browser ;)