ウィンドウサイズに合わせてCSSを変更できるdynamiclayout.js

Dynamiclayout.jsはウィンドウサイズに合わせて読み込むCSSファイルを変更できるJavaScriptライブラリになります。

dを使用することにより、リキッドイアウトの幅を広げることが可能です。

設置方法

ダウンロードしたdynamiclayout.jsをhead要素などで読み込みます。

<script src="./dynamiclayout.js" type="text/javascript"></script>

ウィンドウ幅に合わせたCSSファイルを用意します。

それぞれのCSSファイルを読み込む際にはtitle属性に

ウィンドウ幅が750pxまでの場合の『thin』
ウィンドウ幅が950pxまでの場合の『wide』
ウィンドウ幅が950pxより大きい場合の『wider』

を付けて読み込みます。

<link rel="alternate stylesheet" type="text/css" href="thin.css" title="thin" />
<link rel="alternate stylesheet" type="text/css" href="wide.css" title="wide" />
<link rel="alternate stylesheet" type="text/css" href="wider.css" title="wider" />

サンプル

リンクによるCSSレイアウトの切り替え

dynamiclayout.jsはリンクによるCSSファイルの切り替えも可能です。

<a href="javascript:void(0)" onclick="changeLayout('thin');">Thin</a>
<a href="javascript:void(0)" onclick="changeLayout('wide');">Wide</a>
<a href="javascript:void(0)" onclick="changeLayout('wider');">Wider</a>

のように記述すれば、thin/wide/widerをリンクで切り替えることができます。

リンクによるCSSレイアウトの切り替えのみを利用する

リンクによるCSSレイアウトの切り替えのみを利用したい場合、ウィンドウサイズによるレイアウトの変更を無効にしたいですね。

dynamiclayout.jsの72行目と73行目をコメントアウトすることにより、ウィンドウサイズによるレイアウトの変更を無効にすることが可能です。

//addEvent(window, 'load', dynamicLayout);
//addEvent(window, 'resize', dynamicLayout);

ウィンドウサイズを変更する

デフォルトですと
0～750pxがthin
750px～950pxがwide
950px～wider
となっておりますが、dynamiclayout.jsの35行目から45行目を変更することによりサイズを変更することが可能です。

//Load Thin CSS Rules
if (browserWidth < 750){
	changeLayout("thin");
}
//Load Wide CSS Rules
if ((browserWidth >= 750) && (browserWidth <= 950)){
	changeLayout("wide");
}
//Load Wider CSS Rules
if (browserWidth > 950){
	changeLayout("wider");
}

これでレイアウトに幅がひろがりますね。

関連エントリー

ページ内に様々なwindowを表示するControl.Modal
プログラムのコードを配色する「google-code-prettify」
LightBox風にコンテンツを表示するModalbox
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript
IEでposition:fixedを再現するFixed positioning
テーブルをソートできるようにするjsライブラリ-table sorting

スポンサードリンク

«Googleの検索結果にSkypeが表示 | メイン | CSS Nite in Osaka vol.7終了»