JavaScriptで前ページから受け取ったパラメータ先へリダイレクトする
とあるページのリンクをクリックした場合で別ページへ飛ぶことを明示させる必要がったので、JavaScriptを使って数秒後にリダイレクト、秒数カウント、念の為にクリックでも飛べるようにしました。
Category JavaScript Archive
JavaScriptでNEWマークを自動的に追加する
個人的にはNEWマークなんていらないでしょと思うのですが、まだまだ更新したらNEWマークつけてよなんて事はよく言われるのでは無いでしょうか？しかもいつまでNEWマークつけてんの？3日たったら消してよなんて言われることも多いのでは無いでしょうか（苦）？
JavaScriptのDateオブジェクトを使えば簡単に自動化出来ます。
config.rbを使わずにGruntfile側でcompassのコンパイルを制御する
CompassのコンパイルにGrunt.jsでWatchするケースは多々あると思います。その際にconfig.rbとGruntfile.coffeeに分けていたのですが、どうせなら設定ファイルは少ないほうが良いと思い、Gruntfile.coffeeに一本化しました。
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などは公式のソースを利用するとボタン画像が公式のものになってしまいます。今回はオリジナル
CSS3/jQueryのnth-child()を利用したカラムレイアウト
商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。 当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマー
Google Analytics 非同期トラッキングコード メモ
Google Analyticsの自分で良く使うコードをメモしておきます。（非同期トラッキングコード） 通常のトラッキングコード var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); _gaq.push(['_trackPageview']
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
jQueryを使ったブラウザ分岐
Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。 body { font-size: 100%; } * html body { font-size: 82%; } /* fo
DD_belatedPNGを利用してIE6で透過pngを使う
これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは！と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。 IE PNG FixのAlpha版もbackground-repea
jQueryを使ったPDFアイコン付加プラグイン
リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。 CSS Code a.pd
jQueryを使って検索ボックスをデザイン
jQuery（とCSS）を使って検索ボックスをデザインしてみました。 View Demo jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。 CSS有効で画像をオフにしたら何も表示されなかった submitボタンの背景に画像を使用するため、valueの値を空にしな
シンプルなアコーディオン修正コード
もっと簡単なコードで書けますね。クリックした要素のindexとマッチしたdivを開閉するって方法です。 $(function() { var targetElem = $("div#simpleAccordion div"); targetElem.hide(); $("div#simpleAccordion
jQueryを使って超シンプルなアコーディオンを作る
jQueryを使った超シンプルなアコーディオンを作ってみました。#simpleAccordionを与えたdivの子要素であるh2をクリックするとその直後のdiv要素が開くと言うものです。
iTunes Store風インターフェイスを実装するJS Coda-Slider
iTunes StoreのNew ReleaseWhat's Hotなどの部分で使われているインターフェイスは省スペースで多くの情報を提供出来るクールで優れたインターフェイスですよね。色々なJavaScriptライブラリが公開されていますが、その中でもjQueryを使ったライブラリであるCoda-Sliderを紹介しま
透過pngをロールオーバーさせる
この2〜3日、透過pngを大量に使うデザインのコーディングを行っていましたが、その中で困ったのがIE6で透過pngがロールオーバーしてくれないこと。 様々なライブラリを試したけれどもやっぱりロールオーバーしません。ところが唯一ロールオーバーに対応していたのがユンサンが配布しているiepngfix.jsのバージョン1.
jQuery Plugins IE Png fixでIE6に透過pngを適用
IE6で透過pngを表示させるのにユンサンのiepngfix.jsを良く使います。しかし最近jQueryを使用してサイトを構築するケースが増えたため、jQueryの透過pngをIE6に対応させるプラグインのIE Png fixを試してみました。 使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用さ
fixed.js
昨日某ブログの管理人さんとの飲み会の席で「誰もfixed.jsの事を話題にしないのは何故だ？」なんて事を言われました。 fixed.jsはIE6でposition: fixed;を使う事を可能にするライブラリで、僕の頭の中にはposition: fixed;を使う事自体頭になく特に気にした事はなかったのです。 つい先日
画像のエッジ処理をするcorner.js
class属性を与えるだけで画像のエッジにドロップシャドウやインナーシャドウ、はたまた角丸を与えてくれるJavascriptライブラリcorner.js。 便利なのが角丸+ドロップシャドウ、インナーシャドウ+ドロップシャドウなど複合して使えるところ。 ただ大きな問題がWindows IE6にもIE7にも対応してないと
アルファチャンネルをもったpngを使う
IE7で正式にサポートされた24bit png。今年はこのpngを使ったサイトが流行しつつあるけど、このアルファチャンネルを持った24bit pngをIE6以前で使うにはアルファイメージローダーというややっこしい記述をする必要があった。しかもアルファイメージローダーを使用した要素内にリンクがあった場合、リンクが効かない
続 Lightbox JS
先日のエントリーで個別アーカイブページでLightbox JSが動作しないと書きましたが、いろいろなことが起こるのやすなおさんが教えてくれた小粋空間のエントリーをよーく読んだら解決いたしました（苦笑） その内容と言うものはbodyに記述されたonloadイベントハンドラがLightbox JSと競合してしまう問題でした
Lightbox JS
7月7日のエントリーでThickboxを導入したけれど、Livedoorブログから移行するにあたってThickboxからLightbox JSに変更することにしました。理由は単純、Thickboxは設定するCSSが多かったからです（苦）。 Lightboxにして一つ問題が発生。何故か個別ページでLightboxが利かな
Thickbox導入
最近流行の画像をフォーカスさせて見せるスクリプトを導入。Light Boxにしようかな？と思ったけど何となくThickboxの方をチョイスしてみた。 使用方法は簡単でこちらのサイトのDownload This Exampleからファイルをダウンロード。中のglobal.cssとcircle_animation.gif