JavaScriptでNEWマークを自動的に追加する
個人的にはNEWマークなんていらないでしょと思うのですが、まだまだ更新したらNEWマークつけてよなんて事はよく言われるのでは無いでしょうか？しかもいつまでNEWマークつけてんの？3日たったら消してよなんて言われることも多いのでは無いでしょうか（苦）？
JavaScriptのDateオブジェクトを使えば簡単に自動化出来ます。
jQuery の一覧
jQueryタブプラグインでリンク元にパラメータを与えて開くタブを制御する
特定のタブが開いている状態でリンクをさせたい時は無いでしょうか？例えば3番目のタブがアクティブになっている状態に...などです。 4回に渡ってタブプラグインを改修していきましたが、今回はURLにパラメータを付けて特定のタブが開いた状態へリンクを貼れるように改修いたしました。（正確には書いてもらった...） 詳しい解説は
jQueryタブプラグインで最初に表示されるタブを選択出来るようにする
jQueryを使ったタブメニューの第4回目です。（しつこい） 前回はjQuery Cookie プラグインを使ってタブの表示状態を保持するように改修しました。 今回は最初に表示されるタブを選択出来るように改修します。
指定した秒数ごとに画像がスライドするカルーセル
jQueryを使ったカルーセルプラグインはたくさんあるのであまり困る事は無いと思いますが、試しに自分で作ってみたので2回に分けてカルーセルの作り方を記事にします。 1回目は指定した秒数ごとに画像がスライドする無限ループのカルーセルを作ります。2回目は無限ループに加え、ボタンを画像分用意し、クリックするとボタンに対応した
jQueryを使ってタブメニュープラグインを作る(Cookie Version)
jQueryを使ったタブメニューの第3回目です。 前回はタブメニューを使い回したり、1ページ内で複数のタブに対応させるためにプラグイン化するという記事を書きました。今回はこのタブの状態をリロード時や、他のページから戻ってきた時にタブの状態を維持するように改造します。 タブの状態を維持するにはCookieを使いますが、j
HTML5のplaceholder的なjQueryプラグイン
ずいぶんと昔に書いたプラグインですが、今更ながらブログの記事に書いてみます。 HTML5では追加になったplaceholder属性は、フォームに予めテキストを表示させてアクセシビリティを上げてくれる属性です。主要なブラウザは（FF3.6以下は除く）対応していますが、案の定IE6/7/8/9は対応していません。なのでIE
jQueryを使ってタブメニュープラグインを作る
前回はjQueryを使ってタブメニューのインターフェイスを作成しましたが、汎用的に利用するにはプラグイン化すると便利です。プラグイン化するとプラグインを呼び出す際のオプションを設定出来るので、liやdivのクラス名を変更した際にも対応出来ます。 今回は前回のコードを参考にプラグイン化して行きます。
jQueryを使ってタブメニューを作る
ウェブサイトで多くの要素を省スペースで表示するのに役立つタブメニューは汎用的に使えて実用的なUIです。このタブメニューのインターフェイスはjQueryを利用すると簡単に実装出来ます。 今回はタブメニューを実装するまでを解説していきます。また、1ページ内で複数のタブを実装するにはプラグインの形式にすると便利ですので、最
任意の2つのバナーを表示するjQuery Random Banners
n個のバナー画像の中から任意の2個のバナーを表示させるjQueryプラグインを考えてみました。 仕様としては、HTML上には全てのバナーを非表示で記述し、任意の2個を表示、バナーを追加しても対応出来る（3個でも4個でも10個でも任意の2個のバナーを表示）と言う仕様です。
jQueryを利用したソーシャルサービスボタン生成プラグイン
TwitterやFacebookを初めとして各種ソーシャルサービス（SNS）が公式でコンテンツをシェアする手段を公開しています。自分のブログにこれらのシェアボタンを利用している人は多いと思いますが、TwitterやFacebookなどは公式のソースを利用するとボタン画像が公式のものになってしまいます。今回はオリジナル
jQueryを使ったアイコン付加プラグイン(pdf,doc,xls,zip対応版)
以前にポストしたブログ記事「jQueryを使ったPDFアイコン付加プラグイン」ですが、今回はPDFファイルだけでなく、Word,Excel,ZIPに対応させたものを作ってみました。 今回も折り返した時にIE6/IE7でアイコンの表示がずれるバグに対応させるためspanタグを挿入し、after, beforeのパラメータ
Google Maps API jQuery Pluginを書いてみた
Google Maps APIのバージョン2は利用していましたが、今さらながらバージョン3がリリースされていたことに気づきました。バージョン3からはAPIキーを取得せずに使えるようになっているので、さらに敷居が低くなりました。 バージョン3からはGPSセンサーを利用出来るようになっていて、最初のコードを呼び出す時の引数
Thickboxで読み込んだHTMLからウィンドウを閉じる
ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか？ ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リ
jQueryで複数のCSSプロパティを記述する書式
これもいつも忘れるのでメモ $('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'}); プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。
jQuery (X)HTML操作のメモ1
いつも忘れるので自分用にメモ prepend() 指定した要素内部の先頭にHTMLを挿入 $('p').prepend('<strong>追加テキスト</strong>'); append() 指定した要素内部の最後にHTMLを挿入 $('p').append('<strong>追
jQueryを使ってセレクトボックスで選択したoption要素のテキストを全て表示する
先日、Webデザイナーの集会で嘘くさい？jQueryの基礎みたいなお話をしたのですが、その時にこのような質問が出ました。 複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか？ そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか？ View Demo
inline-blockを使ってのマルチカラムレイアウト（段組み）
IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。 View Demo 通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いま
jQueryを使ったブラウザ分岐
Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。 body { font-size: 100%; } * html body { font-size: 82%; } /* fo
jQueryを使ったPDFアイコン付加プラグイン
リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。 CSS Code a.pd