display:inline-blockがけっこう便利。だけど…
小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。 しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。 inline-blockのオールドブラウザやIEについての動作は、参考としているサイトを見てもら
jQueryのdata()を勉強したけど構造がイメージできずに撃沈気味…
実はどんな風に動作するのか全然わかっていないjQueryのdata() このスクリプトの作り方とかその動作の仕方とか 勉強しようといろいろ調べながらサンプル作ろうとしたのですが、 まずは基本すらその動作の仕方よくわかっていない・・・ とりあえずサンプルのスクリプト部分だけも 動作がどんなものになるのか、メモのためにエントリー。 jQuery.data() あれ？data()ってこんなだったけと思いつつスタート。 （この実験の途中で・・・とあることに気づいたがとりあえずそのまま） ■スクリプト $("#test1 ul li").click(function(e) { var id = jQuery.data(e.target); $("#test1 p span").text(id); }); ■プレビュー まったくよくわかっていないのは、 まずはこの数字はどこでどう取られた数字が返ってい
jQueryを使い要素の出てくる順に番号をつける方法（forの代わりにeach()を使う繰り返し）
今回、「jQuery Sequential List - Web Designer Wall」をみて、 eachがforと同じ動きをしているのを知った。 関数の中で数字の加算をしたら繰り返しのたびに増える… まさにforの動きなのですが、なぜかこの発想、自分の中になくて なんでこんなことに気づかなかったんだ～って なぜかショックを受けております。 ということで、いつものように試しにメモエントリーしておきます。 今回の簡単仕組み説明 今回使おうとしているのは、jQueryのeach これはよく使うのですが、これがforのかわりになるなんて なぜか思いつかなかった自分…(汗) 発想とかって、やっぱり必要なんだなって実感しております。 ulのliに適応させてみる まずはシンプルにリストに適応させてみます。 ■スクリプト $("#testList li").each(function (i) {
jQuery：tableでマウスのhoverしている行と列の色を同時に変える方法(テーブルを少し美しく見せる方法)
上手く行と列が選択できているのですが、問題はマウスを動かしたとき。 同じ行内を移動すると、なんと選択していたところの文字が変化してしまう。 同じ行内にいるときは、変化しないで欲しいのに… と、それだけじゃなくて、一度変化するとそのままの色が引き継がれてしまう。 なんとか解決する方法はないのだろうか・・・ 同じ列にclassをつけてみる これも、先日書いたエントリーに 「jQueryを使い要素の出てくる順に番号をつける方法（forの代わりにeach()を使う繰り返し）」 で書いたように、同じ列にclassをつけることが可能である。 ということでclassをつけてそのclassに適応してみた $("#test2 tr").each(function () { $(this).children().not('th').each(function (i) { i = i+1; $(this).ad
ブログでブログパーツやプラグインを入れる際の注意
以前、wordpressを構築していた時に、デフォルトで入っているjQueryを使い それを元にjsファイルを自分で作ったりしていたのですが、 ある時プラグインを入れたら、作ったjsファイルが動作しない！？ なんていう事態が発生した。 すぐに原因に気づかなかったのですが、どうやらプラグイン導入で それで動作しなくなったということだけがわかった。 同様のことで、最近のブログパーツを入れるだけでも同じことが起こりうるので 皆さんのブログでもプラグインやパーツを入れる際は とあることに注意しておいたほうがいい。 注意すべきこと 注意すべきことは、読み込まれるライブラリである。 僕のブログやサイトの構築の際は、その多くでjQueryを使うのですが、 設定をしていないと、他のライブラリを読み込んだときにエラーが起こりやすい。 プラグインの中には、prototype.jsが自動的に読み込まれるものもあ
jQuery1.3のリリースによって注意しておく２つのこと
一つ前のエントリーでも書いたが、 jQueryの最新版、1.3がリリースされた。 最新版になって、機能が良くなるのはいいことだが、 今回のリリースによって、エラーが発生してしまう！ なんて事態がいくつか予測される。 中でもいくつかのことは気をつけておかないと エラーで動作しない！なんてことが多発しそうなので、 ここに特に注意しておく２つを書いておく。 要注意１：Google AJAX Libraries API利用者 google.load("jquery", "1.2"); とか、 google.load("jquery", "1.2.6");での読み込みはいいのだが、 google.load("jquery", "1");で読み込んでいる人は要注意！ 今回のリリースに伴って、Google AJAX Libraries APIも jQueryの1.3が出てくるようになった。 指定が「1」
jQuery:1.3の新機能「live」を試してみる
jQueryのバージョンが1.3になって増えた新機能「live()」 いまいちよく使い方がわかっていなかったので、 勉強をかねてのメモエントリーを残しておきます。 新機能live() 詳しくないので調べてみた。 live(type, fn) - jQuery 1.3.1 日本語リファレンス んーいまいちピンとこないのですが、 追加した要素にもイベントが登録されるというのはわかった。 普通にclick()じゃダメ？ では、通常のとliveを使った場合と その二つを作って見比べてみることにした。 まずは通常にclickを使った場合。 ■通常のclickの場合 $(".live").click(function(){ $(this).after('<p>ここをクリックしても何もない</p>'); }); ■プレビュー 見てわかると思うのですが、 最初からある部分以外でクリックしてもなにも変化ない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
