jQueryのコードを手で書いて、 なぜか実行されない時。。

jQueryのコードを手で書いて、
なぜか実行されない時。。

$(function(){...});

のラップを忘れている確率高し。自分。。。。

手書きで時々書くと、忘れるんですよね。。。
恥を忍んで、忘れぬように書いておきます。

jQueryで、子要素親要素、IDの値の取得など。

要素をjQueryで走査し、見つかった要素のIDの値を取得したい場合、以下のよう。

var idname = $(this).attr("id");

その親要素にのぼって、自分と同列の子要素で別クラス名の値を取得したい場合、以下のよう。

var classname=$(this).parent().children(".classname");

modalを使いたかったので探してみた。

modalウインドウを表示させ、
form処理などをしたくて、jQueryのプラグインを物色。

以下のものが良かったので、使い始めました。
simplemodal
http://www.ericmmartin.com/projects/simplemodal/

css でdisplay:nonに設定して、
表示させたい要素に　.modal()　を加えると。

シンプル。

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

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

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

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

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

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

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

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

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


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

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

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

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

jQueryによるidの取得

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

attrで取得するんですね。

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

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

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からの高さを指定。 

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(名前空間）をつけてやると、指定制御しやすくて便利。

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);   
    });

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;}
みたいなことを適当に書くべし。

以上です。

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

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});

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

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で。

メモでした。

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

ナビゲーションでいい具合に変化するものを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」すなわち「電話をかけ直す」「呼びもどす」みたいな英語だから、 一度ある関数で何かの処理をして、また別の関数を呼んで処理をさせる、という意味ですね。どうも「コールバック関数」という言葉の意味がつかみにくかったのですが、やっとイメージが掴めました。

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