Firefox 3.6 introduced a very annoying bug, and only on a Mac.
If you're using somewhere a MouseEvent.ROLL_OUT or MouseEvent.MOUSE_OUT, this event will fired even if you only click on a object without leave the object with the mouse.
Example there
The select box in the middle of the page doesn't work because a roll out event is fired when you click on it.
I didn't try yet to find a fix with MOUSE_UP and MOUSE_DOWN, but the problem is, all the existing sites that are using those events might be broken...
I believe Firefox is, or not firing the right event, or removing and putting back the flash so it loses the focus, meaning roll out is fired... A friend told me that the same things happen with java applet, didn't verify it yet.
Bug report
To test it, paste this as a document class:
Actionscript:
-
package com.soundstep.baseui.demo {
-
import flash.events.MouseEvent;
-
import flash.display.Sprite;
-
public class Main extends Sprite {
-
public function Main() {
-
var s:Sprite = new Sprite();
-
s.graphics.beginFill(0xFF0000);
-
s.graphics.drawRect(0, 0, 100, 100);
-
s.addEventListener(MouseEvent.MOUSE_OUT, test);
-
addChild(s);
-
}
-
private function test(e:MouseEvent):void {
-
trace("ok");
-
}
-
}
-
}
Click on the square and you'll see that the MOUSE_OUT is fired...
I hope they'll fix soon or I'll have to find a hack and change everything that is live.
Romu
17 Comments »
I made a small update in the SomaText class (also Soma and SomaUI) because of a bad behavior with the TextField class. The TextField instance is losing the HTML formatting in case you set the htmlText and then set the multiline property to true (the other way keeps the formatting).
To reproduce the behavior:
1. create a next TextField instance
2. set some htmlText with formatting (like P and BR)
3. set the multiline property to true
Not a big deal but SomaText solves this behavior (working either way). I've also updated Soma and SomaUI as the framework can process TextField properties in the XML you might have found formatting problems with some SomaUI Templates (or when using the TemplateParser). The Soma Protest sources are using styles from a CSS, not TextField property in the XML, so no problem).
Anyway, everything should work as expected now.
No Comments »
This has nothing to do with flash but I share this quick try as I saw a lot of people looking for a background that fit the browser in html.
I used the ratio out I explained in this previous post, obvously you don't have the flash smoothing.
It is not perfect, I had to remove the scrollbars as a part of the picture is not visible. See the demo and download the source.
I'm far from being a good html/css/javascript developer so If you know already a good version or if you have developed one, please comment.
HTML:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Soundstep | experiments (html/css background fitting the borwser)
</title>
-
-
html, body {
-
overflow: hidden;
-
}
-
</style>
-
<script type="text/javascript" src="browser.js"></script>
-
-
function fixedBackground(url) {
-
document.body.style.padding = '0';
-
document.body.style.margin = '0';
-
var overlay = document.createElement('DIV');
-
overlay.style.position = 'absolute';
-
overlay.style.top = '0';
-
overlay.style.left = '0';
-
overlay.style.height = '100%';
-
overlay.style.width = '100%';
-
overlay.innerHTML = document.body.innerHTML;
-
document.body.innerHTML = '
<img id="bg" width="10" height="10" src="' + url + '" style="left: 0; top: 0; z-index: 0" />';
-
document.body.appendChild(overlay);
-
backgroundset = true;
-
updateBackground();
-
}
-
-
function updateBackground() {
-
var bSize = getSize();
-
var sWidth = bSize.w;
-
var sHeight = bSize.h;
-
var ratio = 1024 / 768;
-
if (sWidth / ratio <sHeight) sWidth = sHeight * ratio;
-
else sHeight = sWidth / ratio;
-
var __bg = document.getElementById('bg');
-
__bg.top = 0;
-
__bg.left = 0;
-
__bg.width = sWidth;
-
__bg.height = sHeight;
-
}
-
-
function getSize() {
-
var myWidth = 0, myHeight = 0;
-
if( typeof( window.innerWidth ) == 'number' ) {
-
//Non-IE
-
myWidth = window.innerWidth;
-
myHeight = window.innerHeight;
-
}
-
else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )) {
-
//IE 6+ in 'standards compliant mode'
-
myWidth = document.documentElement.clientWidth;
-
myHeight = document.documentElement.clientHeight;
-
}
-
else if (document.body && ( document.body.clientWidth || document.body.clientHeight )) {
-
//IE 4 compatible
-
myWidth = document.body.clientWidth;
-
myHeight = document.body.clientHeight;
-
}
-
var r = {w:myWidth, h:myHeight};
-
return r;
-
}
-
</script>
-
</head>
-
-
<body onresize="updateBackground()" onload="fixedBackground('bg.jpg')">
-
-
-
-
</body>
-
</html>
3 Comments »