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

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

配布元：Dynamiclayout.js
ライセンス：CC license

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

設置方法

ダウンロードした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");
}

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