Category Archives: jQuery

Review of Building Android apps using HTML, CSS, and JavaScript

This book is the Android counterpart of “Building iPhone apps using HTML, CSS, and JavaScript” and covers much of the same material. It explains how to mark up your HTML page to support the Android mobile browser, as well as covering some basic JavaScript, HTML, and CSS. It shows how to build and submit a native Android app using the Phonegap too.

One of the the aspects that I appreciated about this book was the focus on incorporating lttle touches in your web application that make the application feel more like an Android application. Chapter 2: Basic Styling includes a section on adding the Android look and feel and the chapter on Animation adds extra features. Noting that when Android users drill down into a list, the page slides off to the left. The book also includes sections on using client-side storage to allow your application to be used offline.

Building Android Apps with HTML, CSS, and JavaScript at O’Reilly.

A third option for using jQuery templates

Dave Ward has a great post about defining jQuery templates. There’s a third method that he doesn’t mention in his post. The “embedd-and-grab/clone” method. I’ve used this method before for simple element cloning of templates.

<div id="templates">
    <div id="hello">
        <p>Hello, ${name}.</p>
    </div>
</div>

We can create a div, or really any element you want, to hold our templates. What does this gain us? Well if we are using a design tool, we can see what the template will look like before we have to render it. That may make it easier for a designer on your project. We don’t have to make an AJAX call out to retrieve the external template, although Dave talks about how this really isn’t an issue if you have caching set up correctly on your server. And frankly, for the amount of bytes that are in a typical template I can’t imagine any successful AJAX request taking very long.

To use them, you simply grab the templates div and detach it from the DOM. If you assign the detached elements to a var, you can just use jQuery selectors to find the one you want to use. Because, remember most of the jQuery methods return the jQuery object itself.

var templates = ​$("#templates")​​​​​​​​​.detach();
$.tmpl(templates.find("#hello").text(), person);​​​

Why do you want to use the detach method rather than the remove method? The detach method removes the elements from the DOM but keeps any jQuery data associated with them intact. Meaning you can use the $.data() method to add data to your templates and access the data before you compile your templates.
Dave Ward points out that I need to use “tempates.find()” rather than the default selector method on the jQuery object. Noted and updated

Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch

This is just a quick fix if your postion:fixed elements end up in weird places when your site is viewed on the iPhone, iPad, or iPod Touch.

Say you have a div with an id of “#footer” that you want to stay at the bottom of the page. If you set it’s position to “fixed” and set the bottom to “0px”. When viewed on an iPad, iPhone or iPod Touch, the footer may end up in the middle of your content if you have a long page.


//stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit 
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') 
{ 
     $("#footer").css("position", "static"); 
};

Announcing the Border Radius Support plugin

I’ve developed a jQuery plugin that will detect the specific css styles for setting the border radius of elements that the browser supports. The plugin will return an object containing three boolean properties: moz, webkit, and css3. Each property corresponds to a corresponding css style property

moz – MozBorderRadius

webkit – webkitBorderRadius

css3 – BorderRadius


var supported = $("#foo").borderRadiusSupport();

console.log(supported.moz); //true for Mozilla

console.log(supported.webkit); //true for Safari, Webkit, and Chrome

console.log(supported.css3); //true for Chrome

Support for more browsers may be added in the future.

Link to the GitHub repository

Benchmarking a simple DOM based cloning template

Sara Chipps recently posted a simple DOM based clone template method she uses in one of her apps. “Easy HTML Templating with JQuery

My template looks like this:

  <script id="ItemTemplate" type="text/html"
        <li class="item" value="|rowNumber|">
              <input type=”text” id=”input|rowNumber|” />
        </li>
    </script>

Now within my code I need to put a place holder where I want my HTML to go. I have my unordered list called url_list.

<ul id="url_list"></ul>

Now, you see that most of my items look like this “|rowNumber|” I have a variable in my code called nextUniqueItemID (I believe in extremely descriptive variable names). Here is my “addItem” function.

function addItem() {
        var list = $('#url_list'),
                      items = list.find('li');
        list.append($('#ItemTemplate’)
                                    .html().replace(/\|rowNumber\|/gi, nextUniqueItemID++))
    }

The use of global variables aside (cough,cough),I looked at it and, having used something like this myself, thought that it would work find for data sets containing a very small number of items. The problem is these kinds of clone based templates are VERY slow compared to the templating engines that are available for various JavaScript libraries.

I happened to read a post by Brian Landau called “Benchmarking Javascript Templating Libraries” this morning and wondered just HOW MUCH slower is the naive template method than a good template library?

I grabbed the benchmarking code and modified it to run the new clone based template method.

	var nextUniqueItemID = 0;
	function addItem() {
        var list = $('#url_list'),
        items = list.find('li');
        list.append($('#ItemTemplate').html().replace(/\|rowNumber\|/gi, nextUniqueItemID++));
    };
	
    $(document).ready(function(){
	    var output = $('#output');
	    $.benchmarks = {};
	
      $.benchmarks.test_simple = function(){
        addItem();
      };
      
      $.benchmarks.loop_test = function(){
        for (var i=0; i < 5; i++){
          addItem();
        }
      };

      // use these lines to run the benchmark tests in your browsers JS console
      // $.benchmark(1000, '#simple_test', $.benchmarks.test_simple);
      // $.benchmark(1000, '#loop_test', $.benchmarks.loop_test);
    });
&#91;/javascript&#93;

Since the template Sara provided contains an input tag you get a different benchmark if you run the simple_test and the loop_test separately after refreshing your browser. You can run the tests for yourself<a href="http://lazycoder.com/code_examples/templatebenchmarks/"> here</a>, the loop test *may* cause your browser to give you a "script is running slow" message, hit continue as the loop <strong>will</strong> eventually end. You may also get different numbers if you run the tests in IE, Chrome, and Safari.

results: using FF 3.5.5
Simple Test: 1.71s
Loop test: 31.534s

When you consider that the slowest loop test using a template library was just around 4.5s, you get a better idea of just how slow this method is when you have an input in your template. 

So that's fine, but it's known that dynamically adding text inputs is slow in just about every browser and the original tests don't use inputs at all, just divs. So let's modify the template and see what the results are.
[code]
<script id="ItemTemplate" type="text/html">
<div class="test"><h2>This is a test of |name|</h2><p>The homepage is <a href="|url|">|url|</a>.</p><p>The sources is: |source|</p></div>
</script>
[/code]

I modified the addItem function to account for the new data. n.b. The data I'm using is static, if you wanted to use a data source you would just modify this method to take in your data parameters.

[javascript]
	function addItem() {
        var list = $('#url_list'),
        items = list.find('li');
        list.append($('#ItemTemplate').html()
			.replace(/\|name\|/gi, "Clone template method")
			.replace(/\|source\|/gi, "http://girldeveloper.com/waxing-dev/easy-html-templating-with-jquery/")
			.replace(/\|url\|/gi, "http://girldeveloper.com/waxing-dev/easy-html-templating-with-jquery/"));
    };

results using FF 3.5.5 – refresh between each test
simple test: 1.285s
loop test: 3.771

results using ff 3.5.5 with no refresh between tests
simple test: 1.434
loop test: 4.227

So that’s looking a little bit better. Not too much slower than the template libraries.

So what do the template libraries give you? Well the replace method works find provides your data is escaped properly. But say instead of a url in the “source” replacement, you use a file path like “file:\\foodrive\source.txt”. Well it still gets replaced, but the text looks like this “file:\foodrivesource.txt”. So in addition to the replacement, you have to make sure your data is properly escaped. A lot of template libraries will do this for you. Also notice that the addItem method has to do a DOM lookup on every iteration of the loop to get the template. If you have a large DOM, this could impact the performance.

A new JavaScript CDN from Microsoft

Microsoft announced a new Content Delivery Network for their ASP.NET AJAX JavaScript libraries and jQuery. This means that instead of hosting those libraries on your server, you can just link to the versions on Microsofts server. I made a simple page that takes a querystring parameter (q=) and uses the ASP.NET AJAX dynamic templates to bind search results from a call to the Bing API.

The money lines in the source are the following:


<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js"></script>

<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js"></script>

These two lines tell the browser to load the MS AJAX scripts from the CDN. There are some security concerns around the fact that the files are served from the microsoft.com domain. Both Google and Yahoo serve there files from a separate, non-cookied domain (googleapis.com and yahooapis.com respectively). Hopefully, these fears will be unfounded.

On a side note, it is surprisingly easy to use the Bing API if you are familiar with script tag injection. The easiest way is to put an empty script tag in your page.

<script id="jsonResults" type="text/javascript"></script> 

And then just create your Bing URL and set the script elements src attribute to the URL you created.

			function MakeSearchRequest(searchPhrase)
			{
				var req = "http://api.bing.net/json.aspx?"
	            + "AppId=" + YOUR API KEY GOES HERE
	            + "&Query=" + searchPhrase
	            + "&Sources=Web"
	            + "&JsonType=callback"
	            + "&JsonCallback=BuildResults";
				
				$get("jsonResults").src = req;
			};