function $xpath(q,doc) { if (!doc || doc == '') {doc = document ; } return doc.evaluate(q, doc,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null); }

// from a comment by Steven Bristol on errtheblog.com

I just wanted to share a really killer event handling tidbit:

Generally you do something like:

jQuery(’.class’).click(function(){//whatever});

Everyone knows this can be rewritten as:

jQuery(’.class’).bind(‘click’, function(){//whatever});

But sometimes you need to unbind something:

jQuery(’.class’).unbind(‘click’, function(){//});

The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for ’.class’, unbinding removes them all. (This is because there is no way to identify an anonymous function.)

But jQuery is so good that there is a way to handle this: Namespacing your events:

jQuery(’.class’).bind(‘click.namespace’, function(){//}); 
jQuery(’.class’).unbind(‘click.namespace’);

or for reinitializing an element added via ajax:

jQuery(’.class’)unbind(‘click.namespace’).bind(‘click.namespace’, function(){//});

// Just throw this at the bottom of your application.js and you’re good to go: all jQuery ajax requests will trigger the wants.js block of your respond_to declaration, exactly like you’d expect. Enjoy.
// via: http://ozmm.org/posts/jquery_and_respond_to.html

jQuery.ajaxSetup({ ‘beforeSend’: function(xhr) {xhr.setRequestHeader(“Accept”, “text/javascript”)} })

// various bookmarklets for cloning

javascript:var d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1190041327&u='+e(l.href)+'&t='+e(d.title);1;try{if(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z){a=function(){if(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=0,width=626,height=436'))l.href=f+p};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)


javascript:location.href='http://rickrolldb.com/entries/new?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);

Resizes an image to fit into its container, depending on whether the width or height is longer, yet keeping the aspect ratio. Copied from a comment on sitepoint.com.

ffunction resizeImgOO(el) 
{ 
        function imgRatio()
        { 
                return (el.height / el.width); 
        } 
        function holderRatio()
        { 
                return (el.offsetParent.offsetHeight / el.offsetParent.offsetWidth); 
        } 
        function fitToContainer()
        { 
                if(imgRatio>holderRatio) 
                { 
                        el.height = el.offsetParent.offsetHeight; 
                } 
                else 
                { 
                        el.width = el.offsetParent.offsetWidth;   
                } 
        }
        
        this.imgRatio = imgRatio; 
        this.holderRatio = holderRatio; 
        this.resize = fitToContainer; 
}
var img = new resizeImgOO(document.getElementById('yourImgId'));
img.resize();

// Elliot wrote this to grab google maps image tiles.

  m = document.getElementById("map_canvas");
      gold = m.childNodes[0].childNodes[0].childNodes[1];
      list = gold.getElementsByTagName('img');
      a = new Array(list.length);
      for (var i = 0; i < list.length; i++)
      {
        a[i] = list[i].getAttribute('src');
      }
      alert(data);

// JavaScript roll overs

<script type="text/javascript">

script>

// html code
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','2.png',1)"><img src="1.png" name="Image1" width="155" height="71" border="0" id="Image1" />a>

339-4248
339-42-48
339 42 48
339 4248
3394248
(095) #phone#
(095)#phone#
+7 (095) #phone#
+7 (095)#phone#
+7(095) #phone#
+7(095)#phone#

/^(\+\d)*\s*(\(\d{3}\)\s*)*\d{3}(-{0,1}|\s{0,1})\d{2}(-{0,1}|\s{0,1})\d{2}$/

var $utf8 = {  
      
    encode : function (string) {  
        string = string.replace(/\r\n/g,"\n");  
        var utftext = "";  
  
        for (var n=0, k=string.length; n < k; n++) {  
            var c = string.charCodeAt(n);  
  
            if (c < 128) {  
                utftext += String.fromCharCode(c);  
            }  
            else if((c > 127) && (c < 2048)) {  
                utftext += String.fromCharCode((c >> 6) | 192);  
                utftext += String.fromCharCode((c & 63) | 128);  
            }  
            else {  
                utftext += String.fromCharCode((c >> 12) | 224);  
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);  
                utftext += String.fromCharCode((c & 63) | 128);  
            }  
        }  
        return utftext;  
    },  
  
    decode : function (utftext) {  
        var string = "";  
        var i = 0;  
        var c = c1 = c2 = 0;  
  
        while ( i < utftext.length ) {  
            c = utftext.charCodeAt(i);  
            if (c < 128) {  
                string += String.fromCharCode(c);  
                i++;  
            }  
            else if((c > 191) && (c < 224)) {  
                c2 = utftext.charCodeAt(i+1);  
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));  
                i += 2;  
            }  
            else {  
                c2 = utftext.charCodeAt(i+1);  
                c3 = utftext.charCodeAt(i+2);  
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));  
                i += 3;  
            }  
  
        }  
        return string;  
    }  
}

Essential for degradable javascript, when one never knows if a view or partial is being called via XmlHttpRequest or not. Throw the below code in your ApplicationController (application.rb)

More info in this blog post

def render(*args)
        args.first[:layout] = false if request.xhr? and args.first[:layout].nil?
        super
end

Restrict entering anything but numbers in a form field with javascript

javascript:

<SCRIPT TYPE="text/javascript">

SCRIPT>

html

<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>
U.S. ZIP Code: 
  <INPUT NAME="dollar" SIZE=5 MAXLENGTH=5
   onKeyPress="return numbersonly(this, event)">
  <INPUT TYPE=SUBMIT VALUE="go">
FORM>

http://particletree.com/notebook/finding-element-positions/

For some strange reason, a hidden element that will be worked on by scriptaculous must have its display:none style inline, within the element, and not from a css class.

<div id="flash_box" class="flash_box" style="display:none;">
        <div id="fb_content" class="fb_content">
                <%= flash[:warning] %>
        

style="display:none;"