Graphic Euphoria» Javascript

Firefox not displaying dynamically embedded flash? Page-speed might be your problem!

Si — Mon, 12 Oct 2009 14:55:35 +0000

Flash no show

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!

Seperate a number (int) from string using Mootools

Si — Wed, 09 Sep 2009 10:58:37 +0000

I recently blogged about using regular expressions to extract a number or integer from a string in javascript. So what if you are using Mootools? Well you save even more time:

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

Mootools FTW!

Seperate a number (int) from a string in Javascript

Si — Tue, 08 Sep 2009 22:40:37 +0000

Seperating a number or integer from a string is a common task in any coding language including javascript. It’s one of those times when you just wish code knew what you were trying to do… 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!

Detect Internet Explorer 6 (IE6) and other popular browsers with Mootools

Si — Thu, 09 Jul 2009 11:43:26 +0000

One of the top keyword searches on this blog is ‘detect ie6 mootools‘; As popular as this search term is, it’s not actually covered, so this post should fill that gap! 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.

Google Analyitics – fix the ‘_gat’ is undefined problem in IE6 with Mootools

Si — Mon, 02 Mar 2009 14:03:12 +0000

Google Analytics is a fantastic, totally free, web tracking service provided by Google. It works by embedding a Javascript include at the bottom of your page which loads Google’s tracking code. The code then passes all your tracking information to the Analytics cloud where it is digested and returned in the web-app.

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.

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.

Hows to draw a PSP in MS Paint – the good and the bad!

Si — Sun, 22 Feb 2009 12:58:41 +0000

TechEBlog posted another great video where a skilled digital artist draws a Sony PSP by hand in MS Paint. 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!

Detect ALL versions of internet explorer 6 with one line of javascript!

Si — Sat, 21 Feb 2009 20:27:26 +0000

One of the projects i am currently working on required me to determine if the user’s browser was Internet Explorer 6 or not. The website’s menu came slightly out of alignment by a few pixels. I would normally use a conditional statement to add extra CSS but since this was a javascript menu my choice was limited to one.. ..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)

Checklist for a Successful Website Launch

Si — Thu, 19 Feb 2009 00:01:55 +0000

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..

Javascript: Passing variables with setTimeout and getting it to work in Internet Explorer

Si — Thu, 12 Feb 2009 14:06:13 +0000

The Problem

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)