Category JavaScript Archive

JavaScriptで前ページから受け取ったパラメータ先へリダイレクトする

JavaScriptで前ページから受け取ったパラメータ先へリダイレクトする

とあるページのリンクをクリックした場合で別ページへ飛ぶことを明示させる必要がったので、JavaScriptを使って数秒後にリダイレクト、秒数カウント、念の為にクリックでも飛べるようにしました。

Read more

JavaScriptでNEWマークを自動的に追加する

JavaScriptでNEWマークを自動的に追加する

個人的にはNEWマークなんていらないでしょと思うのですが、まだまだ更新したらNEWマークつけてよなんて事はよく言われるのでは無いでしょうか?しかもいつまでNEWマークつけてんの?3日たったら消してよなんて言われることも多いのでは無いでしょうか(苦)?
JavaScriptのDateオブジェクトを使えば簡単に自動化出来ます。

Read more

config.rbを使わずにGruntfile側でcompassのコンパイルを制御する

config.rbを使わずにGruntfile側でcompassのコンパイルを制御する

CompassのコンパイルにGrunt.jsでWatchするケースは多々あると思います。その際にconfig.rbとGruntfile.coffeeに分けていたのですが、どうせなら設定ファイルは少ないほうが良いと思い、Gruntfile.coffeeに一本化しました。

Read more

プロキシ環境下でnpm install

プロキシ環境下でnpm install

ようやっとgruntを使い始めました。プロキシ環境化でインストールする際にはまったのでメモしておくことにしました。

Read more

jQuery スクロールに追従するサイドバー

jQuery スクロールに追従するサイドバー

最近はあまり見なくなりましたが、スクロールに追従(スクロールしても固定)するサイドバーをjQueryで書く案件があったのでブログの記事にしておきます。

Read more

jQueryタブプラグインでリンク元にパラメータを与えて開くタブを制御する

特定のタブが開いている状態でリンクをさせたい時は無いでしょうか?例えば3番目のタブがアクティブになっている状態に...などです。 4回に渡ってタブプラグインを改修していきましたが、今回はURLにパラメータを付けて特定のタブが開いた状態へリンクを貼れるように改修いたしました。(正確には書いてもらった...) 詳しい解説は

Read more

jQueryタブプラグインで最初に表示されるタブを選択出来るようにする

jQueryを使ったタブメニューの第4回目です。(しつこい) 前回はjQuery Cookie プラグインを使ってタブの表示状態を保持するように改修しました。 今回は最初に表示されるタブを選択出来るように改修します。

Read more

指定した秒数ごとに画像がスライドするカルーセル

jQueryを使ったカルーセルプラグインはたくさんあるのであまり困る事は無いと思いますが、試しに自分で作ってみたので2回に分けてカルーセルの作り方を記事にします。 1回目は指定した秒数ごとに画像がスライドする無限ループのカルーセルを作ります。2回目は無限ループに加え、ボタンを画像分用意し、クリックするとボタンに対応した

Read more

jQueryを使ってタブメニュープラグインを作る(Cookie Version)

jQueryを使ったタブメニューの第3回目です。 前回はタブメニューを使い回したり、1ページ内で複数のタブに対応させるためにプラグイン化するという記事を書きました。今回はこのタブの状態をリロード時や、他のページから戻ってきた時にタブの状態を維持するように改造します。 タブの状態を維持するにはCookieを使いますが、j

Read more

HTML5のplaceholder的なjQueryプラグイン

ずいぶんと昔に書いたプラグインですが、今更ながらブログの記事に書いてみます。 HTML5では追加になったplaceholder属性は、フォームに予めテキストを表示させてアクセシビリティを上げてくれる属性です。主要なブラウザは(FF3.6以下は除く)対応していますが、案の定IE6/7/8/9は対応していません。なのでIE

Read more

jQueryを使ってタブメニュープラグインを作る

前回はjQueryを使ってタブメニューのインターフェイスを作成しましたが、汎用的に利用するにはプラグイン化すると便利です。プラグイン化するとプラグインを呼び出す際のオプションを設定出来るので、liやdivのクラス名を変更した際にも対応出来ます。 今回は前回のコードを参考にプラグイン化して行きます。

Read more

jQueryを使ってタブメニューを作る

ウェブサイトで多くの要素を省スペースで表示するのに役立つタブメニューは汎用的に使えて実用的なUIです。このタブメニューのインターフェイスはjQueryを利用すると簡単に実装出来ます。 今回はタブメニューを実装するまでを解説していきます。また、1ページ内で複数のタブを実装するにはプラグインの形式にすると便利ですので、最

Read more

任意の2つのバナーを表示するjQuery Random Banners

n個のバナー画像の中から任意の2個のバナーを表示させるjQueryプラグインを考えてみました。 仕様としては、HTML上には全てのバナーを非表示で記述し、任意の2個を表示、バナーを追加しても対応出来る(3個でも4個でも10個でも任意の2個のバナーを表示)と言う仕様です。

Read more

jQueryを利用したソーシャルサービスボタン生成プラグイン

TwitterやFacebookを初めとして各種ソーシャルサービス(SNS)が公式でコンテンツをシェアする手段を公開しています。自分のブログにこれらのシェアボタンを利用している人は多いと思いますが、TwitterやFacebookなどは公式のソースを利用するとボタン画像が公式のものになってしまいます。今回はオリジナル

Read more

CSS3/jQueryのnth-child()を利用したカラムレイアウト

商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。 当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマー

Read more

Google Analytics 非同期トラッキングコード メモ

Google Analyticsの自分で良く使うコードをメモしておきます。(非同期トラッキングコード) 通常のトラッキングコード var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); _gaq.push(['_trackPageview']

Read more

jQueryを使ったアイコン付加プラグイン(pdf,doc,xls,zip対応版)

以前にポストしたブログ記事「jQueryを使ったPDFアイコン付加プラグイン」ですが、今回はPDFファイルだけでなく、Word,Excel,ZIPに対応させたものを作ってみました。 今回も折り返した時にIE6/IE7でアイコンの表示がずれるバグに対応させるためspanタグを挿入し、after, beforeのパラメータ

Read more

Google Maps API jQuery Pluginを書いてみた

Google Maps API jQuery Pluginを書いてみた

Google Maps APIのバージョン2は利用していましたが、今さらながらバージョン3がリリースされていたことに気づきました。バージョン3からはAPIキーを取得せずに使えるようになっているので、さらに敷居が低くなりました。 バージョン3からはGPSセンサーを利用出来るようになっていて、最初のコードを呼び出す時の引数

Read more

Thickboxで読み込んだHTMLからウィンドウを閉じる

ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか? ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リ

Read more

jQueryで複数のCSSプロパティを記述する書式

これもいつも忘れるのでメモ $('#hoge').css({'display' : 'block', 'margin-bottom' : '0.5em'}); プロパティと値は:(コロン)で区切り、プロパティとプロパティは,(カンマ)で区切る。プロパティ同士は{}(ブレス)で囲む。

Read more

jQuery (X)HTML操作のメモ1

いつも忘れるので自分用にメモ prepend() 指定した要素内部の先頭にHTMLを挿入 $('p').prepend('<strong>追加テキスト</strong>'); append() 指定した要素内部の最後にHTMLを挿入 $('p').append('<strong>追

Read more

jQueryを使ってセレクトボックスで選択したoption要素のテキストを全て表示する

先日、Webデザイナーの集会で嘘くさい?jQueryの基礎みたいなお話をしたのですが、その時にこのような質問が出ました。 複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか? そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか? View Demo

Read more

jQueryを使ったブラウザ分岐

Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。 body { font-size: 100%; } * html body { font-size: 82%; } /* fo

Read more

DD_belatedPNGを利用してIE6で透過pngを使う

これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは!と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。 IE PNG FixのAlpha版もbackground-repea

Read more

jQueryを使ったPDFアイコン付加プラグイン

リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。 CSS Code a.pd

Read more

jQueryを使って検索ボックスをデザイン

jQuery(とCSS)を使って検索ボックスをデザインしてみました。 View Demo jQueryを使わず、単純にCSSを使うだけでも良かったのですがjQueryを使った理由は以下の通りです。 CSS有効で画像をオフにしたら何も表示されなかった submitボタンの背景に画像を使用するため、valueの値を空にしな

Read more

シンプルなアコーディオン修正コード

もっと簡単なコードで書けますね。クリックした要素のindexとマッチしたdivを開閉するって方法です。 $(function() { var targetElem = $("div#simpleAccordion div"); targetElem.hide(); $("div#simpleAccordion

Read more

jQueryを使って超シンプルなアコーディオンを作る

jQueryを使った超シンプルなアコーディオンを作ってみました。#simpleAccordionを与えたdivの子要素であるh2をクリックするとその直後のdiv要素が開くと言うものです。

Read more

iTunes Store風インターフェイスを実装するJS Coda-Slider

iTunes StoreのNew ReleaseWhat's Hotなどの部分で使われているインターフェイスは省スペースで多くの情報を提供出来るクールで優れたインターフェイスですよね。色々なJavaScriptライブラリが公開されていますが、その中でもjQueryを使ったライブラリであるCoda-Sliderを紹介しま

Read more

透過pngをロールオーバーさせる

この2〜3日、透過pngを大量に使うデザインのコーディングを行っていましたが、その中で困ったのがIE6で透過pngがロールオーバーしてくれないこと。 様々なライブラリを試したけれどもやっぱりロールオーバーしません。ところが唯一ロールオーバーに対応していたのがユンサンが配布しているiepngfix.jsのバージョン1.

Read more

jQuery Plugins IE Png fixでIE6に透過pngを適用

IE6で透過pngを表示させるのにユンサンのiepngfix.jsを良く使います。しかし最近jQueryを使用してサイトを構築するケースが増えたため、jQueryの透過pngをIE6に対応させるプラグインのIE Png fixを試してみました。 使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用さ

Read more

fixed.js

昨日某ブログの管理人さんとの飲み会の席で「誰もfixed.jsの事を話題にしないのは何故だ?」なんて事を言われました。 fixed.jsはIE6でposition: fixed;を使う事を可能にするライブラリで、僕の頭の中にはposition: fixed;を使う事自体頭になく特に気にした事はなかったのです。 つい先日

Read more

画像のエッジ処理をするcorner.js

class属性を与えるだけで画像のエッジにドロップシャドウやインナーシャドウ、はたまた角丸を与えてくれるJavascriptライブラリcorner.js。 便利なのが角丸+ドロップシャドウ、インナーシャドウ+ドロップシャドウなど複合して使えるところ。 ただ大きな問題がWindows IE6にもIE7にも対応してないと

Read more

アルファチャンネルをもったpngを使う

IE7で正式にサポートされた24bit png。今年はこのpngを使ったサイトが流行しつつあるけど、このアルファチャンネルを持った24bit pngをIE6以前で使うにはアルファイメージローダーというややっこしい記述をする必要があった。しかもアルファイメージローダーを使用した要素内にリンクがあった場合、リンクが効かない

Read more

続 Lightbox JS

先日のエントリーで個別アーカイブページでLightbox JSが動作しないと書きましたが、いろいろなことが起こるのやすなおさんが教えてくれた小粋空間のエントリーをよーく読んだら解決いたしました(苦笑) その内容と言うものはbodyに記述されたonloadイベントハンドラがLightbox JSと競合してしまう問題でした

Read more

Lightbox JS

7月7日のエントリーでThickboxを導入したけれど、Livedoorブログから移行するにあたってThickboxからLightbox JSに変更することにしました。理由は単純、Thickboxは設定するCSSが多かったからです(苦)。 Lightboxにして一つ問題が発生。何故か個別ページでLightboxが利かな

Read more

Thickbox導入

最近流行の画像をフォーカスさせて見せるスクリプトを導入。Light Boxにしようかな?と思ったけど何となくThickboxの方をチョイスしてみた。 使用方法は簡単でこちらのサイトのDownload This Exampleからファイルをダウンロード。中のglobal.cssとcircle_animation.gif

Read more