{"id":327,"date":"2007-01-09T13:49:10","date_gmt":"2007-01-09T19:49:10","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2007\/01\/09\/dom-sticking-again\/"},"modified":"2007-01-09T13:49:10","modified_gmt":"2007-01-09T19:49:10","slug":"dom-sticking-again","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2007\/01\/09\/dom-sticking-again\/","title":{"rendered":"DOM Sticking Again"},"content":{"rendered":"<p>Via <a href=\"http:\/\/ajaxian.com\/archives\/custom-dom-attributes-vs-class-css-styles\">Ajaxian<\/a> comes <a href=\"http:\/\/unspace.ca\/discover\/attributes\/\">this article<\/a> discussing the merits of custom XML attributes instead of over-loading the class attribute for functional purposes.  <!--more--><\/p>\n<p>I came to this same realization many moons ago when first discussing <a href=\"http:\/\/blog.codedread.com\/archives\/2005\/12\/21\/how-to-enable-dragging-in-svg\/#DOMSticking\">how to enable dragging<\/a> of SVG elements around the browser window.  At the time, I used custom XML attributes (<i>dragx<\/i>, <i>dragy<\/i>) as a means of easily tracking the dragged position of an entity instead of having to do some horrendous parsing of SVG transform attribute strings.  I marvelled at this technique (which I called \"DOM Sticking\" because I didn't know what else to call it) for its ease of attaching metadata to elements within an XML language.<\/p>\n<p>At the end of that Drag SVG article, I had pondered turning my demo into a library and thought of using a class (<i>class=\"draggable\"<\/i>) to indicate whether an entity is draggable.  But when I finally sat down to <a href=\"http:\/\/blog.codedread.com\/archives\/2006\/01\/05\/svg-toy-libraries-drag-and-snow\/#dragsvg\">turn it into a JS library<\/a>, I realized how painful it would be to parse the class attribute too.  In the end, I finally ended up using attributes in a custom XML namespace, almost as easy as custom XML attributes (<i>drag:enable=\"true\"<\/i>).<\/p>\n<p>Shouldn't that make both the \"XML nazis\" and the CSS purists happy?<\/p>\n<p>By the way, here's the <b><a href=\"http:\/\/www.codedread.com\/dragtest3.svg\">DRAG SVG DEMO<\/a><\/b> in case you missed it the first time around.  Works in <a href=\"http:\/\/www.opera.com\/\">Opera 9+<\/a>, <a href=\"http:\/\/www.mozilla.com\/firefox\/\">Firefox 1.5+<\/a> and IE+<a href=\"http:\/\/www.adobe.com\/svg\/viewer\/install\/mainframed.html\">ASV<\/a>.<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.codedread.com\/googleads.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Via Ajaxian comes this article discussing the merits of custom XML attributes instead of over-loading the class attribute for functional purposes.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,46,11,28,30],"tags":[],"class_list":["post-327","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web","category-xml"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/327\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}