CSS tutorials and more http://jamesowers.co.uk CSS & other web developer stuff Tue, 25 May 2010 09:18:02 +0000 en hourly 1 http://wordpress.org/?v=3.0 Easily get javascript libraries using Script SRC http://jamesowers.co.uk/general/526/script-src/ http://jamesowers.co.uk/general/526/script-src/#comments Tue, 25 May 2010 09:17:40 +0000 Jmz http://jamesowers.co.uk/?p=526 When developing a new site I always like to make sure I use the latest release of my javascript library hosted by Google. Then I just update it to a local version before the site goes live.

Today I came across a great little site that lets you get the links to the latest versions of the most popular javascript libraries quickly and easily.

scriptsrc

You find your library on the page and click the ‘Copy’ button. Then all the code you need to include the library in your page is copied to your clipboard.

I really like simple, easy to use sites like this that do one thing and do it well rather than trying to do too much.

]]> http://jamesowers.co.uk/general/526/script-src/feed/ 0 Google Font API http://jamesowers.co.uk/general/520/google-font-api/ http://jamesowers.co.uk/general/520/google-font-api/#comments Thu, 20 May 2010 10:40:29 +0000 Jmz http://jamesowers.co.uk/?p=520 I wrote an article a while back on font replacement techniques, this is a quick update about Google’s version of this which is seriously easy to use.

The Google Font API allows you to use any font from their font directory or you can use the font loader to load other fonts which they co-developed with TypeKit.


Using the Google Font API

There’s no point in re-inventing the wheel so I’ll just link to a great article and video guide by Jeffrey Way over at Nettuts. You can have a look at his article here.

Other Info

The great thing about the Google Fonts API is the fact that you can still use CSS3 effects on your text if you want to. As for page performance, obviously the initial download may slow your page down slightly but they do try to cache everything to minimise and extra loading times, just make sure you don’t try and load too many fonts!

]]> http://jamesowers.co.uk/general/520/google-font-api/feed/ 0 Enabling and disabling a text input with a checkbox using jQuery http://jamesowers.co.uk/javascript/506/enabling-and-disabling-a-text-input-with-a-checkbox-using-jquery/ http://jamesowers.co.uk/javascript/506/enabling-and-disabling-a-text-input-with-a-checkbox-using-jquery/#comments Mon, 12 Apr 2010 07:00:22 +0000 Jmz http://jamesowers.co.uk/?p=506 Enabling and disabling a text input with a checkbox using jQuery

I wanted to make a quick bit of javascript that would enable or disable a text input based on whether a checkbox was checked or not. I thought this might come in handy so I made it into a tutorial and posted it here. This script will work for any amount of checkboxes and text inputs on a page. You can see a working demo of it here.

First we start off with our blank HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enabling and disabling a text input with a checkbox using jQuery</title>
</head>
<body>
</body>
</html>

Next include the jQuery js file from Google.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Next we add our text inputs and check boxes. I have also added some labels so that you can see which check box goes with which input. I have added 3 inputs so to show that you can use this technique with multiple boxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox"/>
<input type="text" name="test3" />
</body>
</html>

Now I add a class to each check box so that I know which check boxes I want jQuery to watch for clicks on. You don’t have to do this but you might get some strange results if you didn’t and you had other check boxes on your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test3" />
</body>
</html>

I’ll also add a value to each check box, this will match the name of the input I want it to control.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />
</body>
</html>

Next, the jQuery. First of all we need the javascript tags, this normally goes at the end of the document so that the HTML & CSS are loaded before any javascript, giving the user the impression that the page is loading faster.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
//Our code will go in here
	});
</script>
</body>
</html>

This tutorial will only deal with inputs that are all enabled when the page first loads (I might write another one in the future that covers having some disabled when the page loads) so we need to make sure that all the checkboxes are checked when the page loads. I did this with javascript, this might not be the right way to do it if you want it to degrade gracefully. To check all of my checkboxes when the page loads I use the code.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
	});

Next I write some jQuery code that tells jQuery to do something whenever someone clicks one of the checkboxes with the class of ‘input_control’.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
//Do this when someone clicks something with the class input_control
		});
	});

Now we do a simple if statement that says ‘if the check box was checked then set the disabled attribute to false, if the check box was unchecked then set the disabled attribute to true.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
			}
		});
	});

And that’s it! I’ve added the code of the completed page below and you can see a demo here. There are probably other ways of doing this, but this is the simplest way that I came up with. I did try doing this with toggle rather than using an if statement but although the disable/enable checkbox worked, the checkbox didn’t check/uncheck.

Completed Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
			}
		});
	});
</script>
</body>
</html>
]]> http://jamesowers.co.uk/javascript/506/enabling-and-disabling-a-text-input-with-a-checkbox-using-jquery/feed/ 0 ASP.NET MVC and More! http://jamesowers.co.uk/general/501/asp-net-mvc-and-more/ http://jamesowers.co.uk/general/501/asp-net-mvc-and-more/#comments Thu, 25 Mar 2010 14:28:30 +0000 Jmz http://jamesowers.co.uk/?p=501 This is just an update post about what I’m up to at the minute and my ideas for this site for the future.

Lately I’ve been messing around learning ASP.NET MVC which has been interesting, but I haven’t had time for much else. Luckily I’ve done a lot of PHP and classic ASP programming so the c# syntax wasn’t too new and I love CodeIgniter so the MVC part wasn’t scary either.

Now I’m working on trying to set up a database access layer in Visual Studio to connect to a Sybase database we have on the development server at work which isn’t so straight forward. Maybe I should start using Twitter so I can just tweet when I get stuck with things like this.

I’ve also been doing a lot of work on one of my clients sites and updating my portfolio site to make it look a bit better. I was thinking of re-doing this site so it’s a bit more simple but I’m worried about damaging my rankings in the search engines. I’ll have to give it some thought.

In the future I’m going to try and add more tutorial posts and less roundup posts because I think there’s waayyy too many of those on the internet now, my RSS reader is packed full of them.

Finally, I ordered the Smashing Magazine book (not an affiliate link) last week (a bit late, I know) but I’ll maybe get some photos and or a review up when it comes and I’ve had a chance to look at it.

Edit: Ok, I’ve decided I’m going to try using Twitter again, this time properly…hopefully! http://twitter.com/jmz360

]]> http://jamesowers.co.uk/general/501/asp-net-mvc-and-more/feed/ 0 Customizing the WordPress Admin Panel http://jamesowers.co.uk/wordpress/491/customizing-the-wordpress-admin-panel/ http://jamesowers.co.uk/wordpress/491/customizing-the-wordpress-admin-panel/#comments Fri, 12 Mar 2010 14:19:45 +0000 Jmz http://jamesowers.co.uk/?p=491 WPAdmin

If you’re creating a website for a client you will normally find they don’t want to learn how to use everything in the WordPress admin panel. They probably hired you so that they didn’t have to learn loads of new stuff and I’m sure what they wanted was a simple admin panel that made updating their site easy.

Unfortunately, as brilliant as WordPress is, if you simply gave them a login and left them to it the chances are they’d look at the admin panel, get scared and never go there again, or start changing all of the settings until they broke something. Luckily, there are a ton of different ways we can modify the WordPress admin panel to make it quicker and easier for our clients to use.

Hiding stuff they don’t need

This one is obvious, if they can’t see a button to click, then they can’t click it! I normally hide things to do with automated site backups (which you should be doing on all of your sites!), settings (for the site and plugins) etc. Basically stuff they wouldn’t normally need to use.

For this I use WPLite. Once installed WPLite gives you a list of all the options on the left menu in WordPress with a checkbox next to it. Simply select the ones you want to hide from the menu and that’s it! There is no editing any of WPs files and if in the future they need to see an option that they currently can’t, it’s as simple as logging in and changing some options.

WPLite

Just don’t forget not to hide the WPLite link from yourself! There is an option to show everything to admin users so it’s advisable to do that and set yourself up as admin and the other users as something else if possible.

A similar plugin to this that I haven’t tested is the Hide Admin Panels plugin which says it will let you hide certain admin options from specific users. This could come in very hand for some sites.

Integrating Analytics

Everybody wants to know how much traffic they’re getting on their new website but giving a user some login credentials and a link to update their website and then some more credentials and another link for their web statistics can be a little overwhelming for them. Luckily there is a nice plugin for WordPress that allows you to easily integrate Google Analytics into the WordPress dashboard. No more links, no more login details, it just works! Have a look at Google Analyticator.

Custom WordPress Option Panels

If you’ve made a custom theme for a client. It might be a good idea to add some custom options to that theme to make it a better fit for the users. I wrote a post a little while back on Custom WordPress Option Panels that rounded up some tutorials.

]]> http://jamesowers.co.uk/wordpress/491/customizing-the-wordpress-admin-panel/feed/ 4 WordPress Options Panels http://jamesowers.co.uk/wordpress/471/wordpress-options-panels/ http://jamesowers.co.uk/wordpress/471/wordpress-options-panels/#comments Fri, 05 Mar 2010 08:00:08 +0000 Jmz http://jamesowers.co.uk/?p=471 If you’re into creating WordPress themes for yourself, a client or even to sell the chances are you have thought about how you could improve your themes if they had an options page in the WordPress admin panel. This may seem a bit daunting to start with but it really doesn’t have to be, I’ve done a quick roundup of posts that show you how to create options panels in WordPress.

Nettuts

How to Create a Better WordPress Options Panel

WPShout

Create an advanced options page in WordPress

ThemeForest

Create an options page for your WordPress theme

ForTheLose

How to create an options page for your WordPress theme

Vitali Software

Add an options page to your WordPress theme

]]> http://jamesowers.co.uk/wordpress/471/wordpress-options-panels/feed/ 1 Free Stuff From MediaLoot http://jamesowers.co.uk/freebies/479/free-stuff-from-medialoot/ http://jamesowers.co.uk/freebies/479/free-stuff-from-medialoot/#comments Tue, 02 Mar 2010 09:39:35 +0000 Jmz http://jamesowers.co.uk/?p=479 If you haven’t already come across it, Media Loot is a coming soon site that will allow you to subscribe for access to loads of icons and other web design resources instead of paying for every set you use.


MediaLoot Splash Page

Although the site isn’t up yet, they are offering a few free teasers in the MediaLoot blog.

Free Icons


MediaLoot Free Icons

Free Corporate Identities


MediaLoot Free Corporate Identities

Free UI Set


MediaLoot UI Set

On their splash page it says they’re launching Feb 2010 (which has already been and gone) so I guess they’re not too far away from launching now. If you stick your email address in the box on their splash page they will keep you up to date with what’s going on.

]]> http://jamesowers.co.uk/freebies/479/free-stuff-from-medialoot/feed/ 2 AB Testing with WordPress http://jamesowers.co.uk/wordpress/467/ab-testing-with-wordpress/ http://jamesowers.co.uk/wordpress/467/ab-testing-with-wordpress/#comments Wed, 10 Feb 2010 16:20:50 +0000 Jmz http://jamesowers.co.uk/?p=467 This is a pretty old video I came across from the Carsonified Blog. But it does cover a lot of interesting things that I’d never thought of before.

It’s all to do with AB testing when you’re running your site on WordPress. Don’t worry if you don’t know what AB testing is, he goes through it in the video.

I tried to embed the video in here but it didn’t want to work so here’s a link to AB Testing in WordPress from Carsonified.

]]> http://jamesowers.co.uk/wordpress/467/ab-testing-with-wordpress/feed/ 0 A feeble update http://jamesowers.co.uk/general/465/a-feeble-update/ http://jamesowers.co.uk/general/465/a-feeble-update/#comments Tue, 26 Jan 2010 10:43:25 +0000 Jmz http://jamesowers.co.uk/?p=465 I’d love to be able to update this site a lot more than I do however my day job and customers must come first! In the little free work time I’ve had over the past few months, I’ve managed to get most of my new portfolio website done which you can see if you go to GotWebsites.

I’ve been learning loads about CodeIgniter and Doctrine when I’ve had time aswell and I’d really like to write a few blog posts on that when I’m not as busy but it looks like I’m going to have loads of work on for the next month or two at least.

Hopefully when I get back to having time to post here I’ll come back with loads of great ideas for articles.

]]> http://jamesowers.co.uk/general/465/a-feeble-update/feed/ 0 Software to get things done http://jamesowers.co.uk/software/443/software-to-get-things-done/ http://jamesowers.co.uk/software/443/software-to-get-things-done/#comments Tue, 03 Nov 2009 11:37:57 +0000 Jmz http://jamesowers.co.uk/?p=443 I’ve been looking for some good ‘Get Things Done’ (GTD) software for a while now. I’ve looked at loads of different options but nothing has done exactly what I want it to do whilst running on my Windows computer, my Mac and my Android phone and being relatively inexpensive.

Here’s a rundown on the software I found and the good and bad bits.

Things


Things

First off, there are some excellent programs out there for OSX. Things is a great example of this. It works well and looks great, but only on a Mac and an iPhone. This isn’t a problem for some people but since I develop stuff for Windows Smartphones I also need a Windows computer for work and Things won’t work on that, there also isn’t an Android app yet, maybe sometime in the future!

At $49.95 Things is also quite expensive, although if it would work on Windows and on my phone, I’m sure I’d pay it. So if you only work on a Mac and use an iPhone, Things is probably the best it’s going to get!

Remember The Milk


Remember The Milk

Now I move on to web based applications. Remember The Milk is pretty awesome as well. The main online program is free, it’s browser based and does everything you need a GTD application to do. I don’t think it’s quite as pretty as a desktop app like Things, but that’s just my opinion! Because it’s browser based, it will work on Windows, OSX, Ubuntu, or whatever.

Their pro plan costs $25 a year which is very cheap and this allows you to get the Android or iPhone app. They also have an api which has allowed other developers to create applications to work with Remember The Milk, one of these applications that I tried out was Astrid. This means you can actually use the service on your phone without having to pay to upgrade to pro, although if you like Remember The Milk and you use it a lot, it’s worth going pro just to show your appreciation.

The only downside I could find for Remember The Milk was the lack of a standalone desktop application I could use. I didn’t want to have my to do list open in my browser all of the time. There are a few sort of hacks you can use to see your list somewhere other than your browser but nothing that felt natural to me.

Google Tasks


Google Tasks

Google have their own GTD software which is also web based. It integrates with GMail, Google Calendar and iGoogle which is pretty good and there is also a mobile version which isn’t a mobile app, just a web page optimised for your phone.

Again, the lack of a desktop app and the fact that there wasn’t an actual mobile app put me off using this.

Doit.im


Doit.im

I started to think that maybe I was asking for too much from the GTD software and started to use Remember The Milk when I came across doit.im which basically does everything I need it to. There is an Adobe Air app which means it can run on my Windows PC and my Mac just like I wanted, there is also an iPhone and an Android app. All of the applications are synced to the web so all of my computers are up to date and everything works nicely and looks great!

I think the software is quite new so there are a few bug here and there but nothing major. The main one was when I installed it on my Mac it crashed the first few times I tried to run it which I think was something to do with their SSL certificate but it’s working now and hopefully they’ll get a better certificate soon so nobody else gets that problem.

Not only does Doit.im do everything I want it to, it’s also totally free and a according to their website it always will be.

Other GDT software to check out

This is a list of GTD software I haven’t had a chance to test myself.

Task.fm – Web based software with SMS reminders and email creation of tasks. They offer a free plan and a pro one for $3.99 per month.

Nozbe – Another web based one with an iPhone app.

TaskMerlin – Windows based GTD software

Disclaimer

I should point out here that I have nothing to do with any of the companies that make the applications I’ve written about. I’m just giving my opinions on the software.

]]> http://jamesowers.co.uk/software/443/software-to-get-things-done/feed/ 2