floatで浮かせた要素がなんかどっかでつっかえるのを直したい・パターン1(FireFox)


floatで浮かせた要素がなんかどっかでつっかえる。

IE6とかに多いけど、FireFoxで起こることもある。

今回はFireFoxで起こったケース。

どうやらフォントサイズが関係しているらしいが、わからない。

cssだけで解決できればそれにこしたことは無いけど、どうしてもわからない、無理!ってときはJSに頼るしかない。

JSに頼るしかないときってのは強引に直さなきゃならない時ってたいてい相場が決まってる。

今回はfloatさせてるボックス要素の三つおきにクラスclearを追加して強引に整形した。


<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
....

div.floatedBox{float:left;width:70px;height:100px;}

//onloadでaddClassClear()関数を実行するイベントリスナを追加
if (window.addEventListener) { /* Firefox */
window.addEventListener("load", addClassClear, false);
}
else if (window.attachEvent) { /* IE */
window.attachEvent("onload", addClassClear);
}
else {
window.onload = addClassClear;
}
/*--3つ置きにflaotを解除するclass"clear"を挿入--*/
function addClassClear() {
var elem = document.getElementsByTagName('div');
for (var i=0; i<elem.length; i++){
var j = i%3;
var className = elem[i].className;
if(className == 'floatedBox' && j=='1'){
elem[i].className = 'floatedBox clear';
}
}
}

HTML5アニメの概要を総ざらいしたい。

モバイル向けFlashディスコンになったところでHTML5アニメを総ざらいしたい。

アドビから正式に発表がありました。
これで、HTML5へのシフトが加速すると思われます。
しかし、HTML5アニメーションといっても、
主要なフォーマットだけで、三つもあります。
まずは、DOMアニメーション。
これはcss,JavaScriptだけで作るアニメーションです。
そして、SVG
これはベクター形式で画像を扱います。
RaphaëlというJavaScriptライブラリが有名です。
次に、canvas
これはもともとAppleのMachintoshの「ダッシュボード」に使われていたテクノロジーです。
それぞれ長所・短所があります。
1)DOMアニメーション
長所・・・軽い。スマートフォンのよな非力な環境でも軽快に動く。
短所・・・複雑な図形は扱えない。せいぜい円、四画形(角丸)、くらい。

2)SVG
長所・・・ベクターグラフィックスなので、画像を拡大しても劣化しない。
短居・・・現状Androidの対応が遅れている。

3)Canvas
長所・・・svgより複雑なアニメーションを作ることができる。
短所・・・イベントハンドラを実装できない。

floatで浮かせた要素がなんかどっかでつっかえるのを直したい・パターン1(FireFox)

floatで浮かせた要素がなんかどっかでつっかえる。
IE6とかに多いけど、FireFoxで起こることもある。
今回はFireFoxで起こったケース。
どうやらフォントサイズが関係しているらしいが、わからない。
cssだけで解決できればそれにこしたことは無いけど、どうしてもわからない、無理!ってときはJSに頼るしかない。
JSに頼るしかないときってのは強引に直さなきゃならない時ってたいてい相場が決まってる。
今回はfloatさせてるボックス要素の三つおきにクラスclearを追加して強引に整形した。

<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
....
div.floatedBox{float:left;width:70px;height:100px;}
//onloadでaddClassClear()関数を実行するイベントリスナを追加
if (window.addEventListener) { /* Firefox */  
  window.addEventListener("load", addClassClear, false);  
}    
else if (window.attachEvent) { /* IE */  
  window.attachEvent("onload", addClassClear);  
}      
else {
  window.onload = addClassClear;  
}  

/*--3つ置きにflaotを解除するclass"clear"を挿入--*/
function addClassClear() {

var elem = document.getElementsByTagName('div');
	for (var i=0; i<elem.length; i++){
	var j = i%3;
	var className = elem[i].className;
		if(className == 'floatedBox' && j=='1'){
		elem[i].className = 'floatedBox clear'; 
		}
	}
}