Category JavaScript Archive

これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは！と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。

IE PNG FixのAlpha版もbackground-repeatに対応しているけれど、リピート用のJSの他にblank.gifや.htcファイルを読み込んだりする必要があるので少々面倒。

DD_belatedPNGの使い方は非常にシンプルで、headタグでJSファイルを読み込んで透過pngを使用したCSSセレクタを指定するだけでオーケーです。

<!--[if lte IE 6]>
<script type="text/javascript" src="<$mt:BlogURL$>theme/js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.iepngfix, div#pngFix');
</script>
<![endif]-->

セレクタはカンマ区切りで複数指定出来ます。

今回のブログデザインを変更するにあたりこのJSファイルを使わせていただきました。このブログではjQueryを使ってるので、次のようなコードを書いて透過pngを使った画像にIE6以下のブラウザの場合.iepngfixが自動的に適用されるようにしています。

$(function()
{
	if ($.browser.msie && $.browser.version < 7.0)
	{
		$("img[@src$=png]").addClass("iepngfix");
	}
}

リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。

a.pdf {
	padding: 0.1em 18px 0.1em 0;
	background: url(img/icon_pdf.gif) no-repeat right center;
}

しかしこのCSSの場合、改行されるような長い文章の場合、Windows IE6/IE7で致命的なバグがあります。

左のキャプチャ画像は各ブラウザのレンダリング状態をキャプチャしたものです。

Win Firefox3およびMac Firefox3ではきちんと文末にアイコンが表示されているのに対し、Win IE6/IE7の場合アイコンがきちんと表示されていない事が分かると思います。

zoom:1プロパティを与えると一応は表示されますが、文末にアイコンが表示されずに改行されている文章の右中央に表示されてしまいます。

Win IE6/7ではインライン要素に指定した背景画像で改行が入る場合、意図したレイアウトが反映されないバグがあるのです。

先日この事でTwitterにポストしたところ、a要素の次に空spanを入れてspanに背景を指定すれば回避されると回答が来ました。例えば次のようなXHTMLとCSSを書けば良いとの事です。

<style type="text/css">
span.pdf {
	padding: 0.1em 18px 0.1em 0;
	background: url(img/icon_pdf.gif) no-repeat right center;
}
</style>
<p><a href="hoge.pdf" target="_blank">PDF</a><span> </span></p>

Read more

jQuery（とCSS）を使って検索ボックスをデザインしてみました。

デモページはこちら

jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。

• CSS有効で画像をオフにしたら何も表示されなかった
• submitボタンの背景に画像を使用するため、valueの値を空にしないとvalueの値が見えてしまう。valueの値を空にすると、CSSをオフにした状態でsubmitボタンにテキストが何も表示されなくなる。※
  ※inputのtypeをimageにすれば問題無。画像をオフにしたでも実行フォームが表示される。

<input type="submit">のvalue属性に"search"を入れた場合、searchの文字が見えてしまう。

value属性の値を空にするとCSSオフの状態でsubmitボタンの文字が表示されなかった。

CSS有効で画像オフの場合何も表示されなかった。

jQueryで無くても良いのかもしれませんが、なんせ普通のJavaScriptが書けないもので。
jQuery部分のコードは次の通りです。

Read more

もっと簡単なコードで書けますね。クリックした要素のindexとマッチしたdivを開閉するって方法です。

$(function()
{
	var targetElem = $("div#simpleAccordion div");
	targetElem.hide();
	$("div#simpleAccordion h2").click(function()
	{
		var index = $("div#simpleAccordion h2").index(this);
		targetElem.eq(index).toggle("normal");
	});
});

jQueryを使った超シンプルなアコーディオンを作ってみました。#simpleAccordionを与えたdivの子要素であるh2をクリックするとその直後のdiv要素が開くと言うものです。

まずはデモです。

Read more

iTunes StoreのNew ReleaseWhat's Hotなどの部分で使われているインターフェイスは省スペースで多くの情報を提供出来るクールで優れたインターフェイスですよね。色々なJavaScriptライブラリが公開されていますが、その中でもjQueryを使ったライブラリであるCoda-Sliderを紹介します。

必要なライブラリは計4つ。Ver1.2以上のjQuery、jQuery easing plugin、jQuery easing compatability plugin、そしてCoda-Sliderです。

まずはデモを作りましたのでご覧ください

ページを切り替える左右の矢印とセンター上部のタブはCoda-Slider.jsで生成されます。JavaScriptが無効になっている場合はslide.cssの.cswで定義されるのでアクセシビリティ的にも問題ないと思います。

ただデザインする時にJSで生成される部分が作りづらいので僕の場合、JSで生成されるHTMLコードも含めたHTMLファイルdammy_slide.htmlなるものを用意してます。

dammy_slide.htmlを含めたデモサイトをZIPに圧縮したものをダウンロード出来るようにしておきますので参考にしてみてください。slide.cssで定義している画像のwidthやheight、background、divのwidthやheightをちょこっと変更するだけで使えると思います。

slider.zipをダウンロード

この2〜3日、透過pngを大量に使うデザインのコーディングを行っていましたが、その中で困ったのがIE6で透過pngがロールオーバーしてくれないこと。

様々なライブラリを試したけれどもやっぱりロールオーバーしません。ところが唯一ロールオーバーに対応していたのがユンサンが配布しているiepngfix.jsのバージョン1.4。マウスオーバーさせたいオブジェクトとロールオーバー画像を引数にしてhover関数をコールすると言う使い方をします。

僕の場合はjQueryを使うケースが多いので、外部JSに以下のように書き出して使ってます。

$(function()
{
     var lo_nav1 = document.getElementById('lo_nav1');
     IEPNGFIX.hover(lo_nav1, 'btn_hoge_on.png');
});

ちなみに通常透過pngを使う場合は専用のクラス

* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }

のように作っていますが、ロールオーバーさせるオブジェクトにはこのクラスの記述はしません。通常だったら<img src="hoge.gif" class="iepngfix" />みたいな記述をするけれどもロールオーバーさせたい場合は<img src="hoge.gif" id="lo_nav1" />のようにIDの指定だけでオーケーです。クラスを記述してしまうとロールオーバーしたままになるので要注意です。

IE6で透過pngを表示させるのにユンサンのiepngfix.jsを良く使います。ただ最近jQueryを使用するケースが増えたため、jQueryのプラグインのIE Png fixを試してみました。

使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用させるようにします。

$(function() {
     $("img[@src$=png]").pngfix();
});

このような記述をすればページ内のすべてのimgタグでマークアップされたpngファイルに適用されます。

やはりcssの背景に使う場合が多いので.iepngfixと言うクラスにも適用されるように記述しています。

$(function() {
   $("img[@src$=png],.iepngfix").pngfix();
}):

iepngfix.jsもIE Png fix.jsも同じような使い方が出来るので、どちらを使うかは好みですね。