2012.06.11

jQueryといふものをしてみむとてするなり

サイト制作の復習です。
先日、サイトを引っ越しまして、旧サイトへのアクセスを新サイトへ転送しております。
niftyのフリースペースでは.htaccessが使えない為、301リダイレクトで転送できません。苦し紛れにmetaのrefresh 0秒を使用しています。

Firefoxだと自動転送ブロックでサイト移転のお知らせが見えます。しかし、Safariなどは意図した挙動とはいえ、有無を言わさず0秒で転送されるので、ビジターに不安を与えかねません。
移転の案内を読める時間をとった3秒後に転送とかが一番親切だと個人的には思いますが、今後のビジターの為にも検索エンジン対策でいちおう0秒転送で301的にもしたいものです。
 (refreshの場合、0秒で301扱いという情報も見ましたが、Googleはスパム扱いするという情報もあり、根本的な検索エンジン対策にはなっていません。.htaccessが使えなくては他に手は無いしなぁー PHP? 敷居が高すぎますw)
そこで、新サイトにフローティングウィンドウで「移転のお知らせ」を表示して、ビジターに悪質な誘導ではないことを案内することにしました。
最近、プラグインを利用して興味を持ったcssが出来れば敷居がちょっとばかり低いというjQueryを学習してみむ。

近頃、勉強の為にこのご本(旧版)を買いました。
改訂新版がでました!:最新のJquery1.9とHTML5に対応。価格もお安くなってます。
jQueryがまったく手探り状態でも基礎から学べました。これ一冊実践したらjQuery結構使えるようになるんじゃないかな。と期待しています。
ただ、jQueryを使う上でのjavascriptのこれは覚えとけという解説がもうちょっとあればなぁ。それを言っては欲張りなんだけども。きっと本がもう一冊書けちゃうボリュームになってしまうんだろうな。
javascriptの何が知りたいのかのとっかかりになるので、そこから発展して学習するのもいいかもしれない。
こちらの本の中にもフローティングウィンドウの実例があり、すごいのがWebで全文読めるということ。でも、ゴロゴロしたりしながら読める書籍はやっぱりいいです。jQueryの概要はだいたい掴めたような…。自分で1からというのはまだまだですが。

しかし…『Web制作の現場で使う jQueryデザイン入門』の作例はドラッグできるとか高性能すぎます。そんなに凄いのじゃなくていいんです…。
ただ元サイトから飛ばされてきた時、出来れば真ん中くらいにウィンドウがあって、閉じられさえすればいいという。

こんなん、書いて見ました。合ってんのかなぁ。動いているけど…突っ込みお待ちしてます。
そしてIE方面はガン無視してます。すみません。最近IE対策のなにもかも面倒になってきた。
さわやかサンプル
move_shot

<div id="floatWindow">は<body>直下に置く。

css、scriptは適宜外部ファイルに。
position使いすぎなページのためのz-indexなど、必要の無いものは端折ってます。
当サイトでは画像を使いaltで文字を入れていますのもここでは端折っています。
重要なのはcssの #floatWindow{display: none; }
この指定で非表示にしてある#floatWindowをjQueryの.fadeInという命令で操るらしい。

まず、旧サイトからのアクセスだけを振り分けたい。
if(document.referrer.indexOf("gonz")!=-1)
リファラに旧サイトのアドレスの一部、”gonz”の文字列が無いときは-1の値が返る。!=は「等しくない」
gonzは無い(-1)と等しくない。つまり、gonzがあるよという場合(if) は命令を実行するよ。

ウィンドウを開くんだけど横位置真ん中に開きたいなぁ。
var winW = $(window).width(); ブラウザのウィンドウサイズを収得して変数(winW)を宣言。
$("#floatWindow").css(‘left‘, winW/2-$("#floatWindow").width()/2)で
#floatWindowのcssにleftプロパティ
計算式「winWブラウザウィンドウ幅÷2-フロートウィンドウ幅÷2」で求められた値が追加され、水平方向真ん中に位置指定。
.fadeIn("fast") でフェードインのアニメーションをしつつ表示(開く)

もちろん閉じるボタンで閉じられないと。
$("#floatWindow a.close").click(function(){
#floatWindowの中のaクラスcloseをクリックした時
$("#floatWindow").fadeOut("fast");
return false;
#floatWindowをフェードアウトのアニメーションしつつ非表示に(閉じる)。と。
return false;は<a>の時はお約束だよ。

div#floatWindowの中身はdlじゃなくても何でも。最初に『Web制作の現場で使う jQueryデザイン入門』見て忠実にやってみた名残だったり。
今回は、script意外の所の凡ミスでかなり苦労しました。<body>直下のdivでないと動かないというのに、どっかのdivの閉じタグが一個足らんかったという…子要素判定となっておりました。
SafariのWEB インスペクタがなければ発見できなす。
さて、次は何をしてみましょうかね。

コメントをどうぞ



PageTop