Today, I read about a problem with Opera’s onload event not firing when navigating with back / forward buttons. The reason for this is that Opera receives documents directly from cache. Another, similar kind issue is related to firing onload event, when adding images dynamically.

In this article, we will solve Opera’s onload issue caused by caching, and another problem, which occurs when adding images dynamically with javascript.

Currently, this is tested to work with Windows versions of Opera 10.1, 10.2 and 10.5 pre-alpha. Please, give me feedback if you find issues with other versions of Opera.

How to force refreshing

This isn’t complicated at all:

if (window.opera)
{
	opera.setOverrideHistoryNavigationMode('compatible');
	history.navigationMode = 'compatible';
}

How to solve image.onload

After banging my head against wall, I found an easy solution:

var test = new Image();
if (test.addEventListener)
{
	test.addEventListener('load',function()
	{
		alert(this.width);
	}, false);
}

test.setAttribute('src','/images/test.gif');

The key is to define src attribute after you’ve bound event listeners.

Demo

You can view demo at Demo section: Onload issues with Opera

I was about not to publish anything before Christmas – just calming down, taking some extra time to get my blog design finished, plugins installed, and so on..

..but no. I got way too excited when I heard today that Opera 10.5 pre-alpha for Labs was released. In other words, this means that an updated version of Opera’s layout engine, Presto, was out to play with – meaning, that CSS3 Transformations and Transitions are available also for Opera.

In this article, we write some lines of CSS and create rotating transform effect with all the common browsers, including Internet Explorer and the latest version of Opera.

Issues with Opera and IE

Opera offers CSS3 Transitions support in Opera Presto 2.3, at least partially. By the specification, we’re able to take advantage of -o-transform:rotate(deg);.

IE is a bit trickier (big surprise). Fortunately there’s a nice filter available, called Matrix. The values for matrix are quite complicated, hence some assistance with Javascript is needed.

In my case, I’ve created some functionality and bound it with HTC file to CSS selectors. The functionality is based on values of property -ms-transformation. I’ve also implemented -ms-transition for transitions, but this will be examined further on later posts.

Example code

In this example, I’ll be using A-elements for hover support in IE6. I’ve already written a small implementation similar to Whatever:hover, but that “project” is still taking baby steps.

So let’s cut the chase and create some lines of code:

HTML

<a href="#" id="one" class="rotate">This is 45deg -rotated element.</a>
<a href="#" id="two" class="rotate">This is 10deg -rotated element, which rotates to 45deg when hovered.</a>

CSS

#one {
behavior:url(-ms-transform.htc);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
#two {
behavior:url(-ms-transform.htc);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
#two:hover {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}

Demo

You can view demo at Demo section: Cross-browser Rotation Transformation with CSS.

Final thoughts

Although everything “is not fully there”, this article shows the possibility for implementing cross-browser CSS3 Transformations purely with CSS.

In addition, this post works as an opening post of my blog. Feel free to give feedback. Merry Christmas!