Notepad Web Development

Feed icon

Blog

Auto clearing text inputs

$('input[type="text"]').each(function (i, el) {
if ($(this).val() == "") return false;
$(this)
.data('defaultText', $(this).val())
.focus(function (e) { if ($(this).val() == $(this).data('defaultText')) $(this).val(''); })
.blur(function (e) { if ($(el).val() == '') $(el).val($(this).data('defaultText')); });
});

Unversion a local repo

rm -rf `find . -type d -name .svn`

This will remove every .svn folder beginning from current directory.

Jquery plugin class based template

(function($){
	/*
	 *		Jquery Plugin Template
	 */

	$.fn.pluginTemplate = function(options) {

		return this.each(function() {
			var el = $(this);
			if (el.data('pluginTemplate')) return; 		// Return early if already exists on this element
			var pT = new pluginTemplate(this, options);	// Create object from our class
			el.data('pluginTemplate', pT);			// store the object as data() attached to target jquery object

			pT.init();
		});
	};

	var pluginTemplate = function(el, options) {

		var obj 	 = this;		// Ref to class
		var pT	 	 = $(el);		// DOM element we are working with

		var settings = $.extend({
			// Add 	: custom,
			// vars : here
		}, options || {});

		this.init = function() {
			// Entry point

		};
	};
})(jQuery);

 

and longer version with web service request/callback methods added

(function($){
	/*
	 *		Jquery Plugin Template
	 *		with web service request/callback methods
	 */

	$.fn.pluginTemplate = function(options) {

		return this.each(function() {
			var el = $(this);
			if (el.data('pluginTemplate')) return; 		// Return early if already exists on this element
			var pT = new pluginTemplate(this, options);	// Create object from our class
			el.data('pluginTemplate', pT);			// store the object as data() attached to target jquery object

			pT.init();
		});
	};

	var pluginTemplate = function(el, options) {

		var obj 	 = this;		// Ref to class
		var pT	 	 = $(el);		// DOM element we are working with

		var settings = $.extend({
			// Add 	: custom,
			// vars : here
		}, options || {});

		this.init = function() {
			// Entry point

		};

		this.serviceRequest = function() {
			var s = document.createElement('script');
			s.setAttribute("type","text/javascript");
			s.setAttribute("src", SERVICE_URL_HERE+'&callback=serviceCallback');
			document.getElementsByTagName("head")[0].appendChild( s );

			$('body').bind('serviceCallback', obj.serviceCallback);
		};

		this.serviceCallback = function(e, json) {
			if (!json.results) {
				pT.html('<p>Service unavailable.</p>');
				return;
			}

			$(json.results).each(function(el){

				/* deal with data */

			});
		}
	};

	/*
	 *	Global callback
	 *	Passes data to class method via custom event
	 */
	serviceCallback = function(ob) {
		$('body').trigger('serviceCallback', [ob]);
	}
})(jQuery);

Netvibes UWA Widget Template

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 	xmlns="http://www.w3.org/1999/xhtml"
		xmlns:widget="http://www.netvibes.com/ns/"  >
  <head>

    <meta name="author"      content="Stephen Griffin" />
    <meta name="website"     content="http://notepadwebdevelopment.com" />
    <meta name="description" content="Template for developing Netvibes UWA widgets" />
    <meta name="apiVersion"  content="1.0" />
    <meta name="autoRefresh" content="20" />
    <meta name="debugMode"   content="true" />

    <link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />
    <script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>

    <title>UWA Template</title>
    <link rel="icon" type="image/png" href="http://www.notepadwebdevelopment.com/favicon.ico" />

	<widget:preferences>
		<!--preference type="text" name="testPref" label="Test Pref" defaultValue="Test prefernce value here" /-->
	</widget:preferences>

	<style type="text/css">
	  h1 		{ color: #333; }
	</style>

	<script type="text/javascript">
		// Create a pseudo-namespace
		var MyWidget = {};

		// Properties
		MyWidget.foo = 'http://www.google.com/';

		// Methods
		MyWidget.test = function(message) {
		  alert(message);
		}

		// Entry point
		widget.onLoad = function() {

		  widget.setBody('<h1>Loaded!</h1><p><a href="'+MyWidget.foo+'">'+MyWidget.foo+'</a></p>');
		}
	</script>
  </head>

  <body>

	<h1>Loading...</h1>

  </body>
</html>

Adapted from http://dev.netvibes.com/doc/uwa/documentation/uwa_monopage

AS3 Singleton workaround example

package
{
	public class YourSingletonClass
	{
		private static var _instance : YourSingletonClass;

		public function YourSingletonClass(pvt:PrivateClass) { }

		public static function getInstance():YourSingletonClass
		{
			if (YourSingletonClass._instance == null) {
				YourSingletonClass._instance = new YourSingletonClass(new PrivateClass());
			} else {
				trace("No can do - already gots me an instance of this class");
			}
			return YourSingletonClass._instance;
		}
	}
}
// Workaround to enable Singleton pattern, because private
// class declarations are unsupported within AS3
class PrivateClass
{
	public function PrivateClass() { }
}

Childish Questions

A micro-blog where parents can contribute strange and wonderful questions that their children ask them from day to day. (more…)

Personality types mini-app

Launch the application

Created for Imperial Tobacco whilst working at Sense Internet.

A basic AS3 custom event template

package  {
	import flash.events.Event;
	import YourClass;

	public class YourClassEvent extends Event
	{
		public static const SOMETHING:String = "something";
		private var _object:YourClass;

		public function YourClassEvent (type:String, object:YourClass)
		{
			super(type);
			_object	= object;
		}

		public function get object():YourClass
		{
           return _object;
		}

		override public function clone():Event
		{
           return new YourClassEvent(type, _object);
		}
	}
}

AS3 Flashing EQs



Created as part of Rizla UK’s 2010 Invisible Players pages.
(more…)

Rizla Suzuki Moto GP widget

Moto GP widget created for Rizla UK.
(more…)

Flash banner for AMF Bowling

Flash banner created for Sol Promotion offer at AMF Bowling. (more…)

Analogue timezone clocks

Created for the dashboard as part of the Rizla International website. (more…)

Dynamic resizing full bleed background image

This was a quick mock-up done in Flash CS3 for a pitch for a new site for Harrogate Ladies college. The background images rotate thorugh a slideshow and will dynamically resize as you change the size of your browser window. In order to see this working you will need to view the swf in it’s own window… here’s the link

The code for the resizing the image on resize is pretty straight forward, just don’t forget to add smoothing to your source images.

resizeHandler(null);

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align 	= StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler(e:Event):void {

	// get largest dimension scaling
	var w	= stage.stageWidth / 1022;
	var h	= stage.stageHeight / 687;

	var newWidth, newHeight;

	if ( w > h ) {
		newWidth	= stage.stageWidth;
		newHeight	= 687 * w;
	} else {
		newHeight	= stage.stageHeight;
		newWidth	= 1022 * h;
	}

	backgrounds.width 	= newWidth;
	backgrounds.height 	= newHeight;
}

Tweetcurve

HTML and CSS build for Tweetcurve website with a flash banner. (more…)

Reskin for John Player trade site

HTML and CSS re-skin for new John Player trade site after logo redesign. (more…)

Writing jQuery for Wordpress

( function($) {
$(document).ready( function() {
//-------------------------------

  // Your jQuery code here

//--------------------
} ); } ) ( jQuery );

Or alternatively, you can use no conflict mode, and use $j throughout your script instead of $

var $j = jQuery.noConflict();
$j(function(){

});

(more…)

Wordpress – Plog theme

A while ago I set up a poetry blog for a friend, built using Wordpress (more…)

Starting work at Sense Internet

I had to write some cross-browser compatible HTML and CSS in order to seal the deal to work at Sense Internet as an Interface Developer. The page I built works in IE 5.5, 6, 7, 8, Firefox (Mac + PC), and Chrome (Mac + PC).

Download the Source | View the page

As well as HTML and CSS I’ll be working with the Sense Javascript framework which is object oriented and based upon Prototype. I’m also hoping to get started with some Actionscript 3.0 stuff as soon as possible.

Final marks for Leeds Met degrees were announced today

I logged into Leeds Met results online service this morning to get my final marks for my degree. I got a First Class Honours. The title of my course was BSc(hons) Business Computing – Internet Systems. When people ask what I study I usually just reply “Web Development”. I’m posting my marks here so I have a record of them and they don’t get lost when my student card and log in ID runs out imminently. (more…)

Co-working at nti Leeds

Last week I handed in my signed contract at nti leeds to accept one of the sponsored positions within their co-working space for business start ups. It’s a fantasic opportunity which comes with 3 months free membership, lots of free training and a chance to grow within an exciting environment and community. The co-working space gets a mention in this month’s Wired magazine in a feature on the office of the future.  Leeds is featured alongside London, New York, and Ibitha!

Most of my training budget will be spent on the Zend certified courses on offer. I’m planning on getting my model-view-controller skills up to sctratch. The Pro PHP book, which features a chapter on working with Zend,  should land on my doorstep tomorrow morning so I’m hoping to be making some headway with that by the end of the week.