Archive for the ‘jQuery’ Category

jQuery-Mobile: How to delay jQuery Mobile initialization

Wednesday, April 6th, 2011
$(document).bind("mobileinit", function(){
  $.mobile. autoInitialize = false;
});

Then, once your DOM is ready, call

$.mobile.initializePage();

Source: jQuery Mobile Doc

jQuery: How to test if an Object is a jQuery object

Friday, February 25th, 2011
if (obj.jquery){
 //it is a jquery object (and .jquery is the version)
}else{
 //it is not a jquery object
}

source jQuery Forum

jQuery: Bind and unbind the Esc key

Friday, February 4th, 2011

Let’s say you want to allow your dialog boxes to be close when the user press “esc.”

$("body").bind("keyup.myDialog", function(event){
   // 27 == "esc"
   if (event.which == 27) {
      // TODO: close the dialog
      // unbind the event
      $("body").unbind("keyup.myDialog");
   }
});

jQuery: iOS Safari getting the Touches object from touch events

Monday, September 6th, 2010

Somehow jQuery event “normalization” loose the touches object from the event object. Luckily, you can get it form the originalEvent.

$(document).bind("touchstart touchmove touchend",function(event){
			debug("touch event " + event.type + " length: " + event.originalEvent.touches);
			return false;
		});

jQuery: jquery-tmpl template, get string from template

Friday, September 3rd, 2010
var tmplFn = $( "#myXmlTmpl" ).template();
var xml = tmplFn($,{data:myData}).join("");

or:

var func = $.template(null,"Hello ${user}");
var txt = func($,{data:{user:"Mike"}}).join("");
// Hello Mike

Source/Download

JQuery Template

jQuery: Get the full string of a html element with outerHTML

Friday, September 3rd, 2010
var fullElementHtml = $('#myElement')[0].outerHTML;
//or, the same
fullElementHtml = $('#myElement').attr("outerHTML");

jQuery: Mobile Design (Phone, Tablet, & Desktop)

Monday, August 16th, 2010

http://jquerymobile.com/designs/

jQuery: Test if jQuery is installed with typeof

Wednesday, April 14th, 2010

There is a corner case where you need to know if jQuery is running on your page. Let’s say, you are using the ajaxForm plugin and that one of the input is of type “file.” ajaxForm will embed the call in a iFrame and the jQuery will not be included in it. So, for the page (or page fragment) that will be the target of such a call, you need to test if jQuery is running before running the script.

if (typeof($) != "undefined"){
  $(document).ready(....
}

Unfortunately, ajaxForm does not support AJAX call in “text” only which would solve this problem.

jQuery: Removing the jQueryUI dialog elements on close

Wednesday, March 24th, 2010

By default, $(..).dialog(“close”) or even $(..).dialog(“destroy”) leaves some html element in the DOM. Could be an issue when you expect to have it removed.

Here is a little trick

$("<div title='my transient dialog'>Some content</div>").dialog({
    close: function(event, ui){
                // Remove the dialog elements
                // Note: this will put the original div element in the dom
		$(this).dialog("destroy");
                // Remove the left over element (the original div element)
		$(this).remove();
	}
    });

Now, clicking on the close button or calling ‘close’ will remove the dialog elements completely

jQuery: jQuery event with RaphaelJs

Friday, February 5th, 2010

HTML

<div id="rtest">
</div>

Javascript code

<script type="text/javascript">
 $(document).ready(function(){
	var paper = Raphael("rtest", 320, 200);
	var circle = paper.circle(50, 40, 30);
	circle.attr({
  	 "stroke": "#336699",
	  "fill": "#fbfbfb"
	});

	$(circle.node).click(function(){
		var circle = this.raphael;

                //Toggle the circle fill color
                if (circle.attr("fill") == "#333333") {
		     circle.attr("fill", "#fbfbfb");
                } else {
		     circle.attr("fill", "#333333");
		}
	});
});
</script>

See RaphaelJs Event doc