Archive for March, 2011

Posted by 6bytes at 22, March, 2011

Category: Portfolio

Tags: , , , ,

TK Maxx website rebranding

After

Before

 

Website redesign for TK Maxx. Launched just yesterday.
Venda coding all the way in the back end and HTML, JavaScript and CSS in the front end.
View site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One particularly annoying issue was to make the logo stay on top of the sliding main homepage image. All other browsers were just fine but in IE6 and 7 the logo was hidden behind the image.

 

TK Maxx website rebranding, logo bug

Logo behind image

TK Maxx website rebranding, logo fixed

Logo above image

 

The trick was simple yet not obvious. <div> containing the logo needs not only its z-index set to a higher value than sliding image, but also we have to make sure IE treats it seriously and make our CSS rule important.

#logo { z-index: 1000; }

Above will not work whereas below will work like a charm.

#logo { z-index: 1000 !important; }

Posted by 6bytes at 1, March, 2011

Category: JavaScript

Tags: , , ,


flowplayer is an Open Source (GPL 3) video player for the web. Allows you to easily embed video streams into your web pages.
While it’s easy to integrate and very powerful occasionally it may give you headaches especially with cross-browser compatibilities.

The most basic configuration looks like this:

	<script type="text/javascript" src="/js/flowplayer-3.2.6.min.js"></script>
	<a id="player" href="/path/to/movie/example_movie.flv"></a>
<script>
	flowplayer("player", "/path/to/file/flowplayer-3.2.6.swf");
</script>

So you’ve done everything according to documentation and your flowplayer works fine in Firefox but not in Internet Explorer and/or Google Chrome.

There’s a couple of things that worked for me:

1. Change Flash player and your movie URL’s from relative to absolute.

	<a id='player' href='http://www.example.com/path/to/movie/example_movie.flv'></a>
	flowplayer('player', 'http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf');

2. Make sure that JavaScript and Flash files are the same version. In our case 3.2.6

3. Edit flowplayer’s JavaScript library flowplayer-3.2.6.min.js (even the minified file). Look for 9,0 and change it to 10,0. This ensures that flowplayer requests Flash player 10 installed in your browser (latest version by the time this post was writen).
OR request a Flash version in your flowplayer start script:

	flowplayer('player', {
		src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf',
		version: [10, 0],
		onFail: function()  {
			// Write your own message for devices not supporting Flash
		}
	},
	{
		clip: 'http://www.example.com/path/to/movie/example_movie.flv'
	});