Today I found out I could extend the functionality of __EXISTING__ html classes with javascript.<\/p>\n
I was manipulating DOM objects, better known as HTMLElement objects, and I needed a way to print the HTML that represents the tag of the object, not what’s contained by the tags… a friend told me there was a method called “outerHTML”, and I thought he was joking, but it certainly makes sense after the precious “innerHTML” method (which is one of the only things which I thank IE for).<\/p>\n
So, the same story for outerHTML, it is not supported by mozilla browsers, but little did I know, that existing class functionality can be extending using the prototypes… see how you can add .outerHTML compatibility to your page, just paste this in one of generic libraries:<\/p>\n
\n\/\/In order to allow .outerHTML in Firefox, we add this.\nvar _emptyTags = {\n \"IMG\": true,\n \"BR\": true,\n \"INPUT\": true,\n \"META\": true,\n \"LINK\": true,\n \"PARAM\": true,\n \"HR\": true\n};\n\nHTMLElement.prototype.__defineGetter__(\"outerHTML\", function () {\n var attrs = this.attributes;\n var str = \"<\" + this.tagName;\n for (var i = 0; i < attrs.length; i++)\n str += \" \" + attrs[i].name + \"=\"\" + attrs[i].value + \"\"\";\n\n if (_emptyTags[this.tagName])\n return str + \">\";\n\n return str + \">\" + this.innerHTML + \"<\/\" + this.tagName + \">\";\n});\n<\/pre>\nNow If you’re doing something say with scriptaculous…<\/p>\n
someTD = Builder.node(‘td’, {‘valign’:’top’},[someNode, someNode2, someNode3])<\/p>\n
and you need to get the HTML for someTD, all you do is:<\/p>\n
someTD.outerHTML<\/p>\n
and it will work on both IE and Firefox.<\/p>\n
Enjoy.<\/p>\n
Enjoy.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today I found out I could extend the functionality of __EXISTING__ html classes with javascript. I was manipulating DOM objects, better known as HTMLElement objects, and I needed a way to print the HTML that represents the tag of the object, not what’s contained by the tags… a friend told me there was a method […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15,30],"tags":[],"class_list":["post-402","post","type-post","status-publish","format-standard","hentry","category-code","category-geeklife"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-6u","jetpack-related-posts":[{"id":352,"url":"https:\/\/www.gubatron.com\/blog\/internet-explorer-javascript-vs-firefox-ajax-error-recovery-in-firefox\/","url_meta":{"origin":402,"position":0},"title":"Internet Explorer Javascript vs Firefox: AJAX Error Recovery in Firefox","author":"gubatron","date":"August 4, 2006","format":false,"excerpt":"After a good 4 hours or more, we finally found the error, it was our bad, but Firefox was helping us, Internet Explorer was keeping the standards but not reporting a warning or recovering from our fault... We're currently using a complex ajax call that needs to pass a bunch\u2026","rel":"","context":"In "AJAX"","block_context":{"text":"AJAX","link":"https:\/\/www.gubatron.com\/blog\/category\/ajax\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2660,"url":"https:\/\/www.gubatron.com\/blog\/5-object-oriented-programming-principles-learned-during-the-last-15-years\/","url_meta":{"origin":402,"position":1},"title":"5 Object Oriented Programming Principles learned during the last 15 years","author":"gubatron","date":"February 1, 2012","format":false,"excerpt":"It was about 15 years ago when I first created my first class. I went from thinking of Object Oriented programming as this awesome paradigm I should know about, I remember having all these mental models of what objects where and learning all this new vocabulary that I really didn't\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":436,"url":"https:\/\/www.gubatron.com\/blog\/how-to-remove-elements-from-a-listbox-in-javascript-ie-and-firefox\/","url_meta":{"origin":402,"position":2},"title":"How to remove elements from a listbox in Javascript (IE and Firefox)","author":"gubatron","date":"January 11, 2007","format":false,"excerpt":"\/\/By Gubatron, just a silly function to clear the contents of a listbox object var ua = navigator.userAgent.toLowerCase(); var Browser = new Object() Browser.isIE = window.ActiveXObject ? true : false; Browser.isFirefox = (ua.indexOf(\"firefox\")!=-1); function clearListbox(listboxObject) { if (Browser.isFirefox) { \/\/in firefox \"Option\" objects remove themselves. var options = listboxObject.options while\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3386,"url":"https:\/\/www.gubatron.com\/blog\/how-to-make-a-foreach-function-in-javascript\/","url_meta":{"origin":402,"position":3},"title":"How to make a “foreach” function in JavaScript","author":"gubatron","date":"April 4, 2015","format":false,"excerpt":"I thought this would be a simple exercise in case of having to interview someone for a JavaScript position. \"How would you make your own 'foreach' in JavaScript\" I came up with the following solution: \/\/ \/\/ collection: A list of objects. \/\/ onElementIterationCallback: The function to be called on\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1098,"url":"https:\/\/www.gubatron.com\/blog\/remaining-questions-about-palms-pre-and-its-webos\/","url_meta":{"origin":402,"position":4},"title":"Remaining Questions about Palm’s Pre and it’s WebOS","author":"gubatron","date":"January 13, 2009","format":false,"excerpt":"It was an impressive presentation the one Palm gave about it's new product, but there are still many things they didn't mention: Battery life? It's cool that it has a removable battery, but how long does it last? What can we build on it? They mentioned HTML, CSS and Javascript\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3,"url":"https:\/\/www.gubatron.com\/blog\/javascript-quicksort-implementation-with-dynamic-comparator\/","url_meta":{"origin":402,"position":5},"title":"Javascript Quicksort implementation with dynamic comparator.","author":"gubatron","date":"February 29, 2012","format":false,"excerpt":"[javascript] Array.prototype.swap=function(a, b) { var tmp=this[a]; this[a]=this[b]; this[b]=tmp; } function quickSort(array,comparator) { qsort(array,0,array.length,comparator); } \/** * NOTE: the comparator is a dynamic function you will define like so comparator(a,b) { if (a > b) return 1; else if (a < b) return -1; else { return 0; } } *\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}