/********************************************************************************
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.

Using this site, a developer can easily locate and copy the latest stable version of their favorite library. This can be a real time saver in searching out the various library links. It would be really nice if they also had associated elements like the sets of pre-constructed stylesheets for jQuery UI. I keep a list here: http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/ but being able to get all of that information in one location would be fantastic.

Right now SrcriptSrc.net supports jQuery, jQuery UI, Chrome Frame, SwfObject, MooTools,m Prototype, YUI, Dojo, ExtJS, and Script.aculo.us. All you have to do is find your library, click on the copy button, and you have on your clipboard all of the code required to embed the library.

No related posts.

I recently talked to a new customer with an existing website. Her website was working great and was bringing in lots of business, however, no matter what she did she could not get Google Analytics to work on her website. The website was well designed, and modern, the Google Analytics tracking code was installed properly and the code did not contain any errors. I was perplexed so I started digging deeper.

The Solution:

After reviewing her code and analyzing her website I started reviewing the source code to see if some of the other JavaScript was somehow interfering with the Google Analytics. This was not the problem, but the problem was directly related to JavaScript. Some of the JavaScript code copy and pasted from another source contained a small syntax error. This syntax error occurred early in the page and was preventing the rest of the on page JavaScript including Google Analytics from being executed. The error, didn’t however effect the user experience and had gone unnoticed by her previous development company. Once we repaired the issue Google Analytics begin to function as expected.

Note: If you think this may be your problem I would suggest installing the web developer toolbar for Firefox. It has a fantastic error and warning notification system that will help you find and debug these types of errors.

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.

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.

Unfortunately, much to my dismay jQuery does not have a built in function to strip HTML from a string like the handy strip_tags() PHP offers. I did some searching online and was able to track down a couple functions written by other developers that were able to do this task. I have taken my two favorites and combined them into the solution provided below.

	/***************************************************
	STRIP HTML TAGS
	****************************************************/
	function strip_tags(html){
 
		//PROCESS STRING
		if(arguments.length < 3) {
			html=html.replace(/<\/?(?!\!)[^>]*>/gi, '');
		} else {
			var allowed = arguments[1];
			var specified = eval("["+arguments[2]+"]");
			if(allowed){
				var regex='</?(?!(' + specified.join('|') + '))\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			} else{
				var regex='</?(' + specified.join('|') + ')\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			}
		}
 
		//CHANGE NAME TO CLEAN JUST BECAUSE 
		var clean_string = html;
 
		//RETURN THE CLEAN STRING
		return clean_string;

If you are using this function you probably know your way around JavaScript well enough you don’t need a complete example but if you do here is a quick and dirty one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
 
	/***************************************************
	STRIP HTML TAGS
	****************************************************/
	function strip_tags(html){
 
		//PROCESS STRING
		if(arguments.length < 3) {
			html=html.replace(/<\/?(?!\!)[^>]*>/gi, '');
		} else {
			var allowed = arguments[1];
			var specified = eval("["+arguments[2]+"]");
			if(allowed){
				var regex='</?(?!(' + specified.join('|') + '))\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			} else{
				var regex='</?(' + specified.join('|') + ')\b[^>]*>';
				html=html.replace(new RegExp(regex, 'gi'), '');
			}
		}
 
		//CHANGE NAME TO CLEAN JUST BECAUSE 
		var clean_string = html;
 
		//RETURN THE CLEAN STRING
		return clean_string;
	}
 
</script>
</head>
<script type="text/javascript"> 
	var sample_html = '<h1><a href="http://www.gozipline.com">Zipline Interactive</a></h1>';
	document.write('Without Stripping Tags : ' + sample_html);
	var demo = strip_tags(sample_html);
	document.write('With Stripping Tags: ' + demo);
</script>
<body>
</body>
</html>

No related posts.

I have found many of the existing accordion menu systems to be bloated and difficult to understand. I knew there had to be an easier way to create an accordion menu. Instead of using a list like most alternate systems, this system uses a grouping of DIV elements with specific names.

ORIGINAL VERSION: DEMO | DOWNLOAD

UPDATED VERSION: DEMO | DOWNLOAD *

* Note: The updated version was released on 3/25/10 and it is slightly different than the example detailed in this post, however, installation is virtually the same. The updated version addresses a number of frequent feature requests from fans of the script. These include use of jQuery 1.4.2, adding a mouseover effect, adding a selected effect, and the ability to close open menus by clicking their header.

Note: Here is an example of how to pin open the first item and an example of how to select any item to pin open on load.

How to implement this jQuery accordion style menu:

Step 1 – Include jQuery:

For a jQuery beginner the first thing you need to do is to include the jQuery library. Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>

Step 2: – Create the JavaScript

Next you need to create a blank JavaScript file. For the example, this file is called javascript.js. This file will contain the jQuery code required for the menu. Once you save the file include it in the head of your document with the proper path just as we did the jQuery library in Step 1. An example of the JavaScript code to include in this document is shown below:

$(document).ready(function() {
 
	//ACCORDION BUTTON ACTION	
	$('div.accordionButton').click(function() {
		$('div.accordionContent').slideUp('normal');	
		$(this).next().slideDown('normal');
	});
 
	//HIDE THE DIVS ON PAGE LOAD	
	$("div.accordionContent").hide();
 
});

Step 3 – Create the CSS:

Now we need to create a CSS document with our two selectors accordionButton and accordionContent and then include that in the head of the document. Examples of these selectors are included below. The color, contents, and visual formatting can all be manipulated. It is important these elements retain their float: left or display: inline-block property so that they will display inline.

#wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}
 
.accordionButton {	
	width: 800px;
	float: left;
	background: #003366;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	}
 
.accordionContent {	
	width: 800px;
	float: left;
	background: #95B1CE;
	display: none;
	}

Step 4 – Create the HTML:

Now we need to create the HTML we’re going to manipulate. For this example we will keep the page very, very simple. In a more complicated HTML document you need to make sure the two classes used for the accordion DIV items are not used elsewhere. jQuery will be looking for the class of the element so if it is present elsewhere in the HTML document it will cause some unexpected problems. The full HTML document also displaying the includes is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Accordion Style DIV Menu</title>
<link href="style/format.css" rel="stylesheet" type="text/css" />
<link href="style/text.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="includes/javascript.js"> </script>
</head>
 
<body>
	<div id="wrapper">
		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>
		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
	</div>
</body>
</html>

Notice that we have alternating rows with the styles accrodionButton and accordionContent. Clicking accordionButton will trigger the drop of the next instance of accordionContent. It is very important these elements alternate properly with nothing inbetween for the system to function properly. Each element can contain HTML, nested divs, or other styling elements.

Step 5 – Check out the Result!:

Now we have all of our code we need. View the system in the browser and it should work great. Clicking on each button will cause the content below it to drop. The content will retract if another button is clicked. (Note: If you needed to keep the content elements open after a click on a seperate button instead of having them retract you can do this easily by removing this line from the javascript.js include:

$('div.accordionContent').slideUp('normal');

View a complete example or download a complete example:

Click here to view the demo of the accordion style jQuery menu

Click here to download the demo files for the jQuery accordion style menu

No related posts.