Tag: JavaScript

タグ JavaScript がつけられた記事のリストです。

Mojik

ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリ、Mojikを公開。

和欧混植の条件分岐

ウェブフォントを利用して、ユーザーのローカル環境にインストールされている和文フォントを検出し、その結果に応じて欧文フォントを組み合わせる手法について。

IE8 で擬似要素のスタイルの動的な更新ができない

スクリプトで要素の属性を操作したときに擬似要素のスタイルが更新されない、という IE8 のバグとその回避策。

静的な Google マップを JavaScript API で差し替える

HTML には画像として静的な Google マップを埋め込み、そのパラメーターをパースして JavaScript API に渡し、動的マップで差し替える手法。

JavaScript のビットマスクによるフラグの管理

アプリケーションのユーザー設定などで、フラグを JavaScript のビットマスクで管理する方法の模索。ビット演算子はじめて使った。

mustache と lscache

このサイトでは Last.fm API からデータを取ってきて僕が最近よく聴いてるアルバムを表示する、っていうのをやっているんですが、このスクリプトを mustachelscache というライブラリを組み合わせて書き直してみたところけっこういい感じになったので、簡単に紹介してみます。

スクリプトが無効の場合のスタイル

たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。

Web サイトのスマートフォン最適化: UA 判別篇

iPhone 買いました。iPhone 4。はじめてのスマートフォンですよ。 で、この機会にこのサイトのスマートフォン最適化を図ろうと考えたわけです。今までなにもしてなかったので。しかし恥ずかしながらスマートフォン向けの […]

HTML5 の autofocus 属性を jQuery でクロスブラウザに

一部を修正して Gist に置きました。IE6 と 7 で autofocus 属性値を省略すると動作しない件にも対応しています。 HTML5 ではフォームのコントロールに autofocus 属性 が定義されています。 […]

HTML5 の placeholder 属性を jQuery でクロスブラウザに

Update 2011-09-23 一部を修正して Gist に置きました。 フォームの入力フィールドにあらかじめテキストを表示させておく「プレースホルダ」。ブラウザの検索バーなんかに見られるような、フィールドが空のとき […]

google-code-prettify を導入

ソースコードを強調表示するシンタックス・ハイライトをブログに導入したくていくつか調べてみたんだけど、結局 google-code-prettify にした。行番号を入れたりのリッチな機能は必要なくて、シンプルにシンタック […]

WordPress で HTML5 を書くための準備

現在、このサイトを HTML5 で再構築しようと画策しています。今日はその「準備編」ということで、WordPress で HTML5 をパブリッシュするために、どのようにテンプレートをいじればよいかを考えてみました。ここ […]

jQuery Counter Plugin

CSS 2.1 の Counter 構文 や CSS 3 の Lists モジュール のような、任意の要素に色んなタイプの連番を自動的にふる jQuery プラグイン、jQuery Counter Plugin を書いた。ol 要素ほか順列リストのマーカー部分を柔軟にコントロールしたい、というのが主な目的だけど、個人的な裏テーマは JavaScript の配列と正規表現の勉強。 Demo Demo: jQuery Counter Plugin Download jQuery Counter Plugin Usage 例えば以下のようなごく普通の ol 要素に適用する場合。 <ol>   <li&…

インライン要素に背景画像を指定する

Fig 1: インライン要素に背景画像を指定 CSS でインライン要素に背景画像を指定する場合、IE6 と IE7 では致命的なバグがあるので注意。たとえば Fig 1 のように、パラグラフ中のハイパーリンクにアイコンを表示させたいとする。となると CSS はこんな感じになるだろう: a.pdf {   padding-left: 20px;   background: url(/img/pdf.png) no-repeat 0 50%; } a.external {   padding-right: 20px;   background: url(/…

jQuery と CSS を使った Apple 風パンくず

パンくず (Breadcrumbs) ってその必要性に疑問を感じることの多い要素の筆頭だと思う。この案件で要るか、これ? みたいな。そんなわけだからあまり力を入れて作ったことがなかったんだけど、Veerle’s blog のパンくず作成チュートリアル Simple scalable CSS based breadcrumbs を読んで、必要かどうかはとりあえず置いといて、どうせ置くならお洒落な方がいい、っていうか俺もクールなパンくず作る! と盛り上がってしまい、作ってみた。 Fig 2: Apple のパンくず。影響力大 Fig 3: Delicious のタグのリスト。妙に好き 目論んだイメージとしては Apple …

jQuery 1.3、リリース!

jQuery の最新メイジャー・アップデイト、jQuery 1.3 がいよいよリリースされました! .live() とか .die() とか新しい要素もあるけど、全体的にかなり速くなったっぽいとこが売りっぽい。CSS セレクタ・エンジン Sizzle の搭載や各種リライトが奏功している模様。ベンチマークを見てみると、セレクタの書き方の最適化メソッドもやや変わってきそう。ともあれ、明日は仕事そっちのけでチェックする構えです。 そうだ、書き忘れてた。お誕生日おめでとう、jQuery! …

JavaScript と CSS を使った「このページを印刷」リンク

クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う: <p class=”print”>   <a href=”#” onclick=”window.print(); return false;”>このページを印刷</a> </p> でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。 まずは JavaScript。例によって jQuery を読み込んだ…

jQuery で外部サイトへのリンクをコントロール

外部のサイトへのリンクについて、例えばそのことを示すアイコンを付けたり、あるいは別ウィンドウで開いたり、といった扱いをすることはよくある。そんな場合、jQuery があれば以下のような JavaScript でそのコントロールが簡単に。 まず最初に jQuery のセレクタ機能を拡張 しておく。ここでは要素が href 属性を持ち、かつその属性値 (リンク先) のホスト名 (ドメイン名) が今いるページのホスト名と異なる場合に :external セレクタで捕まえられるように拡張。 $.extend($.expr[‘:’],{   external: function(a,i,m) {   &…

jQuery のセレクタ機能を拡張する

jQuery の魅力のひとつは豊富な セレクタ機能 だけど、それをさらに拡張することもできる。その簡単な方法を紹介してくれている記事をみつけた。 Extending jQuery’s selector capabilities – James Padolsey たとえばインライン要素を取得するセレクタ機能は以下のように書けば作れちゃう。 $.extend($.expr[‘:’],{   inline: function(a) {     return $(a).css(‘display’) === ‘inline’;   } }); これで…