(つくば:カエル)

2007年09月12日

at 17:39
posted by @
comments(0)

styleswitcher.jsでスタイルシート切り替え

フォントサイズ変更会社のホームページでは左のようにフォントサイズをページのボタンで変更できるようになってます。
prototype.jsを用いたフォントサイズ変更スクリプトを利用して実装しているのですが、今回は別のスクリプトを利用して実装することに。



A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js
前者がフォントサイズのみを変更するモノなら、後者はスタイルシートさえ作れば概観をすべて変えられるモノ。



設置方法はstyleswitcher.jsが結構メジャーみたいなので、色々なサイトで取り上げられているが、私的メモ代わりに記しておく。
styleswitcher.jsはA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsのページ下部、「Download styleswitcher.js」からダウンロードする。

が、悲しいことに、このままではFirefoxで(WinのFirefox バージョン2.0.0.6で確認)エラーが出るので一部を修正。

[4行目]
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

[変更]
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

[14行目]
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");

[変更]
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");

[22行目]
if(a.getAttribute("rel").indexOf("style") != -1

[変更]
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1


ウンともスンとも言わなかったstyleswitcher.jsがFirefoxで動きますピース

参考:7-1:フォントサイズをユーザ側で切り替え
本当に、ありがとうデンマークの人!!



次にHTMLの<head></head>内に以下を追加。
<script src="styleswitcher.js" type="text/javascript"></script>


スタイルシートはHTMLの<head></head>内に以下のように追加。
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="alternate stylesheet" type="text/css" href="css/font/small.css" title="Small" />

1行目がデフォルトで読み込むスタイルシート。
2行目が切り替えるスタイルシート。
切り替えるスタイルシートを増やす場合は2行目をコピーで。


切り替えのボタンはa要素にonclickイベントで実現。
<a href="#" onclick="setActiveStyleSheet('Small'); return false;" onkeypress="setActiveStyleSheet('Small'); return false;">小</a>


Small」は任意の同じ文字列にする。


同じカテゴリー(XHTML+CSS)の記事画像
IEでiframeのボーダーが消えない
Firefoxで携帯サイトをシミュレートするアドオン
IEで画像の下に意図しないマージン(余白)が出る
Windows版Safariでテキストエリアのリサイズが可能
IE6でネガティブマージンを指定した画像
テーブル右端のwidth指定
同じカテゴリー(XHTML+CSS)の記事
 IEでiframeのボーダーが消えない (2009-07-17 21:00)
 スタイルシートでボックスを中央に配置 (2009-07-07 21:00)
 スタイルシートでボックスを画面中央に配置 (2009-05-19 21:00)
 Firefoxで携帯サイトをシミュレートするアドオン (2008-10-31 15:44)
 IEで画像の下に意図しないマージン(余白)が出る (2008-10-09 11:30)
 JavaScriptがいらないGoogleマップ API (2008-06-02 12:15)


(つくば:カエル)

comments form

名前:
メール:
URL:
コメント: