jQueryで選択したセレクタをハンドラ内で確認
$('◯◯')で選択したセレクタの◯◯の部分のみを、$('◯◯').click(function(){});などのハンドラ内で確認したい時、どう書けばいいだ？ってちょっとした疑問に思ったので、確認してみた。そのメモエントリー。 おそらく使うことは少ないと思うけど、セレクタで使ったものだけ確認したいってどうやるんだろう？とかそんな些細な疑問。 きっとjQueryオブジェクトに.selectorとかつけたら見れるだろうか～とか思ってやってみたところ、予想通りとれた。 var $element = $('#demo1 p'); $element.click(function(){ alert($element.selector); }); ハンドラ内といっても、一度その前に変数に格納した要素から.selectorを表示しています。こうしないと動作しない。 $(this)では使えない clickイ
$.fn.～で選択したセレクタ利用して、.live()を実現
昨日『jQueryで選択したセレクタをハンドラ内で確認』というエントリーを書いたのですが、これを使えば独自メソッド内でliveのイベントを付けたい時にセレクタを簡単に使えると思ったので、昨日に続きメモエントリー。 .live(function(){})は$(document).on('Event','Selector',function(){}) jQuery 1.7での.live()は.on()に統合されています。同じように書くには、 $(document).on('Event','Selector',function(){ //何か処理 }); この様に書く必要があります。 $.fn.◯◯～のようなプラグインを作成して、プラグイン内部で.live()を使わずに.on()で同様の機能を得るためには、選択しているセレクタを書き入れる必要があります。そのため、利用しているセレクタの文字列が必
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
Mac OS 10.6にMacPorts
MacでGitやSubverionなどを使おうと、いろいろなサイトを参照してみると、その解説の多くで「MacPorts」という語がでてきていて、それが導入されていることが前提でいろいろ書かれていたりした。 でも、MacPortsって、なんだ？ まずはそこから調べてみよう！そして、導入したほうが便利なら導入してみよう！ MacPortsとは？ MacPortsって、なに？ということで、調べてみた MacPortsは MacOSX 上で利用可能なパッケージシステムの一つで、主に UNIX 向けに開発されたオープンソース・ソフトウェアを手軽にインストールすることができます。 ～中略～ MacPorts を使って新しくソフトウェアをインストールするには、ターミナル上で「sudo port install パッケージ名」などと入力します。これによりアーカイブのダウンロード、展開、パッチの適用、コンフ
JavaScriptなしでPHPでフォントサイズを変える「大・中・小」ボタンを実装する方法を考える（未完成）
先日のエントリーで、『フォントサイズを変える「大・中・小」ボタンを実装する方法』というのをエントリーしたのですが、沢山の方に見てもらえたようで、かなりびびってる自分です。。。 もっとちゃんと汎用的なのを書けばよかったです。 そして、JavaScriptだけで実装した場合、JavaScript OFF環境だと当然のごとく動作しません。cookieもPHPを使えばOFF環境でも動作します。 ということで、PHPの知識は殆どないですが、PHPを使って実装できないかを考えてみます！ PHPでフォントサイズを変える「大・中・小」ボタン実装を考える 基本的にはJavaScriptが使える環境では、前回と同じようにJavaScriptでフォントサイズが変更されるようにしておきます。OFFの時に動作するようにするので・・・どうしたらいいんだ？ PHPってクリックイベントとかあったっけ？と思って調べたのです
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
私がMacにいれたアプリケーション各種
Macを利用するようになって、環境設定と共に各種様々なソフトを導入しました。以前利用していた時に使っていたフリーソフトなどを中心に、導入をしたのですが、私が導入したアプリケーションの中でも重宝しているものを１１個と他いれたもの各種ご紹介いたします。 CotEditor Mac用テキストエディタ「CotEditor」 まず一番最初に導入したのがCotEditor。Mac用のエディタです。動作が軽いというのと、各種言語の色分けが綺麗だということで以前から使っていました。HTMLやCSS、JSの本当にちょっとした編集などで、重たいソフト起動するよりも動作が軽快なので、重宝しています。時々利用する<br />なんかも、DWと同じように「shift + return」で入力できたりするのも、細かいですが、個人的に重宝していたりします。 404 Blog Not Found:Mac - CotEdit
Macユーザーになったので基本設定などなど
以前より、メインとして使うPCをMacにしたいなーと悩み続けていたのですが、４月のはじめにとうとうMacを購入しちゃいました！！ 購入して２週間後に新しいMacの発表があったりと・・・ちょっとばかしタイミングが悪かったのですが、それほど気にしてもいなかったり。ちなみに購入したのは、MacBooc Proのスペックいい方。 その購入したMacを持って、勉強会に行ったところ「ハムさんがMacなんて・・・」と言われた。まさかこの人がMacを買うなんて・・・という意味だろうか？「それとも、似合わないということか...」 最初に設定したあれこれ 過去に一時期だけMacを利用していた時期があったのですが（前の職場で）、その時の記憶をたよりに、自分の利用しやすいような環境設定にすることに。 ExposeとSpaces まず設定したのはExposeの設定。すべてのウィンドウから使いたいウィンドウを選択する
Zen-codingを行う前にはシャドーコーディング
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた Zen-Codingでできるあんなことこんなこと Zen-Codingで楽々コーディング! + コツ1つ Twitterでもmukimukiでも、Zen-codingが結構熱くなってます。知り合いでも導入している人がちらほらと。Zen-codingを使えるようになると、とっても便利！ しかし、構造ができていない段階でZen-codingを行うのは非効率。そんな時は『超高速コーディング術』にも書いてある「シャドーコーディング」を行ってから作業に入ると、効率的です。 シャドーコーディングとは？ シャドーコーディングとは、『超高速コーディング術』にも書かれておりますが、スキルパートナーズの大杉さんの造語。いきなりPCでマークアップを行うのではなく、PCを使わずに、まずはプリントアウトしたデザイン上で、もしくは脳内
jQuery1.4から追加されたjQuery.proxy()を試してみる
Quick Tip: Learning jQuery 1.4's $.proxy | Nettuts+ jQuery 1.4で追加されたjQuery.proxy()、この使い方について解説がされていましたので、ご紹介。自分なりに変化させたりしていざチャレンジ！！ jQuery.proxy()ってなに？ This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the
親要素のみ削除する方法[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)
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全てが透過処理部分がギザギザになったり透過されていなくなった
何故かあまり取り上げられない、jQueryのCSS3セレクタ | THE HAM MEDIA
あれ？jQueryでCSS3の全部のセレクタを使えるようになってる？いつから？ jQueryといえば、ほとんどのCSS3のセレクタに対応しているのですが、そのうちの一部は、jQuery1.3.2になっても、確か使えなかったと認識していました。使えないものだと思っていたのですが、最近になって、そのまだ対応していなかったはずのセレクタを試してみたところ、なぜか使えるようになっている様子。1.3.2で試してみても動作する。 いつから！？ とりあえず検証。 いつから全部対応していたのだろう？ てっきりSizzleのバージョンがあがったからなんだろうなんて思っていたのですが、1.3系でも使えてるような・・・なぜ？と、記憶をたどってみると、以前のFirefoxなどでは使えなかっただけか？なんて考えたので、いろんなブラウザで表示チェックしてみた。 その結果、まだ紹介にもでてこない理由としては、全てのブラ
jQuery使っても十分速いよというお話
先日のこと、かなり表示している要素のところに適用していたJavaScript(JS)があるのですが、それが重たいとの指摘があり、調査・調整することになりました。自分がコーディングをしたわけではないので、何が原因になっているのかなども全部調べるところからはじめたのですが、確かに要素数が多くなると、ものすごく重くて遅すぎる状態。 ライブラリとかを使わないでgetElementsByTagName使って、配列にpushとかの内容でごにょごにょしていたんですが、いろいろ遅い。高速化の処理を調べて修正しようとも思ったのですが、なにぶん時間も限られている。そして都合のいいことに、jQueryが、なんか別の処理のためにpluginを使うために読み込まれているという状況。それならjQuery使って処理しちゃおうと考えたわけです。 速くなるのかはとりあえず試してみるかってことでチャレンジ。 とりあえず配列に
jQuery1.4のアルファ版を試してみた その１
今月のあたまの話になるのですが、「jQuery 1.4 Alpha 1」がリリースされていました。 jQuery: » jQuery 1.4 Alpha 1 Released 年末年始にかけて最新版がリリースされる予定となっていたのですが、今回のはそのテスト段階のもので、Alpha1としてでています。（開発の最新ではAlpha2が徐々に作成進行中） これまでのjQuery1.3.2と、どのような点で変化するのか、現時点でわかっていることだけでも書いておこうと思います。 jQuery 1.3.2→1.4a1での変化 リリースの情報をみると、今回の変化は下記の内容になるようです。 live was drastically overhauled and now supports submit, change, mouseenter, mouseleave, focus, and blur eve
必見！コーディング技法と実践ノウハウ本『XHTML&CSS超高速コーディング術』
HTMLやCSSの技術関連の本はたくさん出回っていたりしますが、作業フローだったり、データ管理の仕方なども含めたコーディング技術の本というのはあまりないのではないでしょうか？ そんなコーディングの実践ノウハウについて書かれたの本が発売されました！ XHTML&CSS超高速コーディング術 大藤さんの著書で、ノウハウの提供は、私もお世話になっている「スキルパートナーズ株式会社」のコーディング専門サービス『牧野工房』のノウハウが大公開されております。 牧野工房のノウハウ本 牧野工房は札幌のコーディング専門会社のサービス。以前から勉強会やらなにやらで様々お世話になっているお方、大杉さんのいる会社ですが、そこのノウハウを大公開している一冊です。 大杉さんと出会ってから、いくつも本の内容のような話をお聞きしていたのですが、大藤さんの手によって活字化されました。以前から出るということもお聞きしていました
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」の文字を含んでいるリンクを対象とするという指定です。
DOMにピンとこないなら最初は感覚で使えばいいじゃない
先日、いつものチャットメンバーで話をしているときに、DOM Sctiptingの話になったのですが、メンバーで「DOM」がよくわからない人がいたりしました。 でも、実際にDOMなんて用語で覚えようとしても、最初はピンとこなかったりしませんか？ JavaScriptとかjQueryにしろ、覚えておくべき用語なのですが、ピンとこないので、最初は感覚で使ってしまいましょう。 DOM？ドム？ DOMはDocument Object Modelのことで、HTML文書へのアクセスや操作の方法についてを定義したことなのですが、最初は用語で考えてもよくわからないですよね。 DOMって覚えるよりも、「HTML中のドコをどのようにしたいのか！？」なんてことで自分は覚えていたりします。厳密にいうと違う！とか言われるかもしれませんが、最初から厳密に覚えようとしても、覚えにくいので、最初はこれでいいと思っています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery1.4のバグなどが修正されたjQuery1.4.1リリース！
