The post Gosh this is old appeared first on Simon Donaldson.

It’s a simple style property but it could potentially be very useful as removing an animation and then adding it again currently restarts it. So, for example, you could animate a logo inside a button that pauses when you hover over it.
It’s only supported by Chrome, Firefox and Opera so you would still require the correct prefix. Interestingly both http://html5please.com/ and http://caniuse.com/ don’t mention it yet.

/*CSS*/
button:hover .icon{
-webkit-animation-play-state:paused; /* Webkit Browsers */
-moz-animation-play-state:paused; /* Firefox*/
animation-play-state:paused;
}


/*JavaScript to toggle the Animation Play State*/
if (element.style.webkitAnimationPlayState === "paused") {
element.style.webkitAnimationPlayState = "running";
} else {
element.style.webkitAnimationPlayState = "paused";
}


Demo

Here’s a quick demo which shows how to toggle to property with JavaScript:

The post Pausing CSS3 Animations appeared first on Simon Donaldson.

In this case I was asked to add a mottled effect to the standard jQuery Mobile theme. It instantly adds a softer feel to the UI and looks especially good on high resolution mobile phone screens.

It’s worth noting here that I deliberately target just the “background-image” attribute as that doesn’t affect the rest of the UI as that uses CSS gradients and box shadows.

Support for Data URI

Sadly only the newest browsers support it just yet but the majority of mobile phones do. Therefore it makes a great addition to your mobile build whether it be a web app or a phonegap style hybrid app.

The post Data URI pattern effect & jQuery Mobile UI appeared first on Simon Donaldson.

It can be very easily fixed by assigning a setTimeout method to a variable and then clearing the setTimeout if the event fires again, that way it will continually overwrite itself until the user stops. Here’s a quick fiddle to demonstrate the technique.

The post Delay JavaScript input events for multiple interactions appeared first on Simon Donaldson.

Using jQuery you can easily delegate events to each textarea and catch each user input, shortening it once it’s past the maximum value.

Here’s a quick fiddle to demonstrate:

Thankfully html5 now fully supports the maxlength attribute and this issue will soon be a thing of the past!

The post Textarea maxlength and jQuery appeared first on Simon Donaldson.

Yep, you just get the helpful “LOG: [object Object]”… *sigh*

Well, don’t panic, there is a really quick cheat to serialize the object as a JSON string and log that instead:


var obj = {foo:'bar'}
console.log(JSON.stringify(obj));
//logs {"foo":"bar"}


…also, you can pass any value to this function, it doesn’t have to be an object.

The post Debugging objects in Internet Explorer appeared first on Simon Donaldson.

The post Cross browser opacity with CSS appeared first on Simon Donaldson.

jQuery uses the sizzle selector engine and has some hardcore shorthand selectors to navigate the DOM, recently I have been having trouble combining ‘not‘ with ‘first‘ to exclude the first element from a group of elements. e.g. table rows.

I found that using the ‘greater than‘ selector made a useful alternative. Essentially all it does is select all elements which are greater than 0… which is the first. This creates a simpler solution, easier to remember and easier for someone else to read.

// the original combined method
$('table tr:not(:first)').css('background','red');

// the new method
$('table tr:gt(0)').css('background','red');

The post jQuery selectors – not first – not:(:first) appeared first on Simon Donaldson.

Preventing it is easy – you just need some shiny CSS3!

textarea {
    resize: none;
}

The post Stop a textarea from being resized appeared first on Simon Donaldson.

%0D%0A%0D%0A

The post Emails: adding a new line to mailto link body copy appeared first on Simon Donaldson.

Simply call the inline function and pass it the number of decimal places you want the number to be rounded to. It will automatically work out if it needs to be rounded up or down.

var num = 13.1489;
alert(num.toFixed()) // 13
alert(num.toFixed(1)) // 13.1
alert(num.toFixed(3)) // 13.149
alert(num.toFixed(4)) // 13.1489

// Just remember to cast all strings as a number first!
var num = "15.1568";
alert(Number(num).toFixed(2)) // 15.16

The post Use JavaScript to round a number to decimal places appeared first on Simon Donaldson.

It’s remarkably simple thanks to a proprietary Internet Explorer CSS expression!


#element {
width: expression(document.body.clientWidth > 500? "500px" : "auto");
}


Just watch out for two things; firstly you have to make sure the greater than expression will not trigger a loop (do not use >=) and, sadly, this does not work on the body tag. To complete the latter you will have to use a wrapping div

The post Max-width in Internet Explorer 6 #IE6 appeared first on Simon Donaldson.

There are other solutions which use additional mark-up to create a min-width effect but in my opinion the best solution is CSS expressions.

I know, they suck right. Well apart from the performance hit they actually work. Combine them with a IE6 onlyselector or a conditional comment and you have your solution!

* html #selector{min-width:960px; *width:expression(document.body.clientWidth < 960? "960px": "auto" );}

and if you are wondering… I don’t like to use extra mark-up for fixing bugs as I much prefer CSS. Why make everyone suffer for the sake of the minority!

The post Min-width in Internet Explorer 6 #IE6 appeared first on Simon Donaldson.

Thankfully it’s surprisingly easy… all you have to do is add an URL parameter which specifies the country code! So for spanish you insert “&locale=es_ES“, making sure to honour the capitalisation.

English Facebook like button

//standard iframe code
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdeveloper.simondonaldson.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Spanish Facebook like button

//now spanish
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdeveloper.simondonaldson.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;locale=es_ES" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true">

The post Force the facebook ‘like’ button language appeared first on Simon Donaldson.

Today i discovered a worrying bug with Firefox, Firebug and Page-speed.  A good friend of mine, Chris Murray, was demonstrating his new flash photo upload applet. I rudely pointed out that it didn’t work in Firefox only to find out that it did in his. After wasting his time trying to prove SWFOject, Firefox and maybe Flash needed to be updated it turns out that no dynamically embedded flash worked in my version of Firefox. Sorry Chris…

What do i mean by embedded flash? Well, to get round the various methods of embedding flash into multiple browsers, javascript is often used to insert the flash into the DOM. Thereby using different techniques per browser.

To cut a long story short here is a screenshot of the relevant flash:

As you can see, the mark up is correct and present, just strangely disabled.

I am using Firefox 3.5.3, Firebug 1.4.3 and Page-speed 1.3. All are the updated and most recent versions.

What can you do?

Nothing really. The issue has been raised with Page-speed guys and there is a support thread too. I expect this to be resolved straight away as the issue has been marked critical. It is probably best to disable Page-speed for the time being. There is always Yslow!

The post Firefox not displaying dynamically embedded flash? Page-speed might be your problem! appeared first on Simon Donaldson.

//only works for a string beginning with a number!
('123 Hello World').toInt();  //=> '123'

Mootools FTW!

The post Seperate a number (int) from string using Mootools appeared first on Simon Donaldson.

Imagine you have a string:

var myString = "123 Hello World";

I was in the middle of some mootool’in and i was about to go down the usual route of:

var myNumber = myString.substring(0,myString.indexOf(' '));

when i rushed off to google a better way to do it. Thanks to stackoverflow i found it. Regular expressions! I have no idea how to write them but i can appreciate them. The following expressions get the first integer within a string:

("123 Hello World 4").replace(/(^\d+)(.+$)/i,'$1'); //=> '123'

//If it's somewhere in the string:

(" Hello 123 World4").replace( /(^.+)(\w\d+\w)(.+$)/i,'$2'); //=> '123'

//And for a number between characters:

("Hello123World 4").replace( /(^.+\D)(\d+)(\D.+$)/i,'$2'); /=> '123''

Good stuff!

The post Seperate a number (int) from a string in Javascript appeared first on Simon Donaldson.

Mootools is a great, stable, open source javascript library which is maintained by a limited number of proffesional developers. It does have a browser detection class built in but it doesn’t natively provide a method to detect the version of Internet Explorer.

The Mootools developers are code purists; Extending their browser class would be easy but they do not want to do it. They do provide a method to get the browser build and this could be used along with the remaining browser string to work out the version. Essentially, they like to keep their code relevant and streamlined.

In a previous post i covered how to detect IE6 with one line of Javascript. This solves the problem where later builds of IE6 can show a browser string similar to IE7.

This can be combined with the Mootools browser class to produce browser variables.

//declare global variables
var WEBKIT = Browser.Engine.webkit;
var GECKO = Browser.Engine.gecko;
var OPERA = Browser.Engine.presto;
var IE = Browser.Engine.trident;
var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
&& (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1);

//test variables (delete)
if(WEBKIT) alert("WEBKIT");
if(GECKO) alert("GECKO");
if(OPERA) alert("OPERA");
if(IE) alert("IE");
if(IE6) alert("IE6");

Placing this code at the top of your JavaScript include will give you simple global boolean variables for each browser platform. Creating one variable per browser at the very start means the calls to the browser class are limited to one and the detection script is ran only once. It also means you have very simple and easy to remember variables to use throughout your code.

The post Detect Internet Explorer 6 (IE6) and other popular browsers with Mootools appeared first on Simon Donaldson.

It started as a Reddit thead: Facebook girl “loves an*l” but apparantly doesn’t know it

Basically, to some up, someone who is probably close to Diana has been able to access her account and choose her username. They chose ‘I Love An*l’. Now, if you type in http://www.facebook.com/i.love.anal you go to her page. I am, of course, assuming she didn’t do it herself.

The original person who found this out was good enough to try to tell her…

This didn’t go down too well!

Reddit also became aware of how much publicity the thread achieved. A new one was started up pointing out the results if you Googled the girls name. Reddit has now removed the above picture as the joke ‘went too far’. They were probably right, everyone was queuing up to tell Diana what has happened. She will almost certainly be a well know name for at least the next 24hours.

Just goes to show what happens if you leave yourself logged in somewhere.

(please note i have not mentioned her name anywhere in this article, i’m assuming facebook will change her username very soon, hopefully she will soon fall back into obscurity)

So, pick your usename name!

http://www.facebook.com/username

Facebook should have done this from the start!

or you could end up like these people (found via the reddit thread):

http://www.facebook.com/cumonmyface

http://www.facebook.com/cock.eater

http://www.facebook.com/gayer

Have you seen any other funny or rude usernames on facebook, Google+ etc? Do tweet me at @sidonaldson to let me know!

The post Diana & facebook username mischief appeared first on Simon Donaldson.

Font Stacks

It’s a basic CSS declaration but not many people are aware of what font stacks do. In a world where most fonts are not available on the web, or ‘web-safe’ as we like to call it, you have to stick to a limited amount. Luckily CSS enables the developer to list his ideal fonts in an order of preference. Therefore if the first font, or most ideal, isn’t available then the next one will take over. This is called the font stack.

Unit Interactive wrote a great article about font stacks

and also created a downloadable PDF document with examples.

This is a great tool to help explain to designers what is possible in true web design. As many developers will know, you typically get a PSD file from a designer and find you have to go back to them to explain why they can’t use a certain font.

via firstwebdesigner.com & CSS Globe

!important CSS Declaration

Impressive Webs – everything you need to know about the !important CSS declaration

This is another great article which explains a common CSS declaration. CSS, by it’s nature, is cascading or in other words heiracial. This basically means it sets properties as it is read from top to bottom. A duplicated selector further down the page will overwrite the previous properties (where properties match).

There are also instances where someone has used in-line styling or you have no choice but to use in-line styling (i can’t think of one). ‘!important‘ can also overwrite this!

Typing ‘!important‘ after any CSS property tells the browser that this CSS declaration is the most important one and overwrites all other declarations. It is great for overwriting common classes or properties where you might want to use an exception or perform a minor tweak.

via CSS Globe

Finally, some good html tips

Line25.com – html crimes you shouldn’t commit

This article provides a quick list of 10 html good practices which would improve your coding. The majority are straight forward and known to many, the most being about out-dated tags, but still it’s great to see a blog going back to the basics.

One great thing about using the more updated tags is that you can wrap the older tags around html elements, reset them with CSS (font-weight:normal), and use them together with a Javascript frame work to create advanced effects!

The post Font stacks, the !important css declaration and some html tips appeared first on Simon Donaldson.

Just like every other web designer i can’t wait for Internet Explorer 6 to be gone. There are some people who do not share this view. Maybe IE6 does have some good points. Just maybe it might be worth saving…

visit Save IE6

Ha! Tongue is definately in cheek.
Forget about IE6 for a second and you are looking at a nice site, it even works perfectly in IE6. Check out the download link where you are forced to complete a compatibility test first and then sign the petition.

I’d like to think the writing is on the wall for IE6 and that it won’t be around for much longer. In that case it really does need your help. Let’s hope it’s too late!

The post Save IE6 – if only Internet Explorer 6 was as good as this site appeared first on Simon Donaldson.

Every year on the 1st of April it is traditional to try to April fool somebody before the clock strikes midday. To do this you simply have to convince your gullible friend or colleague about a fictional or misleading non-truth. Basically you feed them the most unbelievable hoax, laugh at them when they fall hook, line and sinker and finally give them a pinch and a punch (for the first of the month) for their troubles.

The day itself is a bit of a mystery even Wikipedia doesn’t give a definite answer. The best guesses include the name given to fools who plant their crops too early or people who kept to the old calendar where the year started in April not January. Either way it makes a great excuse for some fun.

Ok so what happened today?

It seems every year the web design community get more and more involved with April Fools day hoaxes. Today was no exception;

Gmail announced an Autopilot feature to auto-respond to those annoying messages. It is ran by CADIE google’s Cognitive Autoheuristic Distributed-Intelligence Entity who has it’s/his/hers one blogger homepage and favorite places!

Google Chrome release their new 3D plugin

Smashing Magazine introduced IE8 Eagle Eye the all conquering update (they got in their nice and early too)

Youtube went all Ozzie on us

Mootools announced a new name

Opera announced a new feature called face gestures!

Sitepoint announce the impending reboot of the internet at 11:59am

The Guardian switches to a twitter only news feed

Silktidestudios announced the second National Naked Developer Day!

Expedia sell flights to mars!

Dial a Phone sell a coin and card operated phone

Thinkgeek announce an array of amazing products including a unicorn chaser and squeez bacon!

The Uk government plan to give out free Wii Consoles

Kodak launch the genius eyeCamera

Microsoft launches a Alpine Legend game controller?

Some people have far too much time on their hands! Brilliant none the less! Roll on next year!

The post Did you notice it’s the 1st April – a round up of some of the best hoaxes appeared first on Simon Donaldson.

The Problem

The code has to be included just before your closing body tag, this is because Google doesn’t want to hold up your page loading while it crunches this data, by placing it there it guarantees 99% of your page has finished loading. This works perfectly in almost all cases but there have been exceptions. The only time i have come across a problem was when i was testing a site on Internet Explorer 6. I kept receiving this error:

'_gat' is undefined

This can only be created when the code tries to call the Analytics code before it is launched. Basically, it’s is trying to call the function _gat too soon. Google have tried to fix this by adding a Javascript ‘try’ function.

<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
	try {
		var pageTracker = _gat._getTracker("UX-XXXXXX-X");
		pageTracker._trackPageview();
	} catch(err) {}
</script>

This helps as the code ‘tries’ to run the function and if it can’t then it runs the catch command. This works because it doesn’t create any other errors and the site will continue operating normally. The only problem is no tracking information will be passed.

Fixing it with Mootools

Firstly, more and more websites are using Javascript to provide better interactivity and functionality so there is a good chance you are already using a library in your site. Secondly they provide core functions which can detect when the page’s DOM is ready and when the page itself has actually finished loading. There a couple of things that can improved by converting this code to use a popular Javascript framework such as Mootools. Page load speed should be improved as we try to insert the tracking code after the page has completely finished loading and has been initiated. As a result we can also hope to improve the code performance by making sure the code has been downloaded before trying to run it.

Using Mootools we simply add a new Javascript assets into the page using the ‘addEvent’ function and then run the analyitics function calls when it has loaded.

window.addEvent('load', function() {
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	new Asset.javascript(gaJsHost + "google-analytics.com/ga.js", {
		onload: function() {
			try {
			var pageTracker = _gat._getTracker("UX-XXXXXX-X");
			pageTracker._trackPageview();
			} catch(err) {}
		}
	});
});

As you can see, I have left the try function in, this is to protect against the same problem we faced initially. Only this time the chance of it happening has greatly reduced. Another benefit of using this method is that you can remove the tracking code from your HTML template or masterpage. Now it is simply added into your Javascript include instead. If you use analytics to track your AJAX calls then it helps that all your code is in the same place!

I hope you find this useful, please leave a comment if you know of any improvements or think you know a better method.

The post Google Analyitics – fix the ‘_gat’ is undefined problem in IE6 with Mootools appeared first on Simon Donaldson.

This snippet of actionscript can be used to simply re-order or randomize an array in Adobe Flash.

var myArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
myArray.sort(function (){
return Math.round(Math.random());
});
trace(myArray);

ps and yes i know I’ve spelt randomise wrong ; )

The post Flash Quick Tip: How to randomize an Array appeared first on Simon Donaldson.

Do you remember the guy that created www.milliondollarhomepage.com to get himself through college and pocketed one million dollars? Everyone was jealous because they didn’t think of it first. Well, someone else has updated the concept and it still works!

Jason is a web designer from the states who has designed and created www.iwearyourshirt.com.

The idea is simple. Everyday he will wear a t-shirt with a company’s name and brand on the front of it. That alone will get you nowhere but Jason has cleverly linked up his idea with blogging and social media platforms to provide really good marketing posibilities. He posts daily on youtube, flickr and twitter to make sure the t-shirt gets noticed. The daily price goes up as the year passes, it originally started a $1, this makes sense as more people will know about the site by December!

Top idea Jason. Good luck.

(i wonder what he will do with 365 used t-shirts in a years time?)

The post Inspired thinking – I Wear Your Shirt appeared first on Simon Donaldson.

A cool video, inspired by the flyers you get handed out to you advertising club nights throughout the country, telling the story of one particularly good night out.

Music is Mr Scruff – get a move on! Top choon!

The post Nocturnal Day – The Anatomy of a Night Out appeared first on Simon Donaldson.

The site was originally created with a google maps platform but suffered from a huge hit rate and was taken down. I’m very glad to say it is now back up and surprisingly it is now built using the Microsoft silverlight platform. This is one of the first times i have seen a practical use of the silverlight over adobe flash. A hint of things to come perhaps?

The post Goon City – A pixel art world appeared first on Simon Donaldson.

Ajaxian recently posted a link to blackbaud.com and the release of an iPhone Browser Simulator.

The guys over at blackbaud labs have carefully skinned a full version of safari 3 into a windows compatible program. The iPhone is apparently based on an older version of Safari than the current released one so this provides an excellent way to check your websites compatibility without having to bug your friends who own an iPhone!

The post iPhone emulator built with Safari 3 appeared first on Simon Donaldson.

Yes, MS Paint, that well known digital creative tool. It rivals an etch-o-sketch in advanced technology!

Surprisingly it turns out quite well. The artist is obviously very talented and spent a long time on it.

Then i did a quick search on youtube and found a whole host of copycat videos.

These ones are no way near as good but they have a certain charm about them. If you watch them you will soon see what i mean. This is why i love youtube!

Ascii art rocks!

and of course.. the best til last!

The post Hows to draw a PSP in MS Paint – the good and the bad! appeared first on Simon Donaldson.

..change the variable by a couple of pixels!

After some quick googling i found a way of doing it by using the user-agent string.

The Future of the Web » Detect Internet Explorer 6 in JavaScript

This seemed perfect until i read the comments and stumbled across something. I was already aware that there are several different versions of IE6 and IE7 in existance but i didn’t know that some IE7’s return ‘msie 6‘ as it’s user string. An oversight by Microsoft perhaps?

Thankfully the user who pointed this out also offered a solution. Kudos to James King (comment number 8)!

var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
 && (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1)

The post Detect ALL versions of internet explorer 6 with one line of javascript! appeared first on Simon Donaldson.

Thanks goes out to Stephen Fry on twitter for tweeting this amazing website!

Thisiswhyyourefat.com

A simple but brilliant idea for a blog. Everyone has a weakness when it comes to food, some peoples idea of gastronomy is hardly gourmet, and yet they all look so delicious. Personally, i can’t wait to try a pizza burger. Now where did i leave my cholesterol tablets?

;)

The post A Tasty Blog – This is why you’re fat! appeared first on Simon Donaldson.

Moxie.com have blogged a useful checklist. They list 13 steps you would do well to consider before launching a website to the world wide web!

13 Steps to a Successful Website Launch via e-moxie.com.

I agree with all their points and can think of a couple extra..

14. Gzip all your javascript (if supported by your server). Otherwise use a javascript compressor to shrink the code.

15. Compress all your CSS using a CSS compressor. Try to compile it into one file and with different media types for print and screen.

16. Remove all your annotations from your code and insert a copywrite comment.

17. Run a broken link checking  site to find all the problem links.

18. Use a sitemap generator to create your sitemap.xml.

19. Verify your site with google webmaster tools.

20. Finally, don’t forget a favicon!

Wow, that’s seven more tips! I hope you find this useful.

more posts coming soon..

The post Checklist for a Successful Website Launch appeared first on Simon Donaldson.

Is IE6 dead? – yet?

This site is cool, i have no idea who made it or how they calculate the date, but i hope they are wrong! Get IE6 out now!

The post Is IE6 dead? – how much longer do we have to wait! appeared first on Simon Donaldson.

Do you remember the days of 56k modems and surfing the net with images ‘turned off’ so the page didn’t take a year to load?

This really cool rug by Richard Hutton is inspired by old school browsers which would download a picture one line at a time. I like the rug but i love the idea! Shame it’s a one off..

found at Ouno Design.

The post Awesome old school downloading rug! appeared first on Simon Donaldson.

This little composition was created from a series of pictures I took when I went to see Arsenal take on Newcastle in the Carling Cup 2007. It inspired me to edit it into something a little bit different. I experimented with colour and photoshop filters to create this dynamic effect.

The post The Emirates – a colourful place appeared first on Simon Donaldson.

The post Cool sculptures made with pencils appeared first on Simon Donaldson.

The post Body Painting for the foot fanciers! appeared first on Simon Donaldson.

This is Nike’s new tv advert! It’s really well shot, fantastic composition, superb colour and it’s a great story line all directed by Guy Richie!

The post Guy Richie’s new Nike advert is amazing! appeared first on Simon Donaldson.

I’ve found another gem..

If you write CSS then you will be aware how bulky it can become and, more importantly, difficult to read. Using shorthand CSS you can cut through a lot of the bulk by removing excessive property declarations and with a quick scan you can find a property to change or update.

Roger Johansson over at www.456bereastreet.com has written a good post about the most common forms of shorthand.

A summary of efficient css with shorthand properties

Typically they combine many declarations into one single declaration. The most important thing to remember from these findings is the order of the attributes within the new longer declaration!

One other thing is worth mentioning again.. if you are setting a value to zero or 0 you don’t need to add the measurement on the end (it is px by default).

For example:

Margin:0;

is the same as

Margin:0px;

and finally, this is purely my own habit, when setting margin or padding i always use..

Margin:0 0 0 0; Padding:0 0 0 0;

..even if i just want to change one value. It saves typing, keeps things neat and if you do need to go back and alter something you have already included it so you just change the value!

The post Shorthand CSS: Easier to learn, read and update! appeared first on Simon Donaldson.

I would love to have the opportunity to see the source code and fla’s for these:

http://www.scifi.com/tinman/oz/

http://samorost2.net/plantage/plantage.swf

http://www.adobecards.com

http://www.potatoparade.co.uk

http://www.nawlz.com

http://www.zunejourney.net/

The post The Best Interactive Flash Websites? appeared first on Simon Donaldson.

Thanks to the creator of ajaxload.info i never have to again! Simply choose your style, foreground colour , background colour then download your loader gif.

Loader bar.. Done!

The post Free loader bar animated gif creator website! appeared first on Simon Donaldson.

Your browser homepage is more important than you think. The days of the old Google are long gone. You can personalise a homepage to include many optional extras such as email, RSS aggregators, calendars, ebay listings and even weather forecasts. Not only that but there are a multitude of similar solutions available. Live.com, yahoo, netvibes to name a few. I have experimented with netvibes and live.com but every time I find myself back with Google.

Why?

Well, these solutions are limited by two problems. Compatibility and speed. A huge percentage of the add-ons are made by independent programmers and as such they sometimes don’t include all the features you would expect, have compatibility issues and sometimes they are not maintained. The second issue occurs when you add many add-ons to your page thus increasing the load times. Some solutions offer a tab system which only load the visible add-ons but this can still be a problem. As a result I now only have three add-ons. Gmail, google calendar and a to-do list. Personally I have found anything else is worthless to me as I find it easier to go the site. The only other one I tried was the Google Reader add-on. Again, this simply did not perform well enough to stop me needing to view the actual web app. I now have a streamlined and efficient landing page. It shows me the information I need to know when I first start surfing and ONLY the information I would automatically check every time.

What’s changed

Google has updated iGoogle! Some would say it’s long over due, I would have to agree. The minimal Google look is surprisingly looking a little bit dated! (strange i know) It’s looking a lot more like netvibes, round corners and more effective tabbing. Check out the screenshot..

It gives it a more friendly feel. I much prefer it. There are practical benefits too; you have the option of viewing your add-on at full width and with the more developed add-ons you get much more functionality. The two which have impressed me the most is Gmail and Google Calendar. Click on the side nav and you basically get these two as fully functional sites. I now can cancel Gmail from forwarding all my mail to my work email account and can receive it right here in the browser, even though it is blocked. Fantastic. Good work Google. Thanks!

(ps my iGoogle page has the radiohead theme)

The post iGoogle gets an update and now i can check Gmail at work! appeared first on Simon Donaldson.

Since CSS is hierarchical and semantic you can greatly condense your style sheets by cutting out the over use of classes and id’s. For example, if I were to have a list within a div, you only have to give the containing div and id name to style all the contents.

This is where the CSS Frame Generator comes in. Basically you enter your (x)html, with the main elements given id’s, and the application will create a stylesheet full of empty CSS attributes. You can then start filling in the style attributes and finally delete the ones you don’t use!

So, to sum up, it doesn’t help with design but could just save you some time and make your code better!

The post Free Online CSS Framework Generator appeared first on Simon Donaldson.

The SEO Rapper – Design Rap

The SEO Rapper – Link Building 101

The SEO Rapper – Paid Search 101

The SEO Rapper – Social Media Addiction

The post Web Design Rapping: The SEO Rapper – pure genius!! appeared first on Simon Donaldson.

This is what you need:

CSS quick reference sheet

and

CSS Property Index

The post CSS quick reference and comparison table appeared first on Simon Donaldson.

Combine Your CSS Media Styles Into One File

As you are probably already aware you can declare a media type for your CSS stylesheet. This enables you to have a specific style for online, mobile, print etc. Declaring these sheets seperately means you have extra http requests. The more requests per page the less efficient it becomes..

CSS has a built in method of declaring the type as if it were an ‘if’ statement. Hence you can keep all your CSS in the one file! F.A.B.

@media all
{
/* all other attributes (web, mobile etc) */
}

@media print
{
/* print attributes */
}

The post Combine all CSS media types into one style sheet appeared first on Simon Donaldson.

So many thanks to leigeber.com

this one is a gem..

download it here!

The post The BEST CSS cheatsheet yet and it’s all about shorthand appeared first on Simon Donaldson.

The post My first band CD! – just a little bit of fun appeared first on Simon Donaldson.

Multilevel Drop Down Navigation Menus: Examples and Tutorials

The post CSS horizontal drop down menus: A great resource list! appeared first on Simon Donaldson.

So if you have a spare 20 minutes, check out Digital Temple magazine

The post Digital Temple – a new digital creative magazine appeared first on Simon Donaldson.

Firefox – a compliant browser

After months and months of hard work the peeps over at Mozila.org have released the latest copy of Firefox. If you haven’t heard of Firefox before WHERE HAVE YOU BEEN? It is the best independently developed compliant browser in the world.. FACT!

In a world dominated by Microsoft, and their policy of ignoring any web design standards, Firefox offers a breath of fresh air. It is fully compliant to W3C standards and fully supports CSS 2. Version 3.1 will offer even more and will start supporting CSS 3 selectors!.

It also supports open source plugins, themes and of course add-ons such as Flash or Java. It even now supports things like the Turntool Viewer. Added together with the auto-install and update features it is easy to keep up to date with the newest releases.

Basically to sum up… Firefox works and it makes the web look beautiful again. If you’re not a fancy dan with your lovely purrrdy mac then you need to install this!

Plugins – browser heaven

One of the best features of Firefox is the ability to install plugins which enhance your net use. As a web developer these plugins are even more fantastic as they can cut development time, help find bugs and generally make your day to day job easier.

Some of the plugins that i use include:

Web Developer – This tool bar is so useful i almost forgot it was a plugin. It has an amazing array of features, too many to list, each one is super useful. I guess the best ones would be disabling CSS or Javascript or Flash, cookies, forms, images, displaying meta info, clearing the browser cache, outlining elements, resizing the window, viewing source code in colour and validating your code.

Firebug – this plugin allows you to edit html, CSS, Javascript ‘LIVE’ in a web page. The results are show in the browser and if you have ftp support you can even save the edited file. This is great for correcting CSS bugs or layout issues. Another great feature is its debugging tool, if you write any form of JavaScript you will find this feature irreplaceable!

ColorZilla – This tool has more features that you might think! The two main ones that I use are the colour dropper tool which allows you to sample a colour from anywhere within a web page, and the outline tool which displays a dashed red line around all elements. This is especially useful when designing CSS layouts as you can view divs and other elements.

Screengrab! – Anther simple but great tool! It simply allows you to screen capture a web page and either output a png file or copy it to your clipboard where you can then paste it into your authoring software. This is especially useful as it can screen grab the whole web page and not just the visible partition.

ViewSourceWith – A simple idea but nether-the-less immensely useful. View the web pages source directly in your authoring software ie Dreamweaver!

Live HTTP headers – This plugin displays your web sites live HTTP header requests are they are sent and received.

Tamper Data – If you should want to do such a thing as tamper with your HTTP headers then this is the plugin for you. Just start it up and it intercepts all the headers, you then edit them and submit away!!

FireFTP – Turn Firefox into a ftp client

GSpace – You will never need your USB key fob again. This uses gmail as a ftp remote folder. You can upload anything directly to your gmail inbox. It will use the gmail mp3 player to stream mp3’s and you can view images by thumbnail. One downside is gmails 19mb cap per upload but you can split your files. One bonus.. my 6gig gmail account!

English Dictionary – Speaks for itself. Right click a misspelt word and just select the right one. Bing bang bosh

PicLens – A 3D virtual wall for displaying photo albums and videos. The sites have to be compatible but with flickr, facebook and myspace in the loop it’s a winner already

Download Status Bar – If the download pop-up annoys you this is what you need. It integrates the download status into you status bar and has many extra features to make downloading a neat and tidy business.

So first impressions are good. The interface is smart but clean. Everything seems to work. I guess this is what it must be like to own a mac!

The post Firefox 3 is here! appeared first on Simon Donaldson.

The only way to fix this is to include at the top of your own CSS style sheet a ‘CSS Reset‘ script.
A while ago i stumbled across a basic CSS reset script and after some research i discovered Eric Meyer’s CSS Rest Reloaded script. Eric has created a really comprehensive script but as ever i felt the need to edit it for my own use. I personally felt it could be stripped down slightly and sometimes went too far. Specifically the body, blockquote, q resets and setting list-style to ‘none’. The following is what i had left:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; line-height:100%;}
:focus {
/*outline: 0; if used define new style */
}
ol, ul {list-style:circle;}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}

The post CSS Reset: the first step to browser compatibility appeared first on Simon Donaldson.

Cosmicbug is a wordpress blog written by Gain Lee and dedicated to his two passions in life, photography and astronomy.
Gain has been a professional photographer for years and his blog gives you a small glimpse at the vast range of pictures that he has taken. His subjects include stars, comets, galaxies, nature, landscape and portraits. Gain has had several shots published in international magazines and had a small global fan base. There are some really nice shots there!

Check out cosmicbug here

The post Cosmicbug – a photography site by Gain Lee appeared first on Simon Donaldson.

If you want to create a RSS feed for any category or tag within your blog, simply copy and paste the URL shortcut to that category or tag, then add on the end ‘/feed/’

e.g. for the category ‘WordPress’:

URL = http://developer.simondonaldson.com/category/wordpress

the RSS = http://developer.simondonaldson.com/category/wordpress/feed/

http://developer.simondonaldson.com/category/wordpress/feed/
http://developer.simondonaldson.com/category/wordpress/feed/rss/
http://developer.simondonaldson.com/category/wordpress/feed/rss2/
http://developer.simondonaldson.com/category/wordpress/feed/rdf/
http://developer.simondonaldson.com/category/wordpress/feed/atom/

That’s it… Done!

The post Create a RSS feed for any category or tag in WordPress appeared first on Simon Donaldson.

a powerfull list of wordpress lifesavers plugins

The post A great list of WordPress Plugins appeared first on Simon Donaldson.

If you write any sort of Javascript code then you probably have come across this at some point. Passing a variable to a function triggered from setTimeout doesn’t work in IE. Luckily I stumbled across a widely unknown solution!

Normally you would use this:

setTimeout(“myFunction(‘“+variable+”’)”,1000);

but you are meant to be able to use this:

setTimeout(myFunction,1000,variable);

but frustratingly it doesn’t work in any version of Internet Explorer.

The Solution

Well, it is surprisingly simple. You just need to encase your function name in a ‘closure’. i.e. a function declaration. This is surprisingly similar to flash actionscript which is of course javascript based. Why didn’t I think of this before??

So you simply put:

setTimeout(function(){myFunction(variable); variable = null},1000);

the ‘variable = null’ is to stop a memory leak as the variable is not deleted as it should be.

(thanks makemineatriple)

The post Variables, setTimeout and Internet Explorer appeared first on Simon Donaldson.

found via TechEBlog.

The post When windows goes bad! – it becomes art! appeared first on Simon Donaldson.