The solution I came up with was to use the tel: URI-scheme that is found in most mobile web browsers including: iOS, Android, WebOS, Symbian, and Internet Explorer. Using this, I was able to create a simple HTML link using the following syntax:

<a href=”="tel:8009229999">(800) 922-9999</a>

This link when clicked will trigger the internal phone system either from a browser or from within PhoneGap to initiate a call to (800) 922-9999. I haven’t yet tested this strategy with PhoneGap on non iOS devices but I anticipate it should work in most if not all cases. I can say it working splendidly on the iOS app I currently have in development.

Related posts:

1. Solved: Problem Linking to Google Maps Using PhoneGap and Childbrowser Plugin Today, I had an odd issue which took me a...
2. How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0 At Zipline Interactive, we have been doing mobile websites for...
3. How to Detect a User’s Language with PHP I was recently looking for a simple way to automatically...

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

Solution:

Step 1:

Create a PHP file, in this case we are naming it document_root.php. The PHP file should contain the following code (Make sure to replace our path with your path to your document root):

<?php
$_SERVER["DOCUMENT_ROOT"] = "/usr/local/www/htdocs/domainname.com/www";
?>

Step 2:

Add the following code at the top of your .htaccess file (Make sure to replace the document_root.php with your file. If your file is nested in a directory include the file path as well):

php_value auto_prepend_file "document_root.php"

Reload your website and poof, Apache will parse the document_root.php file and set the $_SERVER['DOCUMENT_ROOT'] value on every page you load.

Note: If you are redefining a different global variable or multiple global variables you can revise the PHP file accordingly.

Related posts:

1. How to Detect a User’s Language with PHP I was recently looking for a simple way to automatically...
2. Remove Unnecessary Querystring From .htaccess 301 Permanent Redirects Today I ran into an odd problem while trying to...

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.

To illustrate the problem. I was attempting to rewrite /old-page to http://www.website.com/new-page and when the redirection occurred I would get something along the address of http://www.website.com/new-page/?url=old-page.

I couldn’t figure out a solution for the problem using standard redirects such as:

Redirect 301 /old-url http://www.website.com/new-url

I tried different variations and position and nothing seemed to work. After some experimentation I decided to approach the problem from another direction. Instead I created a RewriteRule to handle the rewriting and then included two designations [L] indicating this is the final rule and to tell apache to stop looking for additional rules if this condition is met and then I specified [R=301] indicating this is 301 redirect. (CAUTION: Do not just use [R] as this is recorded as 302 redirect which is not a preferred redirect type for SEO)

The final redirect looks like this in .htaccess and seems to work as expected.

RewriteRule ^old-url?/?$ http://www.website.com/new-url [L,R=301]

There are likely other ways to approach this problem but this one is working great for me. Let me know if you have any problems implementing this methodology into your .htaccess file.

Related posts:

1. How to Detect a User’s Language with PHP I was recently looking for a simple way to automatically...

I put together a quick snippet below that extracts the two digit language code and stores it as a variable. You could use this to load different content, to redirect to another version of the website using the proper language, or to sculpt the user experience.

<?PHP 
 
    //EXTRACT THE TWO DIGIT LANGUAGE CODE FROM THE HTTP HEADERS
    $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
 
?>

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.

Now thanks to a script you can get CSS3 support in the latest 3 versions of Internet Explorer with very little work. I tested it out and it worked great for me, however, there are a few known bugs you should review before implementing it.

You can get the script here: http://fetchak.com/ie-css3/

No related posts.

We believe the SAF is an important resource for Spokane creatives. The SAF helps to educate, inspire, and motivate our creative community. This in turns raises the image of Spokane and all regional companies that rely on the SAF members for their marketing and advertising needs.

This year we had the privilege of hosting the judging for the Yakima Advertising Federation at our office on Madison Street here in Spokane. It was a great event. There were a number of good entries from both students and professionals.

The judges for the event where:


Kevin Armstrong – Addison/Kimberly

Jesse Pierpoint – Pierpoint Design & Branding

Rick Hosmer – Klündt | Hosmer
Ryan Stemkoski – Zipline Interactive

Judging took several grueling hours but in the end kings were crowned. We won’t share the winners now but hopefully once they are announced we can share some of this great work with you.

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.