Blog

Just a quick note this week, but a very uesful one to know. I have been working on a very modern clean illustrated website this week, and wanted a nicely formatted form with Safari style placeholder text as labels.

All well and good, placeholder obviously works great in Safari, and with a little jQuery every other browser too:

if (!$.browser.webkit) {
$('input').placeholder(); 
}

Obviously we want to override Safari’s default implementation.

Next lets define some variables to make use of in our script:

new function($) {
$.fn.placeholder = function(settings) {   
settings = settings || {};  
var key = settings.dataKey || "placeholderValue";  
var attr = settings.attr || "placeholder";  
var className = settings.className || "placeholder";  
var values = settings.values || [];  var block = settings.blockSubmit || false;  
var blank = settings.blankSubmit || false;  
var submit = settings.onSubmit || false;  var value = settings.value || "";  
var position = settings.cursor_position || 0;

return this.filter(":input").each(function(index) { 
 $.data(this, key, values[index] || 
$(this).attr(attr));  }).each(function() {  
if ($.trim($(this).val()) === "")  
$(this).addClass(className).val($.data(this, key));  }).focus(function() {  
if ($.trim($(this).val()) === $.data(this, key))  $(this).removeClass(className).val(value)  
if ($.fn.setCursorPosition) {  
$(this).setCursorPosition(position); }  }).blur(function() {
 if ($.trim($(this).val()) === value)  
$(this).addClass(className).val($.data(this, key));  }).each(function(index, elem) {  
if (block) new function(e) {  $(e.form).submit(function() {  
return $.trim($(e).val()) != $.data(e, key)  }); }(elem);  
else if (blank) new function(e) {  $(e.form).submit(function() { 
 if ($.trim($(e).val()) == $.data(e, key)) 
 $(e).removeClass(className).val("");  return true; }); }(elem); 
 else if (submit) new function(e) {  $(e.form).submit(submit); }(elem);  }); }; 
 var setTextareaState = function(ev) {  
var $this = $(this), val = $this.val(),  placeholder = $this.attr('placeholder');  
if (ev.type == 'mousedown' && val == placeholder ) {  
$this.val(''); } else if (ev.type == 'mouseout' && val == '' && !!placeholder) {  $this.val(plcaeholder); } }; }(jQuery);

This works wonders, until we come to Textarea fields. Safari has an incomplete implementation for the CSS3 spec, and you will not see and placeholder text on your textarea’s.

Again, jQuery comes to the rescue, all be it unfortunately the color has to be black. But here goes:

 $(function () { 	  var setTextareaState = function(ev) { 		   var $this = $(this), val = $this.val(),  placeholder = $this.attr('placeholder'); 		   if (ev.type == 'mousedown' && val == placeholder ) { 			 $this.val(''); 		 }   else if (ev.type == 'mouseout' && val == '' && !!placeholder) { $this.val(placeholder); }}; $('form textarea').live('mousedown', setTextareaState).live('mouseout', setTextareaState); $('textarea').each(function(){ 		  var placeholder = $(this).attr('placeholder'); if (placeholder && $(this).val() == '') { $(this).val(placeholder); } }); });

Something I have been working on the design for, recently, goes live to the masses of UK Twitter users out there. Twitelection aims to give Twitter a voice in opinion to the political parties.

Designed in the office, (Free Rein/140 Digital), I wanted a smart sophisticated look to represent a somewhat adult topic. The project aims to give Twitter a voice to the political parties in the UK and is a mash up of technologies using the Twitter API. Twitelection searches twitter for the #ukvote hash tag and takes some key variables to build up the opinion poll running live on the website. Simply tweet the following to take part.

#ukvote PARTY NAME :) or :( for your opinion or current feeling about the party, and the first part of your postcode, this is optional and will help with some statistics around the UK.

e.g.

#ukvote Conservative :) IP1

Of course you can put any other information you like in your tweet about why you are happy, or disgruntled with your particular party.

Enjoy and remember to vote in the coming elections, when they finally come round!

Pulling away from the big Apple, Adobe, iPad/iPhone Flash conversation that has hit just about every read worthy blog of late I want to talk about the interaction benefits of Twitter, and how it is not being used to its full potential.

I use Twitter just as everyone else who has a computer and sees the value in such technologies, I post random stuff, promote my blog, and create a voice for myself on the intertubes. Occasionally I shall rant, mostly at technology and services which fail. One such company in particular is Virgin Media.

When I fist moved into my house, almost a year ago, we found that television reception was very poor, and BT just did not perform when I moved home, I got angry and frustrated, and took it out at BT by taking my custom elsewhere, and opening a Virgin Media account. I get good broadband, 10MB over cable, telephone and TV. Telephone costs are astronomical, and TV frustrates me the most, I have to pay £5 a month for the ability to record, pause and rewind live tv, (you should note that BT Vision service gives you a box which you can do all this on for free). My wife and I dont watch that much tv to justify such expense, but we would like the ability to record. However this post is not about the services Virgin do or do not offer.

More than once I have tweeted my disgust, and each time a representative of Virgin Media have @replied to me asking if I have spoken to the customer services department? Each time I have not, (I am simply waiting for my contract to end, at which time I shall improve my TV arial set up and re-hire BT to offer me their services). I am sure that many regular tweeters have seen the same thing after ranting or mentioning a company in a bad way, twitter seems to be our voice on the internet, but that voice is just an echo.

Is it not about time that voice was responded to in a very real and useful way? Instead of simply directing me to the Virgin Media customer services, how useful would it be for a customer services representative to DM my twitter account to actually help and resolve my issues? Of course there are security issues with this, and some kind of password system may have to be set up, but this can be done when opening an account with the company in the first place. Associate your twitter account with your Virgin Media account?

Should more business and services be using Twitter in this way, or should it be a service purely for the individual? What do you think? What have your experiences been?

I wrote yesterday about Apples decision to proof its applications for the iPad like they do with the Iphone and Touch devices, adding restraints to the addition of new applications. But inadvertently Apple have opened up the iPad for open technologies through the web platform.

Apple have released a heavily proprietary , locked locked down device, in order to install an application Apple have to approve it first through their Application Store.

But Apple have created two platforms on their new device. One a heavily proprietary native platform that requires Apple approval and has significant Apple restrictions. But ironically with Apples heavy focus on improving the quality of Safari and the HTML standard, they have shipped the iPad with a platform based on open unencumbered services.

The web platform has gained offline API’s, improved caching support, local storage, Safari has a built in SQLite database accessible through javascript. CSS based animations and custom downloadable fonts. The Safari mobile version already supports gestures, geolocation and hardware accelerated graphics.

Apple even allows you to take a web application and add it to the home screen to run amongst normal applications, the iPhone even downloads all of the HTML5 assets to allow the running of web application offline. Google has been the first technology company to take advantage of this loop hole Apple have created for itself, when they disapproved Google Voice from the App Store, Google immediately set out to develop an HTML5 application to run on the web through the iPhone and Touch devices, proving that it is possible to bypass Apples restrictions within its application approval system.

The birth of HTML5 is not yet officially upon us, but Apple has already created a highly desirable market for the new technology, opening up the possibility of a new revenue source for application developers without giving a share to Apple.

Despite being in the middle of a very large update to the design of my website, and amongst the hectic schedule I have on my plate, I took a short while out to sit up and take note of the latest KeyNote from Apple with regards to the iPad.

We had a discussion in the office today that if this latest offering from Apple was not something entirely new, then it would not much more than a doorstop. 
I have to admit, the whole presentation left me a little less than impressed. The glorified iPhone/iTouch is exactly as expected. Nothing more than a spec’d up hand held device. It started with so much potential, then just mountain slid to a big disappointment.

Don’t get me wrong, I am an avid Apple fan, my wife will be the first to proclaim that one. But this just seems too much of a money making idea from Apple, as to how they can gain more money from their App Store. Some features I think that they missed from this are:

• The ability to use an optional pressure-sensitive stylus, and handwriting recognition.
• A front-mounted camera. Though guaranteed future versions will have.
• Native os X application support. It seems a little ridiculous to limit the applications to just those available on the iPhone and iPod Touch.
• USB support. The ability to plug in certain types of external devices (audio/video, headsets, external HD) would be peachy.
• The ability to run more than one application at a time. Seriously, Apple needs to figure this out.

As for the price for UK and Europe, we are yet to see if Apple offer us a similar price, with current exchange rates would mean the iPad works out around £300, but I bet Apple will add a premium for us unluckily enough to not live in the US. 

It looks like an interesting device, and I would love to have a play with one, but currently I am not sold, my MacBook does all I want and more, this ones for the new generation maybe.

In response to this week’s devastating earthquake in Haiti, Apple has begun accepting monetary donations for the American Red Cross directly through iTunes. According to the donation page, 100% of the donation will go to the Red Cross to support emergency relief efforts to help those affected by the earthquake. Due to iTunes not sharing user information with the organization, the Red Cross will be unable to further acknowledge any donations made, and an email receipt will serve as the only record of the donation. Donate buttons are available in denominations of £5, £10, £25, £50, £75, and £100; Apple has also posted a direct link to the iTunes donation page on its company homepage at apple.com.

OK I know I have already written about the great web application that is TeuxDeux, but I thought I would share this with you, its as the developers call an Easter Egg for editing your tasks.

 Should you really want to edit a TeuxDeux task, simply drag it back up to the input field at the top of the column it is in, or any other column if you want to change the content and change the day it is associated with at the same time. When you have finished editing, simply hit enter.

Hope that helps all you teuxdeuxers.

I have been racking my brains and getting frustrated with Mobile Me for a couple of weeks now, not able to find anything on the internet to aid in my resolution of iDisk not being able to sync, and certainly not syncing my offline files and folders, on my two computers.
I now have a solution. Albeit a rather odd one.

With iDisk sync switched on, and you are constantly receiving the message "idisk not in sync", follow the following steps:

1. Go to MobileMe under System Preferences.
2. Under the iDisk Tab click “Stop” to disable iDisk syncing. This will create a local copy of your files on your desktop called “previous local idisk”.
3. Next, go to the Account tab and click Sign Out.
4. Next, sign back into your Mobile Account with your username/password.
5. Go back to the iDisk tab and Turn On iDisk Syncing.
6. Now the iDisk icon should be back on your desktop. If you open it, it should start showing that it’s syncing. It may take a while depending upon how many files you have on your iDisk.

You may have to manually put any recently updated or created files from your “previous local idisk” into your iDisk.

Hope it works for you too.

2010 is upon us all, and it is my New Year resolution to make this year profitable per my time management. In doing so, I signed up to the ever popular TeuxDeux. A sleek, beautifully simple to do list.

TeuxDeux is free, and its probably one of the best To Do lists I have ever used, which is probably why I am using it pretty much every day! Wonderful stuff, particularly if it helps me prioritise work loads.

Check it out, and let me know if you too find it helpful. Or post your own suggestions in the comments.