jQueryで選択したセレクタをハンドラ内で確認
$('◯◯')で選択したセレクタの◯◯の部分のみを、$('◯◯').click(function(){});などのハンドラ内で確認したい時、どう書けばいいだ？ってちょっとした疑問に思ったので、確認してみた。そのメモエントリー。 おそらく使うことは少ないと思うけど、セレクタで使ったものだけ確認したいってどうやるんだろう？とかそんな些細な疑問。 きっとjQueryオブジェクトに.selectorとかつけたら見れるだろうか～とか思ってやってみたところ、予想通りとれた。 var $element = $('#demo1 p'); $element.click(function(){ alert($element.selector); }); ハンドラ内といっても、一度その前に変数に格納した要素から.selectorを表示しています。こうしないと動作しない。 $(this)では使えない clickイ
東京にいるなら参加しておくべき勉強会！Sugamo.cssに初参加
せっかく東京にいるので、こちらでしか出会えない方々に出会いに行こう！！そんな意気込みで土日に開催している勉強会などないかとさがしたところ、なんとSugamo.cssが４日に開催されるじゃない！ せっかくなので、突撃参加してきました。 SaCSSでも、参考になる部分は取り入れよう！という意気込みで参加してきたので、とりあえず様子などなど暴露。 恐らく一番最初に会場到着 14時開催で、席も限られている！なんてこともあり、さらには、自分の泊まっている位置からどのくらいで到着するかあまり考えずにでちゃったもんで、会場に13時半には到着しちゃってました。 んでもって、Twitterとかの書き込みやら過去の内容やらをみると、席が足りなくなる！？みたいなことも書いてあったんで、きっと早く開場して人もたくさんいるんだろうなーなんて思っていったのですが、誰も居ない。 きっと時間近くになったら誰かくるんだろう
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
jQuery1.4.2リリース
jQuery: » jQuery 1.4.2 Released 気づけばjQueryのバージョンが新しくなって、1.4.2がリリースされていました。 今回も主な変更はバグの修正と速度改善のようですが、機能も追加されているようです。 jQuery 1.4.2 今回の改善内容は、バグの修正をいくつかと、プラス速度改善。マイナーバージョンアップでも速度改善されているのですねー。 速度改善が主にされているのが、以下の４種類。 .bind()と.unbind(). .empty()と.remove()と.html() documentへのDOMノード挿入 $("body") 上記の利用速度が速くなっているようです。 .delegate()と.undelegate() 今回の追加は.delegate()と.undelegate()の二つ。 .delegate()は下記のような使い方のようです。 ■.d
jQuery自作：高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”
高さの違うブロックを同じ高さにする方法は既に沢山でているのですが、 jQueryでできないかなって考えてみて、作ってみた。 これを使えば、内容量によってブロックの高さが変わっても、 自動的に揃えることができます。 今回はダウンロードできるようにしました。 リンク先を保存で保存して利用してください。 ダウンロード：jquery.sameHeight.js 動作を確認したブラウザは Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。 そのうち、SafariとChromeは設定によって若干うまくいかない時があるようです。 使い方 jQueryが無いと動かないので、ダウンロードしてきてください。 そして今回のプラグインもダウンロードしておく。 そして二つを利用するために、head内に記述。 <script src="js/jquery.js" type="text/
jQuery自作：簡単な指定だけでテキストを画像と入れ替え（画像置換）ができる”jQuery ReplaceImg Plugin”
「画像置換が簡単にできないかなー」 なんて言われたことが過去にあったのを思い出した。 CSSでの設定を覚えたら簡単にできるのですが、 それよりも簡単に使えないかなーと考えていたら、 「あ、プラグインでいいじゃん！」 なんていいのか良くわからないまま昨日から構想はじめて、さっきようやく完成した。 いろいろなテストとか実験しながら作ったら時間かかった（汗） でも作りというかスクリプトはものすごく簡単だったりする。 このプラグインを使えば、画像置換を簡単に行えると思う。 出来云々はおいといて、とりあえず紹介！ ダウンロードして使用してください。 リンク先を保存で保存できます。 ダウンロード：jquery.replaceImg-1.0.js 動作を確認したブラウザは Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。 使い方 jQueryが無いと動かないので、ダウン
jQuery自作：シンプルカウントダウンタイマー
ちょっとしたカウントダウンのタイマーが必要になったので、簡単に作ってプラグインにしてみた。 かなりシンプルに、ただ単純にカウントダウンしていくだけ。 20分から始まって、カウントダウンが終わると「終了しました」と表示されるだけ。 多機能にしようかとも思ったのですが、今はそこまで自分のなかで求めていなかったのでシンプルな形で落ち着きました。 使い方 まずはプラグインをダウンロードして使ってください。直接ここから読み込んで使うことの無いようにお願いします。 jQuery jTimer Plugin 使い方もシンプルになっています。 そして下記のように、タイマーにしたいセレクターにjTimerの機能をつけます。 $("selector").jTimer(minute,second); minuteには設定する分を、secondには設定する秒を書いてください。何も書かない場合はデフォルトを20分に
親要素のみ削除する方法[jQuery1.4系版]
結構前のエントリーで『jQueryメモ：親要素だけ消すってどうやるんだろう？』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。 今回の各でもについて 今回のデモは下記のHTMLをそれぞれ利用します。 利用するHTML <a href="#damy"><span>サンプルデモ</span></a> デモ５だけは子要素にSPANがないものを利用しています。 このうちAタグのみ削除することを目的とします。リンクが外れていたら成功。 プラス、中のSPAN要素には、中のテキストをアラートするクリックイベントを付けておいて、今回の親要素削除後も動作するかをチェックできるようにしてみます（spanを子要素に持たないデモはこのイベントは付けていません。） 子要素(SPAN要素へのイベント) $('span','.pr
![親要素のみ削除する方法[jQuery1.4系版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/32ea6dcbe5d9f2a3bc69fb3f023dc0dc91890670/height=288;version=1;width=512/https%3A%2F%2Fh2ham.up.seesaa.net%2Fimage%2F201003171.png)
jQueryのanimateで背景色や文字色の変化をできるようにするプラグイン『Color Animations』
はっ！？内容とリード文があってない！？ ってことでいつのまにやら修正しておく。 背景色とか文字色とか、色関係をアニメーションさせようと思っても、 どうやらjQuery単体ではアニメーションできない。 なぜ！？ とまぁ、背景とか色関係をアニメーションで使いたいなと思ったので、 色関係を扱えるようにするプラグインを見つけたので、メモエントリーしておく。 jQueryだけだと背景色と文字色はアニメーションできない jQuery単体だけだと、背景色や文字色のアニメーションができないのです。 理由は下記の通りのようです。 数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。 animate - jQuery 1.2.6 日本語リファレンス つまり、アニメーションさせるには変化させるための数値が必要。 ところが色の値などはデフォルトの状態では数値化
JavaScript OFF環境に優しく？jQueryでCSSを追加
JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか？ それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。 チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQue
IE7・8で透過PNGにJSで透過させたら画像が汚くなった場合の対処方法
[mixi] jQuery.js | しつもん No.153 コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん？どういうことだ？なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・ おっと、なぜ！？ どのようなことなのか、確認しつつ対応方法を見つけようと思います。 とりあえず確認 デモとしてあがっていたのをちょっと私の方で処理をしたものと、私の方で用意した画像の計６つをプレビューしてみようと思います。 ※今回はIE6用の処理をいれていないので、PNG32の画像などは背景が透過されずに灰色の色がついて表示されてしまいます。IE7,8での問題なので、今回のエントリーはIE7かIE8で見て下さい。 上記のプレビューをIEで見ると、透過PNG全てが透過処理部分がギザギザになったり透過されていなくなった
「Easy Retweet Button」をカスタマイズしてRetweetボタンを設置する
先日、某所にてお世話になっている、@mersyさんより「ブログの記事一覧にReTweetのボタンをJSで自動でつけられるようにしたい。」というような課題みたいな話題が出てきました。 bitlyのAPIを使って、URLを自動的に縮めておきたいという要件もついていたので、それくらいであれば、以前ブログで紹介した「Easy Retweet Button」を利用したら簡単にできるのではないか？と思ったので、やってみることにしました。 Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法 プラグインを使わないとうまく動作しないことも… 最初はプラグインなんか使わずに、自分でbitlyのAPIを使って、作ってやろうじゃないかー！なんてのを思って取りかかったのですが、bitlyのAPIの接続が遅くなったりとか、結構不安定。読み込みが遅いとうまく動作してくれな
Google Map Apiを試してみた(ついでにjQueryのプラグイン化)
先日、Google Mapを利用する機会があったのですが、最初は単に地図があればいいということだけだったようなので、Google MapのAPIとかを利用せずに、地図の右上にあるリンクの作成ででてくるiflameを表示させようと思っていた。 しかし、APIの利用方法ってどうだったかなー？なんて思ったので、以前利用したことがあったのですが、再度調べてみることに。 今はバージョンが３も出ているのですが、それは利用したことがなかったので、それの利用方法メモです。 Google Map APIの利用 バージョン３からはAPIキーが不要とのこと。利用が楽になってますね。 まずはMapを利用するためのライブラリの読み込み <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scri
jQueryメモ：親要素だけ消すってどうやるんだろう？
上の図にしたように、子要素を持つ親要素のみを削除したいとき、 jQueryを使って表現するにはどうしたらいいんだろう？ なんてのを悩んで結局できなかった。 とりあえずためしたものをメモエントリーとして書いておく。 2009/02/18修正 できなかった例 一応使用HTML ■HTML <a href="#damy"><span>ダミーテキスト</span></a> これにJavaScriptを適応させて、 リンクが外れていたら成功になる。 失敗だと、上のようなままか、もしくは中身が消失する。 当然remove()は中まで消える ■スクリプト $(function(){ $('a[href*="damy"]').remove(); }); ちなみに、$('a[@href*="damy"]')の部分はa要素のリンク先のURLで 「damy」の文字を含んでいるリンクを対象とするという指定です。
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
リストを横並びにした時の空白をなくす方法
リストを横並びにした時の空白 リストをdisplay:inline;などで横並びにすると、リストとリストの間に空白ができちゃうんですよね。これを知らないと、paddingを0にしたりとかmarginを0にしたりとか、そういうのでがんばろうとしてしまうんだけど、実はそうじゃなくてHTMLの書き方によって(改行)空白できちゃうんですよね。 これをdisplayプロパティで横に並べる時、どの方法なら隙間なく並べられるか！他の方法とかを含めて検証してみましょう。 いろいろ検証してみる ネタ元の方法が実際にどうなのか、そして、他の対処法も含めて検証してみます。 尚、今回の検証では、IE6、IE7、IE8、Firefox2、Firefox3.0、Opera9.6、Safari、Chromeで検証しました。 １、単純に改行した場合 ■HTML <ul> <li>サンプル</li> <li>サンプル</l
display:inline-blockがけっこう便利。だけど…
小さいブロック要素とかを横並びにさせたいときとか、inline-block使うと便利なんですよね。幅も高さも指定できてしまう要素にみせることができるinline要素になるというのがとても便利。わざわざblock要素にして、floatさせて横並びにさせる、そして並ぶ要素を終わらせたあとはclearをして…なんてことをしていると、指定が多くなってしまうんですよね。ですが、inline-blockを使うと、そんなことしなくても簡単に並べちゃうってのはいいですよね。 しかし、そのinline-blockは、IEやFirefox2などのオールドブラウザだとうまく動作しないことの方が多い。今では使えるようになっているブラウザが多いのですが、IEや以前のブラウザを気にすると、使いどころが少なかったりもする。 inline-blockのオールドブラウザやIEについての動作は、参考としているサイトを見てもら
float関連の問題で覚えておくべき５つの対策
CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこないようにする 写真の横に文字をもってきて、その文字が多ければ 写真の下にも文字をもってくる・・・というような場合は、 単純にimgにfloatをつけるだけでできるのですが、 コンテンツが下に来ないようにしたい場合はどうしたらいいか。 ■例１ー１（imgにのみfloat:left、下に回り込む） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキス
XHTML＆CSSコーディングハンズオン勉強会に参加した
先日の日曜日、コーディングを専門としている企業の方と僕と共同して、 「XHTML＆CSSコーディングハンズオン勉強会」というのを行ってみた。 講師はそのコーディング専門の企業の方で、 年間100サイト以上をコーディングを行うという凄腕の方。 今も数百ページにも及ぶサイトのコーディングを行っているとか・・・ 僕からしてみたら恐ろしいくらいのスピードでコーディングしている方で、 その方を講師として、今回実践形式の勉強会を開催しました。 コーディングの実践についてなので、まとめることも少ないですが、 勉強会で学んだことなどをメモしておこうと思います。 XHTML＆CSSコーディングメモ 今回の内容も、ざっくりとメモ程度にまとめます。 ■メモ ・ソースはテンプレートを作成しておく。 ・必要なことは全てあらかじめテンプレート化。 ・業務管理はエクセルなど表計算ソフトを使うと便利 ・必要ページ項目や仕
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
