Float Layerアーカイブ: MSF-NET

ぐい～んとスクロール

　ページのトップへ移動する方法で、今まで使っていた「Float Layer」を各ブラウザでも動くタイプのものに変更しました。以前のは内部処理がとても多かったのですが、今回利用したスクリプトの中身はとても単純化されているものなので、IE、FireFox、Safari以外で動く保証がありません。動き方は以前の物とほぼ同じです。

導入方法の手順
　まず必要なファイルを下記より右クリック保存してください。

common.js

　スクリプトはFTPで転送し、HTMLのヘッダーなどへJavaScriptを読み込ませる記述を書きます。

<script type="text/javascript" src="http://～サイトパス/common.js"></script>

　「～サイトパス」はcommon.jsを置いた場所を指定してください。
　後はページ内のリンク部分に

<a href="javascript:void(0)" onclick="pageup();return false;" onkeypress="pageup();return false;">PageTop</a>

　等と a タグでスクリプトを呼び出す指定をしてあげるだけです。

更に、上級者編。
　common.jsの中身をテキストエディタで開くと、一番上に「表示位置固定」という項目があります。14、15行目と23、24行目の式の値を変えると、常に画面内の固定された位置に表示させる事が出来ます。式そのものは単純なので、理解出来る人が見ればすぐにわかると思います。「Float Layer」でも使っていた式と同じですね。この機能を使う場合のHTMLは

<div id="pageup">
<a href="javascript:void(0)" onclick="pageup();return false;" onkeypress="pageup();return false;">PageTop</a>
</div>

　などをページ内に記述します。img タグで画像にしたり、スタイルシートなども併用出来ます。ブログのようなものには body タグそのものに横幅の指定がある場合うまく動かないかもしれませんので、記述する位置に気を付けて下さい。

　41行目の

move = position / 10;

　の「10」の値を変更することで、スクロールのスピードが変わります。大きくすれば動きがゆっくりになります。

　不具合があれば教えてください。
　これに伴い、各記事の右下にある[PageTop]のリンク変更、サイト一番下の帯（フッター部分）への適応と矢印アイコンを追加しました。

※Safariではちゃんと動かないようです・・・。
※Safariで動くように改良しました。（追記:2008/09/10）

続きを読む ≫

Category : TOP > 日記 > ブログ制作 > Float Layer

Float Layerでぐぃ～んと！

頂いてばかりなので、僕からも提供させていただきます～。
旧MSF-NETで採用していたページのトップへ戻る為の矢印の付け方です。
ブログのように縦長になって行く時には便利です。

このJavaScriptはパクってますが、少しだけ改良加えてあります...
元ソースはたしかニコンのサイトだったかな。
しかも、古いので、OperaやFireFoxではどう動くか謎です～ｗ

でわ、解説行きます～。まず下記のファイルをダウンロードして、ローカルへアップロードして下さい。
~~jumpToAnchor.js~~
~~lib.js~~
~~layer.js~~
~~arrow.gif~~

とりあえず動くようにしましょう。
テンプレートの <head> ～ </head>の間に

<script type="text/javascript" src="<$MTBlogURL$>lib.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>jumpToAnchor.js"></script>
<script language="JavaScript" src="<$MTBlogURL$>layer.js"></script>

と追加します。
</head>タグのすぐ下にある<body>タグ内に「onLoad="start()"」文を追加します。

<body onLoad="start()" class="layout-three-column">

小粋空間さんの３カラムレイアウトを使用している人はこんな感じかな。

次に下記の文をbodyタグ内のレイアウトに影響しない場所などに追加します。
レイヤータグなので、</body>　タグの前とかで構わないです。

<div id="floatLayer" style="position:absolute;height:0px;width:0px;left:0px;top:0px;z-index:100">
<a href="#pagetop" onclick="jumpToPageTop();return false;" onkeypress="jumpToPageTop();return false;">
<img src="<$MTBlogURL$>arrow.gif" border="0" width="14" height="14" alt="トップへ"></a>
</div>

これで矢印が出て動くようになります。

次に、この矢印を出現させる位置を決めなくてはなりません。
layer.jsをエディタで開いて、84、85行目と89、90行目が位置を決める計算式です。
計算の基準値がブラウザのウィンドウ右下が原点になっていることを頭に置いてください。

IE4についての計算式を参考に見ていきます。

pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;

この状態が原点です。

このとき、「document.body.clientWidth」にはウィンドウサイズが入ります。
ブラウザなんて誰もが違ったウィンドウサイズで見ていますよね？
だから、ここは見ている人によって変化します。

右下に表示ならピクセルで位置を指定します。

pageWidth = document.body.clientWidth -22;
pageHeight = document.body.clientHeight -22;

ウィンドウサイズの常に右下 X軸 -22 Y軸-22の位置に矢印が居座ります。

さて、サイトの中身を画面中央に表示させている場合は、まず自分のサイトの横幅を知りましょう。
小粋空間さんの３カラムレイアウトは、スタイルシートを例にするならば、

.layout-three-column #box {
width: 850px;

この部分がそうですね。てなわけで、うちは850px。

pageWidth = (document.body.clientWidth - 850)/2+828;
pageHeight = document.body.clientHeight - 22;

常に決まった位置に置く場合はこんな計算式になります。
ウィンドウ全体幅からサイト中身の幅を引いて２で割り...
まあ、説明しなくてもわかりますよねｗｗｗ

layer.jsを何度も1px単位で微調整するコトになるかもしれませんが、
がんばってくださ～い。

※他にレイヤータグを使っている場合は使えないコトがあります。
※FireFoxではちゃんとした位置に表示されない様です。
※現在は違うスクリプトを利用しています。(追記:2008/09/03)

Category : TOP > 日記 > ブログ制作 > Float Layer