Rsuke Blog

自分用にメモ。
前の職場で使っていた時に、Flashを読み込むときに使っていたけれど、いざ今日使おうと思ったら、どうするのか忘れていたので、メモる。

結局これがなかったので、今日は仕事途中で帰ってきたのね。いかんね。

ここ数週間は友人の結婚式準備が、なぜか忙しくPCに向かっても仕事と関係ないことをしていた。
なので、今回は久しぶりに黙々とjQueryをいじった。

ただ、久しぶりなので、とりあえず簡単なものを。
画像の拡大やらフェードインなど。

成果品

いつものように、犬の画像を使うのは御愛嬌ということで。

これはとんでもないのではないでしょうか。

ie7.js

IE5及びIE6を、IE７に準拠させるスクリプト。

head内に、以下の文章を記述すれば完成。

(xx.xにはバージョン番号を。現在は2.0)

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/1.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

さらに、IE7で対応されていないCSSを追加したい場合は、

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/1.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]-->

↑こちらを使う。

[IE8]を使用している場合は、[IE7]は記述しなくていいとのこと。

まだベータ版なので仕事で使うには考えもんですが、これが完成すれば、

「あ～、またIE6が!!!!」

と叫ぶ必要がなくなるわけです。

なんという開発!!!

足むけて眠れません。

Appleのitunesを見て以来、Macの美しさというか、独創性というか、とりあえずWindowsにはない「新しさ」に触れてからずっとMacに憧れておりましたが、Webで下記のようなものを見つけたので、さっそく自分でも作ってみた。

http://194.95.111.244/~countzero/scripts/_myImageFlow/　（別ウインドウが開きます）

で、できたのがこれ。
http://r-naka.net/imageflow/　（別ウインドウが開きます）
我が家の小太郎（ジャックラッセルテリア・若干太り目）で作成。

おお～、まさにCoverFlow。

作り方は、参考サイトの左上の”Download”から一式を落として、あとは修正。
画像の鏡面仕上げは”reflect.php”で行われる。
今回の画像はpngで作っているけれど、jpgでも可能。png指定の部分をjpgにすればいいみたい（でもどこ？これから探す予定）

写真自体が小さかったので、画像も小さく修正。
写真の大きさ、CoverFlow部分のheightは”imageflow.js”で設定。

写真の大きさは、117行目の
var z = Math.sqrt(10000 + x * x) + 100;
の数字の部分を、適当に入れながら修正。

画像が表示されるdivの部分は、196行目の
imageflow_div.style.height = max_height * 0.6 + 'px';
の数字の部分を変更すれば修正可能。今回は60％の大きさに指定した。

いつも思うけれど、
こういうの修正するのはソースをみればなんとかできるけれど、一から作れと言われたら、到底できない。
できるもんなら作ってみたいのはやまやまやけど…。
つくづく、こういうの作り上げた人には敬服します。

前月のCSSniteで、JSを使ったサイト構築についてのコーナーがあって、その時に

「ページの一番下にfooterを配置させるJavascriptがあればな～」

みたいなことが話に出てたら、その話をしていた人がそれ用のjsファイルを作っていた。


footerをウインドウ下部に固定する


jsファイルをリンク付けて、フッター部分に<id=footer>とidをつければそれで完成ですから。
とても簡単です。素敵です。

http://r-naka.net/footer/js.html/

早速試してみたのが上↑こんなに簡単になるなんて！！


今までは、ずっとCSSでやっていたので、とっても楽！
CSSでやっている時は、いちいち本を見ながらソースを書き、書いてもどこかで間違えているらしく、思っているように表示されないことが多かったので、時間の短縮になります。

でも、個人的には、必死こいてCSSを書いている時が楽しかったのだ。
次はこれで行くか、それとも相変わらずCSSで頑張ってみるか。

ん～、悩むところだ・・・。

実用できるかどうなのかは、ちょっと分からないけれど、面白そうなものを見つけたのでちょっと作ってみた。
マウスを上に持ってくると、上からメニューがドーンと出てきます。
作るといっても、ちょっと素材を作って、CSSをいじくっただけですけど・・・。

作ったのはこれ
http://r-naka.net/menu_dock/index.html
見本はここ
http://2210media.com/dock_menu/

とりあえず、

<div id="hit_area">で、heightを指定すると、topからそのheightまでのところにマウスが動くとメニューが上から下りてくる（ここでは120px）

そしてその下に
<div id="menu_holder">を作って、メニューの高さを決める（58px）。同時に同じ高さをネガティブマージンで指定することによって、ドックが画面の上に隠れるわけですね。う～ん、素晴らしい。

後はその下に<ul></ul>でメニューを記述していけばオッケー（だいぶはしょりました）

ただ問題は、メニューは透過pngを使っているのでIE6では使えないということ。
なので、
[to-R(http://blog.webcreativepark.net/2007/02/01-233315.html)]こと、西岡一馬さんの、alpafilter.jsを使ってIE6でも、透過pngを見れるようにした。
でも、手元にIE6がないので、ちゃんとなっているのかは不明。明日職場で確認しよう。