JavaScriptやjQueryでCSSを操作することをよくするのですが、jQueryなどで実行しようと思うと、DOMの読み込みを待ってから適用させることがほとんどなので、場合によっては、display:none;にして見せたくないところもチラっと見えてしまうなんてことがあったりしませんか？
それが嫌な場合はあらかじめCSSでdisplay:none;をあらかじめ指定しておくなどの必要があるのですが、JavaScriptがオフの環境でもそれが適用されてしまうことになるので、見せるためのコードが使えないなんて状況になったり。
チラッとも見せたくないし、OFFの環境の人にも見せたい・・・そんな時のために、JavaScriptに影響を受ける箇所のCSSをJavaScriptで追加し、且つ、DOMの完了を待たずに実行するような仕組みにしてみたらどうかと考えたので、それを実現させるコードをjQueryで考えてみました。
先日ご紹介したjQueryでも一部のブラウザで利用できるようになったCSS3のセレクタ「:target」。jQueryで使うことはまだまだない現状ですが、試しに使ってみました。
ところがCSSで使う時と違い、jQueryで使う場合は一工夫必要かな？なんて思ったので、まとめてみます。
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
Twitterでもmukimukiでも、Zen-codingが結構熱くなってます。知り合いでも導入している人がちらほらと。Zen-codingを使えるようになると、とっても便利！
しかし、構造ができていない段階でZen-codingを行うのは非効率。そんな時は『超高速コーディング術』にも書いてある「シャドーコーディング」を行ってから作業に入ると、効率的です。
2010年になって、まだ勉強会を開催していませんでしたが、３月より始動します！
今回より、いままでのセミナー形式をできるだ少なくし、参加者同士で勉強をしていくスタイルをとろうと思います。具体的にはライトニングトークなどを増やすのと、その時々で参加者の聞きたい・話たい話題についてをディスカッションなりその場でコーディングやハンズオンなどを行うようなスタイルにします。
今回は3月27日(土)の18時より、札幌市民ホールの会議室で開催します。
4月17日(土)に開催されるCSS NiteのLP9「Coder's Higher」の連動企画として、第２回コーディングコンテストが開催されるそうで、すでに参加募集を開始しています。
HTML5とCSS3を使ってのページ作成となるので、これから学びながら作成する人も多いと思うのですが、是非皆さん、勉強がてら、そして今後の技術を一足先に学ぶことも兼ねて参加してみませんか？
あれ？jQueryでCSS3の全部のセレクタを使えるようになってる？いつから？
jQueryといえば、ほとんどのCSS3のセレクタに対応しているのですが、そのうちの一部は、jQuery1.3.2になっても、確か使えなかったと認識していました。使えないものだと思っていたのですが、最近になって、そのまだ対応していなかったはずのセレクタを試してみたところ、なぜか使えるようになっている様子。1.3.2で試してみても動作する。
いつから！？
とりあえず検証。
jQuery: » jQuery 1.4.2 Released
気づけばjQueryのバージョンが新しくなって、1.4.2がリリースされていました。
今回も主な変更はバグの修正と速度改善のようですが、機能も追加されているようです。
[mixi] jQuery.js | しつもん No.153
コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん？どういうことだ？なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・
おっと、なぜ！？
どのようなことなのか、確認しつつ対応方法を見つけようと思います。
今さら聞けないjQuery実行パターンまとめ :: 5509(+1)
noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){〜});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。
十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー
本の帯に「もう、プログラマーには頼らない！」なんて事が書いてある、jQueryの入門本。このブログでも何度かお世話になった、to-Rの西畑さん著の本で、デザイナーやコーダーがプログラミングの知識なしに始めることができるjQueryの入門本です。
サンプルのHTMLもスクリプトもわかりやすく書いてあり、まさに入門！というくらいの簡単にできてしまうサンプルが豊富に掲載されています。
JavaScriptやjQueryをこれから始めようと思っている人、始めたばかりの人、ちょっと復習をしてみようと思っている人向けの本で、これを読めば、jQueryを使ったちょっとしたUIの変化などを取り入れたサイトが作れることでしょう！
ここでのご連絡がかなり遅くなってしましましたが、４月１７日（土）に東京で開催されるCSS Nite LP, Disk 9「Coder’s Higher」に出演させていただくことになりました。
「Coder’s Higher」の内容なので、HTML5やCSS3、jQueryにスピードコーディングの話など、魅力的な内容盛りだくさんの日になるようで、ものすごくわくわくします！！
CSS Nite LP, Disk 9「Coder’s Higher」
先日のこと、かなり表示している要素のところに適用していたJavaScript(JS)があるのですが、それが重たいとの指摘があり、調査・調整することになりました。自分がコーディングをしたわけではないので、何が原因になっているのかなども全部調べるところからはじめたのですが、確かに要素数が多くなると、ものすごく重くて遅すぎる状態。
ライブラリとかを使わないでgetElementsByTagName使って、配列にpushとかの内容でごにょごにょしていたんですが、いろいろ遅い。高速化の処理を調べて修正しようとも思ったのですが、なにぶん時間も限られている。そして都合のいいことに、jQueryが、なんか別の処理のためにpluginを使うために読み込まれているという状況。それならjQuery使って処理しちゃおうと考えたわけです。
速くなるのかはとりあえず試してみるかってことでチャレンジ。
先日、某所にてお世話になっている、@mersyさんより「ブログの記事一覧にReTweetのボタンをJSで自動でつけられるようにしたい。」というような課題みたいな話題が出てきました。
bitlyのAPIを使って、URLを自動的に縮めておきたいという要件もついていたので、それくらいであれば、以前ブログで紹介した「Easy Retweet Button」を利用したら簡単にできるのではないか？と思ったので、やってみることにしました。
Retweetボタンを簡単に設置できる「Easy Retweet Button」のカスタマイズ方法
この広告は90日以上新しい記事の投稿がないブログに表示されております。
