WEB制作のメモ帳 - coral design » js

adobe spryのタブつきパネル　マウスオーバーでタブを切り替える

Hiroyuki Watanabe — Fri, 19 Dec 2008 09:10:45 +0000

DreamweaverCS3に付いているspryでタブつきパネルを使っていてデフォルトでは、タブをクリックして切り替えるんですが、
マウスオーバーで切り替わらないか調べてみてうまくいったのでご紹介します。SpryTabbedPanels.jsの275行目くらいに以下のようなところがあります。

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

赤字の”click”を“mouseover” に変えるとマウスオーバーでタブが切り替わるようになります。

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

IE6でhover,active,focus擬似要素を使う

Hiroyuki Watanabe — Wed, 17 Dec 2008 04:45:07 +0000

IE6はa要素以外は:hoverや：active、：focusなどのダイナミック擬似クラスに対応していません。それを解決するのがcsshoverというJavaScriptライブラリです。

csshoverの使い方

配布元よりcsshoverの.htcファイルをダウンロードします。:hover と :activeに対応した1.4系、1.4系に:focusを追加した2.0系がありますので、利用したい擬似クラスに合わせてダウンロードしてきてください。ダウンロードしたファイルはスタイルシート内でbody要素に対して読み込みます。

body{
	behavior:url("csshover2.htc");
}

.htcファイルのパスはhtmlファイルからのパスになるように気をつけてください。これで、CSSで擬似クラスを設定すれば、IE6にも反映されます。

ul.exp1 li:hover{
	background:red;
}
ul.exp2 li:active{
	background:red;
}
input.exp3:focus{
	background:red;
}

【js】タブの中でアコーディオン風にコンテンツが切り替わるスクリプト

Hiroyuki Watanabe — Thu, 20 Nov 2008 01:09:33 +0000

タブの中でアコーディオン風にコンテンツが切り替わるスクリプト

tab accordion

nyokiglitter

スクロールバーをカスタマイズ

Hiroyuki Watanabe — Thu, 02 Oct 2008 01:19:25 +0000

スクロールバーってブラウザごとにスタイルが違うんですが、それをCSSとJavascriptで独自のスタイルにするという記事が出てたので紹介します。

サンプルはこちら

 css-tricksでファイルのダウンロードもできます。試してみたいです。

FancyZoomをwordpressで使う。プラグイン

Hiroyuki Watanabe — Thu, 31 Jul 2008 03:25:15 +0000

lightboxよりFancyZoomの動きが好きなんで、FancyZoomを入れてみようと思っいたら、wordpress用のプラグインがあるではないですか！

簡単にできました。
→　クリックするとFancyに（サイトでは”The zoom effect is super sexy”と書いています(笑)）画像が開きます

WP FancyZoom Wordpress Plugin
このサイトにあるWP FancyZoom.zipを落としてきて解凍して、wordpressの　wp-content/plugins　の中に入れるだけ。

みたいに投稿を書いたら画像がsuper sexyに開きます。
titleに書いた内容は、下にでてきます。
FancyZoomを使いたくない時は、投稿の時に

みたいに　rel=”nozoom”　をつけると普通に画像が開きます。
こんな感じ

fancyzoom