/********************************************************************************
FUNCTION FOR CROSS DOMAIN AJAX REQUEST USING JQUERY 1.5+
********************************************************************************/  
function loadContents(url, callback) {  
 
    //CONFIRM A URL WAS PROVIDED  
    if(url) {  
 
	    //SET URL FOR YAHOO YQL QUERY
	    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + url + '"') + '&format=xml&callback=?';  
 
		//MAKE YAHOO YQL QUERY  
	   	$.getJSON(yql,function(data) {
 
			//BUILD CALLBACK FUNCTION
			if(typeof callback === 'function') {  
			    callback(data.results[0]);  
			}  
 
		//WRITES ERROR TO LOG	
	    }).error(function(jqXHR, textStatus, errorThrown) { 
	    	console.log(errorThrown); }
	    );
 
  	//LOG ERROR IF NO URL WAS PASSED TO THE SCRIPT
  	} else {
  		 console.log('No site was passed to the script.'); 
  	}
 
} 
 
/********************************************************************************
SAMPLE USAGE
********************************************************************************/ 
loadContents('http://www.ziplineinteractive.com/frame/', function(results) {  
   $('#wrapper').html(results); 
});

I have tested this function in IE, Firefox, Chrome, and Safari and it should allow you to make cross-domain AJAX requests in jQuery 1.3, 1.4, 1.5, 1.6, 1.7, and from what I been able to find online it should also be supported in 1.8, although, 1.8 is not available at this time.

Let me know how this works in your application.

Related posts:

1. How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0 At Zipline Interactive, we have been doing mobile websites for...
2. Accurate Cross Browser Testing With BrowserStack.com The worst job for any web developer is testing your...

One of the the biggest problems facing mobile web developers is the ability to create fixed headers and footers on mobile websites and HTML5 powered mobile applications. The problem is caused by the lack of standard support for the CSS properties position:fixed and overflow. Originally, these were not supported because they interfered with the touch interactions of the phone operating system but as of iOS5 and Android 2.1 there is rudimentary support for position:fixed. If you would like to see the level of support for these properties in the various mobile browsers, there is a handy chart available here: http://e.com/css-fixed.

The good news is that default support is on the way. The bad news is that it is not here yet. Regardless of the mobile platform you are targeting, there will be a large percentage of users that are unable to use your interface properly if you rely on position:fixed or overflow. In jQuery Mobile, there is a default solution. They have built in toolbars that mimic a fixed header and footer by fading out and repositioning as the screen moves. While this is an improvement, it is still not a solution for a developer wanting a native app look and feel.

So what is the solution?

After a great deal of research and testing I found there were two primary solutions for this problem being used by fans of the jQuery Mobile platform. They both use Javascript to modify the elements and mimic the scrolling functionality of a native application.

Solution 1: iScroll jQuery Mobile Plugin

URL: https://github.com/yappo/javascript-jquery.mobile.iscroll
This jQuery Mobile plugin is a wrapper for the iScroll Javascript function. (http://cubiq.org/iscroll-4) This plugin is made up of a single file that drops in to your HTML and then is initiated by adding ‘data-iscroll=”scroller”‘ to the element you want to scroll. This plugin was very easy to setup and worked, however, the animation was slow on android applications and when loading websites on the iPhone I had a persistent space at the bottom of the page that I could not remove. I believe it was caused during loading by the default iPhone toolbars but I am uncertain. I searched online and wasn’t able to find a suitable solution. Many users have reported this solution worked well for them and several indicated they were using it successfully with the PhoneGap platform.

Solution 2: Scrollivew

URL: http://jquerymobile.com/test/experiments/scrollview/
Download URL: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
This jQuery Mobile plugin is actually sponsored by jQuery and is currently listed under their experiments section on the jQuery Mobile website. It was a bit harder to get running. It required 4 files, 3 Javascript files and 1 CSS file, although, I was able to lump them together into existing application files to minimize HTTP requests. This solution worked very well for my application. After installing the scripts I simply added data-scroll=”true” to the element I wanted scrollable and the plugin took care of the rest. One important thing to note about this solution, is that in addition to simple fixed toolbars, this plugin also allows scrolling of on page elements left or right and can also handle scrollable lists with inline headers.

My Conclusion:

After extensively testing both of the primary scrolling options for jQuery Mobile I feel like the jQuery Mobile Scrollview is the best solution. It was very easy to install and configure, offered great support on iPhone and Android devices, and has more options and configurations available to customize your application. In addition, it may at some point be integrated into jQuery mobile as default functionality to serve as a bridge until position:fixed and overflow are full supported by the majority of active smartphones.

No related posts.

Years ago I had a software program that would copy down an entire HTML site fairly accurately. Unfortunately, as the web transitioned to dynamic websites this software package could not keep up with the advances.

Today, I discovered a website backup utility that has done a fantastic job in my tests. I backed up several of our complicated dynamic websites and it has done a great job making them work in an HTML version. If you run into a situation where your website, or your customers website is being held hostage by a web design company this could be the perfect solution for you.

The software is called HTTrack Website Copier and it is a free GPL licensed software package.

Click here to download HTTrack

If you have any comments or questions please leave a comment below.

No related posts.

JavaScript function to determine if the current browser is IE6:

//CHECK FOR IE6
function is_ie6(){
     return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined));
}

There are many other ways to find IE6 but this one works great. If you have another good method please list it in the comments below.

No related posts.

Until now, developers working with arrays in JavaScript were either forced to obtain the data returned from these functions on their own or spend a great deal of time searching the net for a solution that actually works. Thankfully, the jQuery developers have written a number of these functions into the core jQuery library but for some reason not many developers, even those using jQuery don’t know they are there to use!

jQuery / JavaScript PHP Equivalent Array Functions

PHP in_array() Equivalent in JavaScript

jQuery.inArray(value,array)

PHP is_array() Equivalent in JavaScript

jQuery.isArray(array)

PHP array_map() Equivalent in JavaScript

jQuery.map(array,callback)

PHP array_merge() Equivalent in JavaScript

jQuery.merge(array1,array2)

PHP array_unique () Equivalent in JavaScript

jQuery.unique(array)

Other jQuery / JavaScript Array and Object Functions

In addition to these functions there are some other handy functions available to jQuery developers that work with Arrays and Objects. These include:

PHP get_object_vars() Equivalent in JavaScript

jQuery.makeArray(object)

Grep Style Search Function

jQuery.grep(array,callback,invert)

Object Extension

jQuery.extend(deep,target,object1,objectN)

Iterator Function

jQuery.each (object,callback)

(Note: None of these functions will work without the jQuery library. jQuery is a free, open source JavaScript library check out: http://jquery.com/ for more information.)

No related posts.

To make life easier on the rest of you, I have compiled a complete list of themes for jQuery UI 1.7.2 below. I have not tested all of these in a live environment but they are all available in the SVN repository.

jQuery UI Themes:

Base:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />

Black Tie

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css" />

Blitzer

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" />

Cupertino

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />

Dark Hive

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" type="text/css" />

Dot Luv

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" type="text/css" />

Eggplant

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" type="text/css" />

Excite Bike

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" type="text/css" />

Flick

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" type="text/css" />

Hot Sneaks

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" />

Humanity

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" type="text/css" />

Le Frog

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" type="text/css" />

Mint Chocolate

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" type="text/css" />

Overcast

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" type="text/css" />

Peper Grinder

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" type="text/css" />

Redmond

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />

Smoothness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />

South Street

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" type="text/css" />

Start

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" />

Sunny

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />

Swanky Purse

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />

Trontastic

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" type="text/css" />

UI Darkness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />

UI Lightness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" />

Vader

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" type="text/css" />

No related posts.

The problem:
In my document, I was using jQuery to create instances of datepicker() for each instance of .address_date. This worked great for the single instance that appeared but failed miserably for elements added dynamically to the DOM after the page had loaded. I tried various solutions I found for similar problems other users had. Some of these included:

- Adding a unique ID to each instance of the datepicker.
- Using datepicker(“destroy”) then redeclaring datepicker()

#(‘address_template’).datepicker(‘destroy’).datepicker();

This technique works excellent if all of your elements were added properly to DOM but I discovered another but I wasn’t expecting.

What I was doing wrong:
I was copying the HTML after the datepicker(); had been initially added to the template. This means I was copying the HTML after the datepicker() function had modified it. Before I spent some time analyzing the HTML with Firebug I didn’t realize that the datepicker() function actually modifies the HTML adding in its own class .hasDatepicker.

When I copied the HTML I was copying the HTML after this class was added so the jQuery UI failed when trying to initiate a new datepicker(); and datepicker(“destroy”); failed because a true instance didn’t exist. I was caught in a real catch 22.

How I solved the problem:
I modified my code to reset the style of the .address_date class when I added it into the DOM prior to adding datepicker to that specific element. As soon as I did this it began to work sweet.

Below is an example of my code in case it is helpful to anyway. This one is really more about theory than exact code:

$('#addaddress').click(function() {
        var count = $('.address_template').size();
        var html = $('.address_template').eq(0).html();
        $('#addaddress').before('<div class="address_template">' + html + '</div>');
        $('.address_template H1').eq(count).html("Previous Address " + count);
        $('.address_date').eq(count).attr("class","address_date");
        $('.address_date').eq(count).attr("id","movein" + count);
        $("#movein" + count).datepicker();
});

Also here are the reference posts from stackoverflow that helped me reach my solution:
1. http://stackoverflow.com/questions/34790/duplicating-jquery-datepicker/1423156#1423156

2. http://stackoverflow.com/questions/1059107/why-does-jquery-uis-datepicker-break-with-a-dynamic-dom

No related posts.