Graphic Euphoria» Web Design

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.

Font stacks, the !important css declaration and some html tips

Si — Wed, 03 Jun 2009 18:34:33 +0000

It’s been a good week for subscribing to blogs, they are a endless stream of new and useful information, here are a few good tit-bits from my reader account!

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!

Save IE6 – if only Internet Explorer 6 was as good as this site

Si — Thu, 02 Apr 2009 08:37:55 +0000

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!

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.

iPhone emulator built with Safari 3

Si — Sun, 22 Feb 2009 23:03:06 +0000

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!

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

Is IE6 dead? – how much longer do we have to wait!

Si — Tue, 17 Feb 2009 14:09:54 +0000

It’s a question on every modern, dynamic, aware and forward thinking web designers mind.. 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!

Shorthand CSS: Easier to learn, read and update!

Si — Sat, 14 Feb 2009 14:32:03 +0000

Well, I’m slowly getting through all my bookmarks, blogging the important sites I’ve discovered over the last couple of years. 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 Best Interactive Flash Websites?

Si — Sat, 14 Feb 2009 14:17:26 +0000

I recently stumbled across a few 100% fullscreen interactive flash websites. Now, if there was an award for the ‘Best Interactive Flash Websites’ out there, these would have to be contenders! 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/

Free loader bar animated gif creator website!

Si — Sat, 14 Feb 2009 14:13:20 +0000

I just stumbled across this site while googling for a loader bar. I admit i just couldn’t be bothered to make one and planned to steal one.. 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!