Call

jQuery UI slider to update a value in a text box

1
Posted by tsymonds on September 14, 2010 – 3:16 pm
Filed under Web Developement

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:



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


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" 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:


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



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


				
				
			


			

				
iPhone Web App Development

				
0

				

				

					Posted by tsymonds on September 8, 2010 – 11:47 am
				

				

					Filed under Apple, Web Developement
				
				
				


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.


&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /&gt;



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.


				
				
			


			

				
Using Google Alerts to alert when you website is first indexed by the Googlebot

				
0

				

				

					Posted by tsymonds on June 4, 2010 – 11:16 am
				

				

					Filed under Web Developement
				
				
				


New websites don’t automatically appear in search engines like Google. They only get “found” when another website link to them or the site is added using Webmaster Tools.


To use Google’s Webmaster tools, you need to have a Google Account (same as Gmail).


Once you have your Google Account, use this link to use Webmaster tools.


Once you have logged in, choose the Add a site button at the bottom.  Enter your website address and choose continue. Follow the on screen instructions, or additional help is available from Google here.


http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34592


Depending on the size of your website, Google may not index the whole site in one hit. Sometime it is useful to be alerted when Google first indexes your site. This can be achieved using Google Alerts


Go to Google alerts and create a new alter.


http://www.google.com/alerts


In the Search terms field, input a keyword that appears on every page on you website, something like you company name. Enclose you keyword in quotes and then limit the search to your website domain. For example:  “keyword” -site:yoursite.co.uk


Google Alerts Setup


The type field is not important and be left as Everthing.


Change How often field to as-it-happens.


Leave Email length to up to 20 results


Input your email in the Your email field and then choose Create Alert.


You should then receive an to confirm that you wish to receive alerts.


When the website is first crawled (indexed) by Google you should receive an email message. You may then want to log-in to Google Webmaster tools and check that the site has not got any Crawl errors (under Diagnostics on the left-hand side).  Crawl errors are details of any problems that the GoogleBot has encounter when indexing your site. You will need to address these errors in order for you website to be completely indexed by Google.


				
				
			


			

				
Cross-browser support for different rendering engines

				
0

				

				

					Posted by tsymonds on May 17, 2010 – 2:26 pm
				

				

					Filed under Web Developement
				
				
				


Web developers are often faced with the problems associated with developing a cross-browser website or application, those developers planning to use new HTML5 and CSS3 mark-up will also have to ensure that they cater for different rending/layout engines like Webkit (Safari, Chrome) or Gecko (Firefox).


Here are a few CCS examples:


/*gradients*/

/*Firefox*/
-moz-linear-gradient (left, red, silver); 

/*Safari/Chrome*/
webkit-gradient (linear, left center, right center, from(red), to(silver));

/*shadow*/

/*Firefox*/
-moz-box-shadow: 5px 5px #818181;

/*Safari/Chrome*/
-webkit-box-shadow: 5px 5px #818181;


/*Border corners*/

/*Firefox*/
-moz-border-radius: 9px 3px 9px 3px;

/*Safari/Chrome*/
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;



				
				
			


			

				
How to setup an iPhone on T-Mobile

				
0

				

				

					Posted by tsymonds on May 13, 2010 – 8:35 pm
				

				

					Filed under Apple
				
				
				


Below is a screen shot from my iPhone which is on the T-Mobile network.


T-Mobile iphone settings


APN: general.t-mobile.uk

Username: user

Password: one2one

MMS:  http:/mmsc.t-mobile.co.uk:8002/

MMS Proxy: 149.254.201.135:8080


Voicemail


T-Mobile’s voicemail setup is a little different from other networks: in addition to your mobile number you are also assigned another unique number for voicemail.


If you don’t already know your voicemail number, do the following:


Dial: *#67#


The iPhone uses push voicemail, in order to “re-program” it for T-Mobile, you need to do the following replace 123456789 with your unique number as obtained above. 


Call: *5005*86*123456789#


				
				
			


			

				
Batch script to test if a server is responding using Ping

				
0

				

				

					Posted by tsymonds on February 16, 2010 – 9:49 am
				

				

					Filed under Microsoft
				
				
				


We were asked by a client to write a simple batch program that tests if a server is alive by using ping.


Below is a sample of the script that we created. The client used it in a Formscape project to ensure that a server was available before writting a record to a database using ODBC.


@echo off
CLS
:RETRYPING
echo Testing if 192.168.1.1 host is alive
ping 192.168.1.1 | find "Reply" > nul
if not errorlevel 1 (
echo Host is alive
) else (
echo host is down - retry in 30 Seconds 
REM Poor man's sleep function - ping localhost
ping 1.0.0.0 -n 1 -w 30000 >NUL
echo Retry now
GOTO RETRYPING
) 
:ENDPING



				
				
			


			

				
5 Tips to ensure you get the most out of mobile broadband

				
0

				

				

					Posted by tsymonds on February 15, 2010 – 11:23 am
				

				

					Filed under Uncategorized
				
				
				


1.	Use a USB extension lead – this it gives you the ability to move the dongle around to ensure you give the best signal.

2.	Alternatively, it may be better to use your mobile as a modem and connect to it using Bluetooth. This gives you the ability to position the mobile in the best place to get optimum signal strength.

3.	To avoid DNS issues, use a third part service like http://www.opendns.com/.

4.	By a SIM-free device – This will give you the ability to chop and change providers and choose the best deals.

5.	Consider opting for a paid contact – some providers give preferential service to customers with a contact. 


				
				
			


			

				
PHP Snippet: Dynamic copyright notice

				
0

				

				

					Posted by tsymonds on November 24, 2009 – 3:22 pm
				

				

					Filed under Open Source
				
				
				


This how to use PHP to code a dynamic copyright notice: 


<p>
<?php
$firstyear = "2009";
$currentyear = date("Y");
if ($currentyear==$firstyear)
  echo "copyright © ".$firstyear." company Limited, all rights reserved.";
else
  echo "copyright © ".$firstyear."-".$currentyear." company Limited, all rights reserved.";
?>
<p>



				
				
			


			

				
CSS Snippet

				
0

				

				

					Posted by tsymonds on November 24, 2009 – 2:58 pm
				

				

					Filed under Web Developement
				
				
				


This is a snippet of the CSS code I use when starting new project. The are not rquired and can be removed


body {
	margin: 0;
	padding: 0;
}

/* I don't link the link styling defaults */
body a {
	text-decoration: none;
}


body a:hover {
	text-decoration: underline;
}

/* If I want a border I use my own style */
img{ 
	border: none;
}


.fltrt {
	float: right;
}

.fltlft { 
	float: left;
}

.clrflt { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Used for image Opacity / Transparency styling */
img.opacity {
	opacity:0.4;
	filter:alpha(opacity=40);	
}

img.opacity:hover {
	opacity:1;
	filter:alpha(opacity=100);	
}

/* My prefered forms style */
fieldset
{
	border: 1px solid #999999;
	background-color: #F4F4F4;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}

label{
	width: 200px;
	float: left;
	text-align: left;
	margin-right: 0.5em;
	display: block;

}

input{
	border-right: #999 1px solid; 
	border-top: #999 1px solid; 
	border-left: #999 1px solid; 
	border-bottom: #999 1px solid;
}

textarea {
	border-right: #999 1px solid; 
	border-top: #999 1px solid; 
	border-left: #999 1px solid; 
	border-bottom: #999 1px solid; 
}



				
				
			


			

				
Using SQL Triggers to create an audit trail on iSeries

				
2

				

				

					Posted by tsymonds on November 24, 2009 – 9:46 am
				

				

					Filed under IBM
				
				
				


We recently completed a development project to create a .NET application to populate an iSeries file. The client required an audit trail to be setup, this is how to do it: 


Firstly create an audit file, ensure that the file has all the fields you wish to audit.

The best way to achieve this is to copy the original source member and use an “A” suffix.

Then add three addition fields to the end of the file:


A            TIMESMP         Z         TEXT('AUDIT TIMESTAMP')
A            AUDTYP         1          TEXT('AUDIT TYPE')
A            AUDIMG         1          TEXT('AUDIT IMAGE')



To add SQL Triggers, use the STRSQL command. Copy the sample code below substituting library, file and fields for your own details.

For new records:


CREATE TRIGGER library.trigger_name
  AFTER INSERT ON library.file_name
  REFERENCING NEW AS new_row
  FOR EACH ROW MODE DB2ROW
BEGIN
  INSERT INTO library.audit_file(field1,field2,field3,field4, audtyp, audimg)  VALUES(new_row.field1, new_row.field2, new_row.field3, new_row.field4,’I’,’ A‘ );
END



For deletions:


CREATE TRIGGER library.trigger_name
  AFTER DELETE ON library.file_name
  REFERENCING OLD AS old_row
  FOR EACH ROW MODE DB2ROW
BEGIN
  INSERT INTO library.audit_file(field1,field2,field3,field4, audtyp, audimg)  VALUES(old_row.field1, old_row.field2, old_row.field3, old_row.field4,’D’,’B’ );
END



For record changes:


CREATE TRIGGER library.trigger_name
  AFTER UPDATE ON library.file_name
  REFERENCING OLD AS old_row  
                            NEW AS new_row
  FOR EACH ROW MODE DB2ROW
BEGIN
  /* Before update*/  
  INSERT INTO library.audit_file(field1,field2,field3,field4,audtyp,audimg)  VALUES(old_row.field1, old_row.field2, old_row.field3, old_row.field4 ,‘ U‘,’B’);
  /* After update*/  
  INSERT INTO library.audit_file(field1,field2,field3,field4,audtyp,audimg)  VALUES(new_row.field1, new_row.field2, new_row.field3, new_row.field4,’U’,’A’ );
END



Removing triggers

You can remove triggers using the Remove Physical File Trigger (RMVPFTRG) command, the SQL DROP TRIGGER statement, and iSeries Navigator.