http://snippets.dzone.com/posts Sat, 26 Jul 2008 15:16:47 GMT DZone Snippets: Sprsquish's Code Snippets http://snippets.dzone.com/posts/show/4349 Given a node this will return an array containing the XPath <br />Usage: <br /> <br />getXPath(document.getElementById('myelement')); <br /> <br /><code> <br /> function getXPath(node, path) { <br /> path = path || []; <br /> if(node.parentNode) { <br /> path = getXPath(node.parentNode, path); <br /> } <br /> <br /> if(node.previousSibling) { <br /> var count = 1; <br /> var sibling = node.previousSibling <br /> do { <br /> if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) {count++;} <br /> sibling = sibling.previousSibling; <br /> } while(sibling); <br /> if(count == 1) {count = null;} <br /> } else if(node.nextSibling) { <br /> var sibling = node.nextSibling; <br /> do { <br /> if(sibling.nodeType == 1 && sibling.nodeName == node.nodeName) { <br /> var count = 1; <br /> sibling = null; <br /> } else { <br /> var count = null; <br /> sibling = sibling.previousSibling; <br /> } <br /> } while(sibling); <br /> } <br /> <br /> if(node.nodeType == 1) { <br /> path.push(node.nodeName.toLowerCase() + (node.id ? "[@id='"+node.id+"']" : count > 0 ? "["+count+"]" : '')); <br /> } <br /> return path; <br /> }; <br /> <br /></code> Mon, 23 Jul 2007 20:57:04 GMT http://snippets.dzone.com/posts/show/4349 sprsquish (Jeff Smick) http://snippets.dzone.com/posts/show/3411 This makes it super simple to create a modal dialog box. The page will be dimmed into the background and the dialog box popped up over top of it. The overlay can be clicked to close out of the box. <br /> <br />Use it thusly: <br />new Dialog.box([element ID]); <br />$([element ID]).show(); <br />$([element ID]).hide(); <br /> <br />Simple right? <br /> <br /><code> <br />var Dialog = {}; <br />Dialog.Box = Class.create(); <br />Object.extend(Dialog.Box.prototype, { <br /> initialize: function(id) { <br /> this.createOverlay(); <br /> <br /> this.dialog_box = $(id); <br /> this.dialog_box.show = this.show.bind(this); <br /> this.dialog_box.hide = this.hide.bind(this); <br /> <br /> this.parent_element = this.dialog_box.parentNode; <br /> <br /> var e_dims = Element.getDimensions(this.dialog_box); <br /> var b_dims = Element.getDimensions(this.overlay); <br /> this.dialog_box.style.left = ((b_dims.width/2) - (e_dims.width/2)) + 'px'; <br /> this.dialog_box.style.top = '12px'; <br /> }, <br /> <br /> createOverlay: function() { <br /> if($('dialog_overlay')) { <br /> this.overlay = $('dialog_overlay'); <br /> } else { <br /> this.overlay = document.createElement('div'); <br /> this.overlay.id = 'dialog_overlay'; <br /> Object.extend(this.overlay.style, { <br /> position: 'absolute', <br /> top: 0, <br /> left: 0, <br /> zIndex: 90, <br /> width: '100%', <br /> backgroundColor: '#000', <br /> display: 'none' <br /> }); <br /> document.body.insertBefore(this.overlay, document.body.childNodes[0]); <br /> } <br /> }, <br /> <br /> moveDialogBox: function(where) { <br /> Element.remove(this.dialog_box); <br /> if(where == 'back') <br /> this.dialog_box = this.parent_element.appendChild(this.dialog_box); <br /> else <br /> this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay); <br /> }, <br /> <br /> show: function() { <br /> this.overlay.style.height = $('body').getHeight()+'px'; <br /> this.moveDialogBox('out'); <br /> this.overlay.onclick = this.hide.bind(this); <br /> this.selectBoxes('hide'); <br /> new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3}); <br /> this.dialog_box.style.display = '' <br /> }, <br /> <br /> hide: function() { <br /> this.selectBoxes('show'); <br /> new Effect.Fade(this.overlay, {duration: 0.1}); <br /> this.dialog_box.style.display = 'none'; <br /> this.moveDialogBox('back'); <br /> $A(this.dialog_box.getElementsByTagName('input')).each(function(e){if(e.type!='submit')e.value=''}); <br /> }, <br /> <br /> selectBoxes: function(what) { <br /> $A(document.getElementsByTagName('select')).each(function(select) { <br /> Element[what](select); <br /> }); <br /> <br /> if(what == 'hide') <br /> $A(this.dialog_box.getElementsByTagName('select')).each(function(select){Element.show(select)}) <br /> } <br />});</code> Sun, 04 Feb 2007 23:23:44 GMT http://snippets.dzone.com/posts/show/3411 sprsquish (Jeff Smick)