「coordinate」って、座標なんすね。

coordinateって、「座標」ということなんすね。
非英語圏の人間でプログラミングを覚えようとなると、まず英語が壁だな。あいかわらず。

以下、本家チュートリアルで、座標について。
http://processing.org/learning/basics/coordinates.html

：：：：：：：：：：：：：：：：：：：：：：：：：

で、width,heightが便利な様子。
ウインドウサイズを格納してくれている様子。
こりゃ便利。

http://processing.org/learning/basics/widthheight.html

processingって、かなり親切だな。

processingの基本？（setup()とdraw())

processingメモです。

setup()という関数は、ウインドウが開かれると同時に実行されるもの。
draw()という関数は、プログラムが終了するまで、シーケンスごとに読み込まれ実行されるもの。

setup()とdraw()が基本のようですね。

本家サイトチュートリアル参照ページ
http://processing.org/learning/basics/setupdraw.html

あ、「void」の宣言が必須の様子。
void setup()やvoid draw()といったように。
PHPとjavascriptがちょろちょろ書ける程度の自分には、何度か忘れそうな仕様です。覚えるべし。
でも、PHP並みに導入が楽な感じですね。processing。ありがたや。。

：：：：：：：：：：：：：：：：：：：：：：：：：
でnoLoop()をsetup()の中に仕込むと、一回しか描画しないそう。
なるほど。

http://processing.org/learning/basics/noloop.html

更にloop()でループが復活する様子。
なるほど。
http://processing.org/learning/basics/loop.html

チュートリアル、親切だな、こりゃ。

：：：：：：：：：：：：：：：：：：：：：：：：：

更に、redraw()でループではなく、再描画も可能。
シーケンスを一コマ進めてくれる。
http://processing.org/learning/basics/redraw.html

なるほど。

processing,いい感じ。

processing.jsに興味があったが、まともに学び始めようと思う。
http://processingjs.org/
色々使えそう。

Flashにもプラグインがあるし、その他汎用性が高そうなので、覚えておいて損は無い。

本家はこちら。元々JAVA向けに書かれたものだそう。
http://processing.org/

これからのHTML5時代、canvasにprocessingが使えると、かなり表現力が得られそうだ。

loopedsliderを使って、スライド表示（clear:both;ではまった。。）

jQueryのライブラリである、「loopedslider」を使ってみた。
とても良い感じのライブラリで、画像や文章などのコンテンツが，ループしてスライド表示される。

これをとあるサイトのサイドバーに配置してみると。。。
カラム落ちしてる～～

width→paddingなどを色々チェックして、変えて見るも，全然ダメ。
カラム落ちが直らない。

えらく悩んで、
ふと、「これって、floatをclearしてね？！」と思い、
cssをよく見てみると、
やはり「clear:both;」が指定されていた。

clear:bothしてりゃ、落ちますわね。

無事解決して，嬉しかったのでした。

透過PNG対策js

http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/

にDD_belatedPNGというプラグインがIE6の透過PNG対策にとてもいいと書いてあって,導入。
http://dillerdesign.wordpress.com/　（配布元はこちら。MITライセンス！）

とても良い感じに透過してくれました。
ありがたや。

ime onでkeyCode(charCode）を取得しようとして，今のところ挫折

Google siteで、ページ名を日本語入力すると、
ローマ字に変換されたURLが出力される。

javascriptでやっているのだろうと予測するのだが、
同じようにkeypressやkeyupなどでkeycodeを取得しようとするも、
IMEがonなら、229というキーコードが返ってくるばかり。

wordpressやconcrete5で、日本語によるページ名入力時に、
慣れていない編集者のため、アルファベットかを自動化させたいのだが、
うまくいかないなあ。。

google siteのjsソースを見たが、難読化されていて、実に難しい。
困ったな。。

slice(0,-1)で最期の一文字を消去

slice()で文字列を切り取れる。

slice(0,-1)は最期の一文字切り取り。
便利。

html()は、タグの中身を取得する関数（jQuery）

html()を使えば、タグの中身の文字列を取得できる。
便利。


<div id="test">
testです</div>

でvar str=$("#test").html();
とすれば、strのなかに「testです」という文字列を格納できる。
ありがたい。

ついでに、html()は、あるタグ内に文字列を追加も出来る。

タグ内の文字列取得と追加が出来るのは、実にありがたい。

location.href はすぐ飛ばない

location.href =を使って、ジャンプさせるスクリプトを書いているのに、
ちゃんと飛んでくれずしばし悩みました。

どうもlocation.href は、二行書いたら、後の方を実行する様子。

PHPの    header("Location:$place");などはさっさと飛んでくれるので、
同じ要領かと勘違いしました。
（もしかして、PHPのheader("Location:")も一緒かな。。）

条件分岐の記述が甘かったので、これから気をつけなくては。。

jQueryによるidの取得

classを同じくしたいくつものブロックの中から、
クリックされたもののid名を取得したいと思い、
調べてやってみたら出来たのでメモです。
$(".clickable").click(function(){
    #(this).attr("id");
 });
でOKでした。

attrで取得するんですね。

ちなみに、そのブロックの背景色を取得するには、同様に
#(this).css("background-color");　　（前後省略した記述です）
でいけました。

jQueryってほんっとに便利です。
感謝感謝。。

ページ移動

jsでページ移動させたくて、どうすればいいか調べて、以下のページがとても役立ったのでメモです。

http://www.sasaraan.net/program/js/jspage.html

location.href="";で簡単に飛べるんですね。
便利。。

substr（文字取得）メモ

substrで指定文字を取得する場合、

substr(3,5);とした場合、

4文字目(=3)から6文字目(=5)まで取得できるのでなく、
4文字目から5文字取得することになるのですね。

4文字目から3文字取得したいなら、
substr(3,3);
でした。。

cookie使用準備メモ。

jQueryのcookie.jsでcookie機能を実装しようと思うので、準備メモです。

http://plugins.jquery.com/project/cookie

http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
http://blog.caraldo.net/2009/03/jqcookiemenu.php

以下が実装方法の引用メモです。（開発元ドキュメントより）

$.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future
$.cookie('the_cookie', '', { expires: -1 }); // delete cookie

ちなみに、cookieの削除は、
$.cookie('the_cookie', null); // delete cookie
でも良くしたということです。
「その方が直感的だから」という要望に応えて。

footerの高さをページに合わせて一番下に配置するコードメモ

footerを画面一番下に配置したいと思い、
min-heightをつかって、さらにIE6対策に、height:auto !important;height:~px;とやるのが面倒だし、「jQueryでやっちゃえ」と思ってできたのでメモです。

#footer(例:35px)を画面の高さに合わせてページの一番下に配置するjQueryコード。

    var docHeight=$(document).height();//ドキュメントの高さ取得
//ドキュメントの高さが、ページの高さと同じなら、footer分の高さを引き、そうでなければそのまま。（三項演算子って便利）
   var footerHeight=docHeight==$(window).height()?docHeight-35:docHeight;
   $("#footer").css({position:"absolute",top:footerHeight});//直接jQueryで position:absoluteにしてしまい、topからの高さを指定。 

Google AJAX Feed APIでブログFeedを表示でけた。ありがたや。

javascriptで外部ブログのRSSフィードを表示させたいと思い、Google AJAX Feed APIが良さそうで、実験し、うまくいったのでメモです。

以下のサイトに詳しく書いてありました。ありがたや。
http://h2ham.seesaa.net/article/100840896.html

以下の本家サイトで、自分のサイトURLを入力してAPIキーを取得し、
http://code.google.com/apis/ajaxfeeds/
ソースコードにそのキーを入力。

そのコードを貼り付けたら、なんとすぐ表示されました。
「クロスドメイン対策」が必須だと思っていて気が重かったのですが、
スーパー簡単でした！

ありがたや。。。。。。 

bind,unbind(jQuery)

ある要素にbindしたクリックと実行されるfunctionを、指定回数以上のクリックがあれば取り除きたくて，いろいろやってやっとできたのでメモ。

 var num=0;
 $(".Click").bind("click.one",function()  
{$("#some").show().delay(4000).fadeOut(500);num++;
if(num>4){$(".Click").unbind("click.one");}});

これをbindの外で
 if(num>4){$(".Click").unbind("click.one");}
とかやっても反応が無いのが，自分にはまだ理由が分からない。

とりあえず、bind内で処理を書いたらうまくいったので，まあ良かったが。

追記：click.oneのようなnamespace(名前空間）をつけてやると、指定制御しやすくて便利。

モーダルフォーム実装のための学習メモ

モーダルダイアログボックスをつくりたいので、メモです。

これ、いい感じです。日本の方ですね。
http://blog.amunsnet.com/archives/2009/07/21223401.html

jQueryのUIにすでにあるんですね。http://jsajax.com/Articles/jQueryUIDialogModalForm/1275

ColorPicker.js(jQuery)の実装メモ

jQueryプラグインのColorPicker.jsを、開発者のサイトを見て、ちょっとカスタマイズしたのでメモです。
http://www.eyecon.ro/colorpicker/#about

リアルタイムに変更中の色や16進数の6ケタ数字が表示されるのがナイスです。

    $("#select_color").ColorPicker({
        color : $("#select_color").css("background"),
        onChange : function( hsb, hex, rgb ){
//span要素に■を入れ、色をリアルタイム変更。
            $("#color_test").css({color:"#"+ hex});
           $("#select_color").val("#"+hex);//#入りで16進数をリアルタイム表示
       },
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val("#"+hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);   
    });

フリーの日本地図データ

無料で、商用利用も可能な日本地図の白地図データがあったのでリンクメモです。

http://www.freemap.jp/japan/ja_kouiki_japan_big_scale_3.html

illustratorで各都道府県をオブジェクト化し、svg形式にして使えば、
Raphaelでいけそう。


http://www.freemap.jp/about_use_map.html
に商用利用も、使用許諾が必要ない旨も書いてあります。

素晴らしい。。

（無料版は、各都道府県の境目処理が簡易的なので、その作業は必要そうですね。。それにしてもありがたい。）

processing.js

Raphaelを最近習得中だが、
proccessing.jsもやはり素晴らしい感じ。
http://processingjs.org/

これから、proccessing.jsも学習しよう。。

SlidingGallery.jsの実装メモ（jQuery）

SlidingGallery（http://www.meadmiracle.com/SlidingGallery.aspx）
を実装した際の躓きをメモ。 

■class="start"をimgの内一つに書かないと、スライドが始まらない。
■"portrait"(横向き画像）の宣言はclass="portrait"ではなくlayout="portrait" !!(これでしばし悩んだ。。）

■あと、躓きではないが、
$('div.gallery img')
.slidingGallery({ container: $('div.gallery'),
'slideSpeed':'slow',
'Pshrink':shrinkFunc,'Lshrink':shrinkFunc,
'Pzoom':zoomFunc,'Lzoom':zoomFunc });
のように、オプションを色々書ける。
 面白や。

shrinkFunk,zoomFuncの変数は、先に宣言。(本家サイト参考。）
        var zoomFunc = function(dimension) {
            return dimension * 1.5;
        }
        var shrinkFunc = function(dimension) {
            return dimension * 0.5;
        }

containarオプション選択時は、
div.gallery{top:100px; left:0px; width:900px; height:500px;z-index:1000;}
みたいなことを適当に書くべし。

以上です。

(function(){ }(); にてこずった。

あるソースを見て、

var arg=something;

(function(A){
  処理;
})(arg);

みたいな書式はいったいなんだろう？としばし悩みました。

無名関数、というものの処理法の一つのようですね。

で、argをAに引数として渡し、処理を開始する、という感じなんですね。。

まだ理解が中途半端ですが、メモです。

javascriptの簡易的な書式、慣れると早くて便利でしょうが、最初は良く分からなくて困りますね。

マウス位置の取得と、動的表示。

jQueryで以下のようにすると、マウス位置を取得できて便利でした。
(http://api.jquery.com/mousemove/ 参照)

       $(function(){
            $("#canvas").mousemove(function(e){
            X=e.clientX;
            Y=e.clientY;
            });
        });

ラファエル上で取得した位置をグローバル変数で受け取り、以下のように使うと、動的に地図の場所名などが表示できて便利です。
        $("#"+state).css({display:"block",left:X,top:Y});

ラファエルの地図と同時に使っています。

Raphaelでクリッカブルマップ、やっと実装。

Raphaelで地図をクリッカブルにしようと思い、IE対策で苦労していた。
最終的に以下のフォーラム投稿が参考になったので、メモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/b2f6afcb16d06bbd/a2a1d338301f26c2?lnk=gst&q=map#a2a1d338301f26c2

st[0].onmouseup = function() {
      alert("");

};

のようにしてonmouseupで処理し、その中に実行したい関数を書けばOKだった。

(要するに、IEにおいては、attachEventしてのonclickやjQueryのclickでは、(on)mouseover ,mouseoutなどと並列処理ができなかったため、onmousedownかonmouseupにした、というわけです。）

SVGの解説サイト（英語）メモ。

SVGに関する分かりやすい解説（英語）があったので、メモ。

http://www.svgbasics.com/index.html

IE9でやっとIEもまともなSVG対応をしていくようなので、
これからがSVGの本番でしょうか。。

RaphaelとGoogle map APIの融合ライブラリ（cartgrapher.js)

Raphaelをベースにし、Google map APIを使用して、
エリアごとの人口分布地図や、
ツイッターユーザーの分布などを表示させる、といったことができるライブラリが公開されていた。

http://cartographer.visualmotive.com/

すごい。

jQueryのフォント装飾ライブラリ

http://www.iofo.it/jquery/fonteffect/

jQueryに、font-effectというフォントの装飾ライブラリがありました。
素晴らしい。。

フォント装飾に色々使えそうです。
ドロップシャドウや、グラデーション（gradient）など、リアルタイムで反映されるのがすごい。
a:hoverの疑似要素などにつかったらいいかも。。

前から「できたらいいなあ」と思ってたら、
やっぱ、あったんすね。

ありがたや。。

■追記
コメントの最後に「もうすぐ次のバージョンを出すから、今はコメントできなくしています」とありました。
もうすぐ次のバージョンが出るんですね。2010，6，10記す

角丸ライブラリ（liquid-canvas）、良さそう。

http://www.ruzee.com/content/liquid-canvas

これまでjQueryのcorner.jsという角丸ライブラリを使ってきましたが、
上記のliquid-canvasというライブラリはかなり良さそうで、使ってみたくなりました。

グラデーションがいい感じで使えるのが良さそうです。

IE6,7では、
$(document).ready()より
$(window).onload()の方が良いそうです。

jQueryのgoogle mapライブラリ

Google mapの案件があるので、jQueryで実装してみようと思い、検索。
ありました。
http://gmap.nurtext.de/documentation.html

Google map API keyを取得する必要があり、
sensor=trueかsensor=falseに変更する必要がありました。（それをしていないくて、はじめひっかかった。。）

で、適当に

みたいなブロックを作って、そのwidth,heightをcssで設定してやり、

headの中のjQueryコードに、
$("#gmap").gMap();
及び、緯度経度その他のオプションを書くとOKに。

ありがたいことで。。

RaphaelとjQueryの併用メモ

jQueryとRaphaelを併用したかったので、やり方を探していて、載っていたのでメモ。

http://groups.google.com/group/raphaeljs/browse_thread/thread/5d1afd18d3670d53/ca94967a53dc41c9?lnk=gst&q=jQuery#ca94967a53dc41c9

$(window).load(function() {
  // put your Raphaël draw code here

}); 

と記述すれば動く、というのでやってみたら動いた。

jQueryのDOM操作で、Raphaelが動かせるのはとてもありがたい。

画像回転プラグイン（jQuery＋CSS3）

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

CSS3を併用して、jQueryで画像回転をさせるプラグインがありましたのでメモ。
画像回転をさせたかったので、実装してみます。。

Galleriaでfadeslide:trueにしたら、画像の位置がずれた。。

現在、原因を調査中です。
transition:fadeslideにしなければ、場所は大丈夫なのですが、なぜかfadeslideにするとずれます。。
左に。

困った。
いい動きをしてくれるのですが。

■追記　Firebugで見たところ、fadeslideを使わないと、position:relative;で自動的にleftの値を追加していますが、fadeslideにしたら、leftの値が常に0になっています。Firefoxで。
他のブラウザはどうかな。。
■追記２　IE8も同様だ。。

■追記３：非圧縮版のfadeslideを定義している場所を以下のようにしたら、一応大丈夫になりました。
        var widthnext = (params.next.width>350)?120:300;
を追加。


そして、params.nextの部分（スライドインして現れる処理部分）を以下のように変更。
        jQuery(params.next).css({
            left: width* ( params.rewind ? -1 : 1 ),
            opacity: 0
        }).animate({
            opacity: 1,
            left:widthnext* ( params.rewind ? -1 : 1 )
        }, {　以下略

消える部分は、スライド処理がイマイチ難しいので、
          jQuery(params.prev).css({
                opacity: 1
              //  left: 0 * ( params.rewind ? 1 : -1 )
            }).animate({
                opacity: 0
                //left:  width* ( params.rewind ? 1 : -1 )
            },{
とコメントアウトして、フェードアウトさせるようにしました。

とりあえずこれで、幅の長い画像、短い画像、両方がちゃんとだいたい中央にスライドインしてくれるようになり満足です。
ちなみに、画像の幅は300と670ぐらいの二種類、
ギャラリーの幅は900ぐらいです。pxで。

メモでした。

Raphaelでクリッカブルマップの参考になるサイト。

Raphaelを使ってクリッカブルマップを作ろうと思っていますが、
思っている通りのことを実現しているサイトがあったのでリンクメモです。
http://freejoblistings.ca/
（■追記：jsのソースを見ると、あまりに詳細で難解なので、現時点では無理だと判明。。
すごいな。）

以下のフォーラムで作者の人がクリッカブルなマップについて何か書いてるのでメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/d59a01dcd3c8130d?lnk=gst&q=freejoblistings#d59a01dcd3c8130d

liveでRaphaelを触って学べるサイト

raphael_liveというページがありました。
コードを書きかえると、すぐその場で実行でき、Raphaelが効率的に学べそうです。
http://craic.com/tutorials/javascript/raphael_live/raphael_live.html

Flashにおけるwonderflみたいな感じですね。
簡易的な。

素晴らしい。

Raphaelでelementにmethodを適用させる方法メモ。

Raphaelで、あるelementにメソッドを適用する方法のメモです。

Raphael.el.red = function () {
    this.attr({fill: "#f00"});
};

というように、elなどで表したものをthisでattrを適用させる、
といったように宣言しておき、

paper.circle(100, 100, 20).red();

あとは普通にelのところに、オブジェクトを書くだけ。

解説は以下にありました。
http://raphaeljs.com/reference.html#plugins-elements

とあるプラグインのソースの意味が分からないので学習中。。。

getColor()はスペクトラム上の次の色を返すらしい。

raphaelでgetColor()は、スペクトラム上で次の色をオブジェクトに返す機能らしい。
便利だ。


http://raphaeljs.com/reference.html#getcolor

SVGの書き方（描き方）を勉強してみた。

SVGでのラインの書き方が、W3Cのサイトに載っていた。
面白い。

http://www.w3.org/TR/SVG/paths.html#PathData

基本的に大文字と小文字は、絶対位置と相対位置の違いの様子。

Mで始点に移動。
Zが終点。

Lが線を引く。（あるパスのソースを見ていて、小文字の「l」が「|（パイプ）」に見えており、「パイプって何を意味する記号だろう。。。」と悩んでいた。。小文字のエルだった。。。）

Hがhorizontal lineすなわち水平線（横線）。
Vが垂直線。vertical line

Cがちょっとややこしいが、ベジェ曲線。Mで始点を指定し、Cでコントロールポイント（イラレでおなじみ）の位置を指定、その次のx,y座標でもう一つのコントロールポイントを指定。そして最後のx,y座標で終点を指定。その四点で、曲線が描ける。
面白い。

Sはちょっと難しくて、まだよく分かりません。どうも、先のCの二つのコントロールポイントの位置関係を反映するようで、新しくコントロールポイントを一つ指定し、終点を指定してやれば、二つ目のコントロールポイントは、先にCで指定した二つのコントロールポイントの位置関係を反映してくれる様子。（くどい書き方ですね。。）

Qは、quadradでコントロールポイント一つと、始点終点で良い様子。こっちの方が分かりやすそう。
Tは、コントロールポイントが、やはり中間地点を軸に反転したものとして反映され、終点を書けばOKという、ショートハンド（省略）記述の様子。

なるほど。

解説PDFもあった。
http://tutorial.jp/graph/svg/svgman.pdf

■以下、Raphaelで地図のSVGスケールを変えるために、本家フォーラムの関連ディスカッションURIをメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/e1a3889a37dfeac3/e42fb35ad07fe528?lnk=gst&q=map#e42fb35ad07fe528

以下は、マップ上のオブジェクトをダブルクリックして、ajaxで他のファイルを読み込み表示させるためのメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/171a2adf124e4e05?lnk=gst&q=map#171a2adf124e4e05

ナビゲーションプラグイン（アニメ）

ナビゲーションでいい具合に変化するものをjQueryで探していて、
かなり気に入ったものがあったので、メモです。

jQuery background position（プラグイン）
http://snook.ca/archives/javascript/jquery-bg-image-animations/
http://snook.ca/technical/jquery-bg/（demo)

animated-navigation
http://www.tyssendesign.com.au/articles/animated-navigation-items-using-jquery/
http://www.tyssendesign.com.au/examples/animated-nav.htm(demo)

jQueryで、時間差関数実行ライブラリ

jQueryを使って、時間差で、複数の処理を段々実行することができないかと思い、
探していたら、いいものが公開されていました。

http://developmentor.lrlab.to/postal/jquery/jquery.delay.html

素晴らしい。
思っていた通りのものです。
これから実装なり。

jQueryでコールバック関数を直接書く時のメモ

jQueryのコールバック関数を直接書く方法のメモです。

jQueryでコールバック関数を直接書くときは、
$("#main").fadeIn(1000,function(){$("#sub").fadeIn(1000)});
のように、
function()を、指定の引数番目に書き、
{}中かっこのデリミタの中に、新しく選択要素とイベント処理を書く。

かっこ、中かっこの入れ子で間違えがちなので注意。

fadeIn(),fadeOut()などは第二引数に書き、
animate()は第四引数に書く。（演出を指定しない場合は、第三）

追記：「コールバック」って、「call back」すなわち「電話をかけ直す」「呼びもどす」みたいな英語だから、 一度ある関数で何かの処理をして、また別の関数を呼んで処理をさせる、という意味ですね。どうも「コールバック関数」という言葉の意味がつかみにくかったのですが、やっとイメージが掴めました。

英語環境にいるかいないかで、プログラミング関連の初期習得にはけっこう差があるんだろうな、と良く思います。

$(this)はかっこで囲む

jQueryで要素自身を選択する時は、$(this)とかっこで囲む。
 普通に他のDOM要素選択の時のように。
メモです。

opacityのクロスブラウザ対策

filter: alpha(opacity=50);

のように書けば、IEもOK.。

まあまあ他は、opacity:0.5;とかで良さそうかな。

JS自体の話題じゃないすが、jsでの記述に関連していたので、メモです。 

jQueryのfadeOutの挙動が面白い。

jQueryのfadeOutで面白い現象が起きたのでメモです。
（fadeOutを指定していない要素まで一緒に消えてしまうバグ？）

例えば#main,#subという二つのブロック要素を用意し、
#mainをjQueryで $("#main").fadeOut(3000);などと設定し、
#subをcssで予め、position:relative;にして、
left top;と指定し、
 $("#sub").animate({left:"100px",top:"100px"},1000);
とか指定します。

するとブラウザで確認すれば、fadeOutを指定してない#subまで一緒にfadeOutしてしまうではないですか(笑)

どうも、
.animateで({top:"100px"},1000);
と上の要素に連動しているから、影響を受けるようですね。

ちょっと楽しい。

このtopを指定しなければいいかと消したら、
上の#main要素が消えた後に、「ガコッ」と下の#sub要素が上がってしまう、という現象に変わりました(笑)。
ま、これは当然の挙動ですね。
上のブロックが消えるわけですから。

jQuery、奥が深いです。
たのしや。

透過PNG実装。（Unitpngfix.js）

透過PNGをIE6でも実装するjsを色々あたってみて、Unitpngfix.jsがかなり気に入りました。
http://labs.unitinteractive.com/unitpngfix.php

clear.gifという透過GIFファイルを一枚読み込んで、
<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js">
<![endif]-->
とインクルードするだけ。

png24でも、CSSでのbackground画像でもきれいに透過表示してくれます。
ほんとうに手軽でびっくり。
ありがたや。。
（でもbackground-positionについてはまだこれからとのこと。確かにIE6では背景を繰り返すと表示が崩れたりするようです。ああ、IE6。。。）

galleryを作る必要があるのでメモ。

jQueryで良さそうなギャラリーのメモをいくつか。

gallaria
http://galleria.aino.se/
定番。とてもいい感じです。

smooth div scroll
http://www.maaki.com/thomas/SmoothDivScroll/#quickdemo
いい感じでスクロールしてくれますね。

sliding gallery
http://www.meadmiracle.com/SlidingGalleryDemo1.htm (デモ）
http://www.meadmiracle.com/SlidingGallery.aspx
中心をクリックすると大きくなり、横の画像をクリックすると新しい画像が立体的に迫ってでてくる感じがいいです。



s3Slider
http://www.serie3.info/s3slider/demonstration.html(デモ）
http://www.serie3.info/s3slider/
フェードイン、フェードアウトで画像が移り変わり、これまたいい感じです。

pikachoose
http://pikachoose.com/demo/(デモ）
イメージキャラが某超有名キャラのパクリなのが微妙ですが…
これも定番的なギャラリーとして使えそうです。
で、実装方法のページ。

そして、全てのネタ元は、以下のサイトです。お世話になりましたm(_ _)m
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

■以下、もうひとつとてもいい感じのものを見つけたので、追加。
Gallerifiic
http://www.twospy.com/galleriffic/index.html
http://www.twospy.com/galleriffic/example-2.html (デモ）

■すごく素晴らしい動きをするものがあったので追加。
Roundabout Shapes
http://fredhq.com/projects/roundabout-shapes/
http://fredhq.com/projects/roundabout/demo/images/(デモ）

cluetipも良さそう。

cluetipというtooltipプラグインもかなり良さそうなので、リンクをメモしておきます。
http://plugins.learningjquery.com/cluetip/demo/

$.load、簡単すぎて素晴らしすぎ。

jQueryで
$.loadを使うと、
ものすごく簡単にAjaxでファイルをインクルードでき、
しかもGET、POSTもできる、というからおそろしくありがたい。

http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

上記サイトを参考に、
カレンダーアプリで、2010年2月を表示させようとしたら、以下のようにデータを渡すとOK。
$("#test").load("month.php", { year: "2010", month: "2" } );

あまりにも簡単だったので、たまげました。

AjaxでシームレスPOSTしたいので探しました。

AjaxでformをシームレスにPOSTさせたい、と思っていて、いいものを探していたら、
良さそうなのがあったので、メモです。

「Ajaxify」という名のプラグインですね。
http://plugins.jquery.com/project/Ajaxify

以下のページ群の中で、formでPOSTして、それをGETする様子が体感できました。
http://max.jsrhost.com/ajaxify/demo.php
New v2 features内のform、practical examples内のRegistration formの二つが、自分のやりたいことに近いです。

jQuery、裾野が広いなあ。。

■追記：更にajaxで良さそうなformプラグインがあったので、メモです。
名前はそのまま「ajaxForm」。
http://jquery.malsup.com/form/#getting-started
これはファイルアップローダーもあるとか。
あと、ajaxSubmitという兄弟分もある様子。
ざっとしか目を通していないので、また良く読まねば。。

Ajax Uploader発見。

AjaxなアップローダーがjQueryでないかと思ったら会ったのでメモ。
http://valums.com/ajax-upload/

特定のファイルタイプのみに絞るコードまでドキュメントがある。
親切だ。

jQueryのAjax＆DB＆PHPの連動のための準備（自己メモ）

jQueryを使って、付箋アプリが公開されており、これをヒントにつくり直せばかなり使えそう。
で、メモ。
追々取り組むべし、自分。
http://blog.caraldo.net/2010/01/jqueryphp.php

jQuery UIでauto completeが標準に。(ver 1.8にて）

Ajaxで郵便番号入力をauto completeさせようとして、一応実装で来たのですが、
新しいjQuery UI（1.8）のサイトを見ていたら、標準実装されていました！
すご。
http://jqueryui.com/demos/autocomplete/

様々なオプションがあり、DBからキャッシングするオプションなどもあり、まったく望んだままのものが用意されていました。
http://jqueryui.com/demos/autocomplete/#remote-with-cache

jQueryさまさまですなあ。。。。

jQueryUIのsortableメモ。

jQueryのsortableで、複数の要素をソート可能にし、かつその順番をDBに保存したくてググると、色々参考になるサイトがあったのでメモです。

http://jqueryui.com/demos/sortable/

http://blog.firstlife.jp/2008/11/11/JQuery Sortableを使って順番入れ替え機能の作成

http://allabout.co.jp/internet/javascript/closeup/CU20080130A/

http://ponk.jp/?p=1887

Beauty tipsで表示崩れ。（きっと自分のCSSミス）

Beauty tipsが、IE8,Chrome上ではOKなのですが、IE6,Firefox3.6上ではなぜかツールチップがずれます。。

DEMOを各ブラウザで見ると崩れていないので、
自分の実装がおかしいんだな、と。。

CSSでおそらく何か変な書き方をしているか、
競合しているのかな、と。。

要対策なり。

■追記（トラブル解消記）：
やはりBeauty tipsの表示崩れの問題は、
制作途中のページ群のCSSで、
ネガティブマージンや、bodyにtext-align:center等を指定していたのが問題だったと判明。
それらをきれいにしたら、無事直りました。

自分の問題だった。

bodyなどにざっくり大胆なCSSを設定するのはやはり避けた方がいいですね。

beauty tips のIE8上でのエラー、回避。

前の記事で書いた、beauty tipsのIE8上でのエラー回避ができましたのでメモ。

対策が
http://plugins.jquery.com/node/8716#comment-4709に書いてありました。
ありがたや。
（自分の環境だけでなく、一般的なエラーだったようです。jQuery本体との絡みもあったようで。）

ともあれ、

非圧縮版の722行目あたりで、
this.btOff = function() {

var box = $(this).data('bt-box');
の次に、
if (typeof box == 'undefined') {
return;
}
を加えたら、OKに。

これでエラー表示なく行けそうです。。。

IE上にて、tooltip使用時のエラー。。

（■以下の文章に関する追記です：自分の環境では、以下の文章のエラーは回避されました。回避メモはこちらに。）

自分の環境で、IE8にて、unitipやBeautyTipsなどを使っていると、エラーが出力されます。。
(話題と関係ないですが、unitipsで使われる透過PNG対策js、いい感じです。）

（バージョンは、beauty tipsが0.9.5-rc1、jQueryが1.3.2です。unitipはなんだっけな。。）

どうも、
'this[...].style' は Null またはオブジェクトではありません。
といったエラーや、(beautyTips使用時,jquery132の3838行目に関して）
エラーメッセージ: 'document.getElementById(...)' は Null またはオブジェクトではありません。
といったエラー（Unitip使用時、unitip.jsの確か200行目以下あたり。。）
がでます。

悩ましい。

いろいろやってみると、
まだtipが表示されているところにmouseoverになるとエラーとなるようだ、と分かってきました。

が、jsに関して初学者なので、対処がまだよく分かりません。

実運用に移行するためにも、このエラーは克服せねば。。

Chrome,FFでは問題ないのですが。。
ま、自分の実装の仕方がまずいのかな。。

■追記：qtipなら大丈夫だったのですが、自動的にウインドウサイズを把握して、左右や上下にチップが移動してくれないので、今回はやはりbeautytipsあたりを使いたいところです。
頑張ろう、自分。

■追記２：Beauty tipに関してはエラー回避方法が分かったので、http://learnaboutjs.blogspot.com/2010/05/beauty-tips-ie8.html
にメモしておきました。

AJAX、そのうちに。。

AJAXを使って画面遷移なしのフォームを実現したいと思い、参考になりそうなサイトがあったのでメモです。
http://e0166.blog89.fc2.com/blog-entry-363.html

それにしても、AJAX、便利っすね。。

jQueryで付箋（リンクメモ）

付箋をWeb上で実現できたら、と思っていたら、jQueryでできるとのことなので、リンクメモ。

http://blog.caraldo.net/2010/01/jqueryphp.php
http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/

かなりいい感じです。

jQuery、すごいなあ。。

時間選択のためのsliderのリンクメモ。

時間を選択するためのjQueryスライダを探していて、UIのsliderが一つ良さそうなのでメモ。
http://docs.jquery.com/UI/Slider
http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/

また、自作で作っておられた方が公開していたので、メモ。
http://moto-mono.net/sample/timeslide/
個人的にはこちらの方が気に入った。

ツールチップ遍歴(unitipが自分の用途には良さそう。。）

jQueryで、表示スピードが速く、HTMLも受け付けるtooltipを探して、結局unitipが良さそうと結論。
http://labs.unitinteractive.com/unitip.php
(訂正：上記UnitipはjQueryライブラリーではなく、単体で動くものでした。大変失礼いたしました！）

vtipも検討しましたが、HTMLをうまく表示してくれず、断念。
かなりスピーディーな表示で気に入ったのですが。

その前はqtipを検討するも、
多機能ながら表示スピードがちょっと自分の実装では遅かったので、断念。

で、unitipに落ち着きました。

が、png画像を使うのでカスタマイズはちょっとめんどうかもです。幅の変更等。

それにしても、jQueryの世界、奥深く、またありがたし。
（追記：そして結局、また 色々探って、Beauty Tipに落ち着きました。一応。。）

jQueryのセレクタ記述の鉄則訳のリンクメモ

jQueryのセレクタを書く際の鉄則を意訳（？）しておられたサイトがあったのでメモ。
http://blog.mudaimemo.com/2009/07/jquery11.html

jQuery、事始め。

 jQueryのコードをテスト用に書くときは、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script> 

のようにgoogleapisさんから読み込ませてもらうと楽です。

clip noteというコピペツールに登録して、htmlファイルにペーストして使っています。
::::::::::::::::::::::::::::::::::::::::::

jQueryをページに適用するには、
$(document).ready(function(){
})
という記述等が必要ですが、

これは
$(function(){
})
と省略できて便利です。

そこで以下のような一連のコードをクリップボードツールなどに入れておくと、とても便利です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
     $(function(){
   });</script>
  <script type="text/css">
  </script>

pathの参照ドキュメント（W3Cより）

http://www.w3.org/TR/SVG/paths.html#PathData
にSVGフォーマットでのpathの書き方が書かれていました。

これを参照して、pathを書くと書けるようですが、かなり学習が必要そうですが、こりゃ（^^;

Raphaelでオブジェクトを前面に配置するのはtoFront();

オブジェクトを前面に配置したかったのですが、
toFront();
で実現できると知り、便利でした。

var c = paper.circle(10, 10, 10);
c.toFront();

みたいな。

http://raphaeljs.com/reference.html#toFront 

でも、これを適用してもフロントに行ってくれない問題が起きて、

悩んだら、

既に前のオブジェクトにtoFrontが適用されていました。

そちらをコメントアウトしたらOKに＾＾

Raphaelで文字サイズを大きく（メモ）

Raphaelで、文字サイズを大きくしたりするのができずに困ってました。
http://raphaeljs.com/reference.html
ドキュメントを見てもよくわからず、attr({font-size:"20px"});とかをつけてもうまくいかず。。

最終的に、

var t= paper.text(120, 100, "Test string")
.attr({font: '50px Fontin-Sans, Arial', opacity: 0.5});

のようにしたら、文字サイズが大きくなりました。
(もちろんopacityはおまけです。二つのフォント指定はひとつにしてもいけました。サイズだけだとダメでした。）

参考にしたのは、Raphaelのこちらのサンプルコードです。
http://raphaeljs.com/text-rotation.html

■追記：
他でfontサイズを指定したとき、
txt.attr("font-size","130");
のような形で("font-size","30");
などのように両方をダブルクオーテーションで囲ってやったらうまくいきました。

RaphaelというJSライブラリ、楽しいです。

RaphaelというJacascriptのライブラリを知り合いの方から教えていただきました。
触ってみると、とても楽しいものでした。

これから、Raphaelについて、メモを残していきます。

参考サイトは以下に。
http://raphaeljs.com/　（本家）
http://raphaeljs.com/reference.html　(リファレンス）
http://groups.google.com/group/raphaeljs　(ディスカッショングループ）　

また、jQueryクエリについても書き残していきたいと思います。
jQueryもやんなきゃ。。。！

メモを残すと、やる気になるのが自分のパターンのようなので、やります。