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">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</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">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;

if (window.event)
   key = window.event.keyCode;
else if (e)
   key = e.which;
else
   return true;
keychar = String.fromCharCode(key);

// control keys
if ((key==null) || (key==0) || (key==8) || 
    (key==9) || (key==13) || (key==27) )
   return true;

// numbers
else if ((("0123456789").indexOf(keychar) > -1))
   return true;

// decimal point jump
else if (dec && (keychar == "."))
   {
   myfield.form.elements[dec].focus();
   return false;
   }
else
   return false;
}

//-->
</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] %>
        </div>
        <span id="fb_close" class="fb_close" onclick="new Effect.BlindUp($('flash_box'), {duration:0.25})">
                Close This
        </span>
</div>

The div 'flash_box' only works with scriptaculous when

style="display:none;"

is used _inline_.

When you need to include multiple nested single quotes within a string of javascript to be executed, escape single quotes with a back slash as needed.

Example from within an .rhtml template

hide_warning = "window.setTimeout('Effect.BlindUp($(\\'flash_box\\'), {duration:.3})', #{@warning_timeout ||= 8000})"

In this example, Double backslashes are required since the blackslash itself needs to be escaped and included within the string of js to be executed by windown.setTimeout().

Simply call the event of the object.

<select id='element_id' onChange="some_javascript_func">

<a href="#" onclick="$('element_id').onchange();">

Note that this uses Prototype's $ function to find the element.

More details here:
http://tinyurl.com/2b45me

// http://www.sitepoint.com/blogs/2007/07/11/insert-in-place-without-documentwrite/

// So, given a syndication script with a fixed ID:
<script type="text/javascript" id="syndication" src="syndication.js"></script> 

// We can go from oldskool nastiness like this:
document.write('<p id="syndicated-content">Here is some syndicated content.</p>'); 

// To modern loveliness like this:

var newcontent = document.createElement('p'); 
newcontent.id = 'syndicated-content'; 
newcontent.appendChild(document.createTextNode('Here is some syndicated content.')); 
var scr = document.getElementById('syndication'); 
scr.parentNode.insertBefore(newcontent, scr); 

// We could even go a step further and remove the <script> ID, but in that case we would need a concrete method for identifying the specific element. We could do that by knowing its SRC:

var scripts = document.getElementsByTagName('script'); 
for(var i=0; i<scripts.length; i++) 
{ 
  if(scripts[i].src == 'http://www.mydomain.com/syndication.js') 
  { 
    //scripts[i] is the one 
    break; 
  } 
}

This gives you a new event (onDOMReady).

Object.extend(Event, {
  _domReady : function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    if (this._timer)  clearInterval(this._timer);
    
    this._readyCallbacks.each(function(f) { f() });
    this._readyCallbacks = null;
},
  onDOMReady : function(f) {
    if (!this._readyCallbacks) {
      var domReady = this._domReady.bind(this);
      
      if (document.addEventListener)
        document.addEventListener("DOMContentLoaded", domReady, false);
        
        /*@cc_on @*/
        /*@if (@_win32)
            document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
            document.getElementById("__ie_onload").onreadystatechange = function() {
                if (this.readyState == "complete") domReady(); 
            };
        /*@end @*/
        
        if (/WebKit/i.test(navigator.userAgent)) { 
          this._timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) domReady(); 
          }, 10);
        }
        
        Event.observe(window, 'load', domReady);
        Event._readyCallbacks =  [];
    }
    Event._readyCallbacks.push(f);
  }
});

Example:

Event.onDOMReady(function(){  
alert('DOM is loaded!');  
});

if (navigator.userAgent.indexOf('Safari') != -1) {
        window.addEventListener('load', function() {
                var lock = false;
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++)
                        labels[i].addEventListener('click', function() {
                                var input = (this.htmlFor ? document.getElementById(this.htmlFor) : this.getElementsByTagName('input')[0]);
                                if (input && !lock) {
                                        input.focus();
                                        lock = true;
                                        input.click();
                                        lock = false;
                                }
                        });
        });
}

Problem - calling a function in <script> tags from dynamic ajax results does not get executed by the browser

Resolution - make a pixel image and call the function with the onload event in the image

<img src="some_image.jpg" onload="someFunction();">

var $window = {
        open_in_new_tab: function(url){
                getBrowser().selectedTab = getBrowser().addTab(url);
        },

        open_in_same_tab: function(url){
                top.content.document.location = url;
        },

        open_as_popup: function(url){
                var mypopup = window.open(url,'popuppage','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=700,height=400,left=30,top=30');
                mypopup.focus();
        },

        focus: function(obj){
                obj.focus();
        },

        click : function(aEvent,url){
                if (aEvent.button == 2){
                        this.open_as_popup(url);
                }
                else if ((aEvent.ctrlKey) || (aEvent.button == 1) || (aEvent.metaKey)){
                        this.open_in_new_tab(url);
                } 
                else {
                        this.open_in_same_tab(url);
                        this.focus(window._content);
                        
                }
        }
}

Usage:

<toolbarbutton id="myid" label="my button"  class="toolbarbutton-1" onclick="$window.click(event,'http://localhost/');" />