In this post we’re going to use jQuery UI to create a slider which will update a value in a text box. You may have already seen this concept in action on websites like confused.com

In a previous post we have discussed the benefits of using a hosted version of jQuery, in this example we will use the Google hosted version of jQuery and jQuery UI.

To begin, create a new html document using your favourite HTML editor like Dreamweaver.

Link to the hosted UI style sheet, this is required in the head section of you code:

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

To improve page load performance the JavaScript can be placed just before the body tag in your html:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Next create a .js file which will contain the JavaScript to run once the webpage has loaded. The code below outlines two examples of sliders. A “slide” event is used to update the ID of a text input on form.

The second example illustrates some of the options available to sliders. Further details of option and events can be found on http://jqueryui.com/demos/slider/.

  $(document).ready(function() {
    //slider example 1: a default slider
    $("#slider1").slider({
    	slide: function(event, ui) {
			$("#value1").val(ui.value);
    		}
    	});
  	$("#value1").val($("#slider1").slider("value"));
	//slider example 2
	$("#slider2").slider({
    	min: 1, //minimum value
		max: 10, //maximum value
		value: 2, //default value
		slide: function(event, ui) {
			$("#value2").val(ui.value);
    		}
    	});
  	$("#value2").val($("#slider2").slider("value"));
  });

Don’t forget to include your .js file before the in your html.
Back to the html, as explained above our JavaScript updates a Text field on form. Below is the required html:

<form action="" method="get">
<input type="text" id="value1" />
<div id="slider1"></div>
<br />
<input type="text" id="value2" />
<div id="slider2"></div>
</form>

Styling considerations: You want to hide the textboxes to visitors using JavaScript or this can be achieved using CSS.

The Apple iPhone is currently the best selling mobile in the world, it is estimated that the UK has 2 million iPhone users alone. There are a growing number of people who are using their iPhone or mobile to browse the web.  Should you make provisions for your website to be mobile friendly? This post outlines some ideas to create an iPhone friendly website or “web app”.

Image credit

There are two methods of developing web apps for the iPhone, the first way is by creating dedicated web pages for use by the iPhone.  The other way is to utilise a JavaScript framework plugin like JQTouch (http://www.jqtouch.com/).  JQTouch is a plugin for the popular JQuery JavaScript framework.

Which method that you use depends on your overall goal, if you are looking to create a website that mimics a native app, for example, that emulates the iOS user interface or even supports gesturing then I would be recommended  using the JQTouch project, doing this cut down on the required development time.

If your requirement is for just an iPhone friendly website then developing a mobile version of website using HTML5 and CSS3 maybe the best solution. This solution may also mean that you can allow for cross-browser compatible and make you website “work” with other mobile device like Android or Black Berry.

Why not take a look at http://www.mobileawesomeness.com/ this website good source of inspiration when designing site for mobile visitors. Also example of iPhone web apps can be found on Apple’s website .

Safari the iPhone’s default web browser uses the Webkit as it’s rendering engine, this displays most web page and website very well, even those sites that have not been design with the iPhone in mind look good. As you may have heard there is an on-going disagreement between Apple and Adobe over Flash, the iPhone does not support Adobe Flash.  Normally webmasters would use Flash when integrating video into their site, as the iPhone does not support flash then HTML5 need to be used to embed videos. In fact HTML5 and CSS3 provide a powerful duo, Apple have create this mini-site: www.apple.com/html5 to demonstrate the features of Safari (Webkit), HTML5 and CSS3 – please note that it is blocked to non-Safari browsers. The battle between Apple and Adobe over Flash has meant that Silverlight support has been overlooked, like Flash, Silverlight is not support by the iPhone.

Developing a iPhone friendly website using the JQTouch project are the outside scope of this post, however if this something that appeals to you but you do not have the in-house expertise then please feel free to get in touch to discuss your individual requirements. As discussed, we will however demonstrate some simple ideas and provide some sample code on how to make your website more interesting and friendly for your iPhone visitors.

For your iPhone visitors, you may decide to use smaller images – so they loaded quicker if they are using a mobile connection, larger fonts – so that the content is easier to read with needing to zoom in, or even make allowances for device orientation. In order to this you first need to detect if your visitor is using a iPhone, this can achieved by using the code below:

PHP

<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true)
{
echo 'You are using an iPhone';
}

?>

JavaScript

if ( (navigator.userAgent.indexOf('iPhone') != -1) ) {
document.location = "iphone.html";
}

Most webmasters and developer choose to re-direct iPhone visitors to a different page or area of their site. Some people set up a dedicated sub-domain for mobile visitors (www.m.domain.co.uk) others create a sub folder for all mobile content (www.domain.co.uk/mobile). It all depends on personal preference or the facilities offered by your hosting provider.

Frequent website visitors may decide to bookmark your site or even add a shortcut to their home screen. The code below is used to create a custom home screen icon:

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

As discussed earlier the iPhone uses a Webkit browser this allows you to easy style web forms to look like native iPhone apps. Below is an example image of what can be achieved. Take a look at http://lipidity.com/apple/iphone-webkit-css-3 for some more examples.

The iPhone screen is 320 x 480 pixels. If you do not want people to have to use the zoom function in order to read text or view an entire picture, consider restricting your pages to the limitations of the iPhone’s screen size. The code below prevents the visitor from being able to zoom in and out.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Use of separate style sheets for different orientation can also benefit user experience. Below is an example of how to use different style sheet:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Native apps often take longer to load but are much more responsive once loaded. To emulate this behaviour, you could use anchors in a single HTML or PHP file. A JavaScript framework like JQuery and jQuery UI will allow you hide or unhide content as required. A good example of this would to be use Accordion which can be found here.

I hope this post has given you a flavour of whats required when developing web apps for the iPhone or other mobile devices. In a upcoming post we intend to expanded on the techniques outlined here.

If you use a JavaScript framework like Mootools or jQuery, you may want to consider using Google’s AJAX Libraries. By utilising Google’s servers and distributing scripts across multiple hosts your webpage should load much quicker.

Firstly you will need to sign up for a Google API key for your website: http://code.google.com/apis/ajaxsearch/signup.html

Once registered, put the following in the header section of your web pages replacing the key parameter with you registered key.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

To use Google’s libraries use the google.load() function:
For jquery:

<script type="text/javascript">
   google.load("jquery", "1.3.2");
</script>

For MooTools (replace 1.2.4 with the version that is required):

<script type="text/javascript">
   google.load("mootools", "1.2.4");
</script>

Alternatively, you can also have an external link to the library:

For jquery:

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

For MooTools:

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

For a complete list of option, please see the Developer’s Guide http://code.google.com/apis/ajaxlibs/documentation/index.html#googleDotLoad