なかなか良さそうだったので備忘録。 input要素に入力したテキストが長く なると、位置の把握やテキストの量 が把握できません。これが地味にス トレスな事もあります。これを解決 する、というスクリプトです。 input要素に長いテキストが入力されてる際に、カーソル位置をバーで明示し、大まかな長さも可視化します。 Smart Input Field Position Indicator 説明が下手で伝わってない気がするので以下のサンプルをご確認下さい。 Sample value属性に書いてますが、入力したテキストでもバーは表示されます。デモのアニメーションやバーの色はCSSで施行しています。余分なDOM要素を追加する必要が無いのはいいですね。 $('.foo').inputIndicator({bgPos:'31px'});​本体とプラグインを読み込んで初期化します。あとはbgPosというオ

簡単なクイズコンテンツを作れる、というjQueryプラグインのご紹介です。クイズの回答次第で分岐する、みたいな細かい設定はできませんが、これはこれでシンプルでいいかも。 1問1問回答して進めていくような、簡易的なクイズを作れる、というスクリプトです。 選択肢を選んで進むと別の選択肢が出て正解/不正解を表示させる、という流れ。最後に正解数がとメッセージが出ます。 <script src="jquery-1.7.min.js"></script> <script src="slickQuiz-config.js"></script> <script src="slickQuiz.js"></script>回答やメッセージはJSONを使うみたいです。 $('#foo').slickQuiz();あとはクイズを表示させる場所を指定すれば完了 何かで使えるかも。という事で備忘録でした。 SlickQ

iPhoneやiPadのホーム画面に作れるフォルダっぽい動作のコンテンツを実装出来る、というスクリプト。動作はかなり再現出来てる気がします。 iOSのホーム画面に作られるフォルダっぽいのを作る、というjQueryプラグインです。 ※ドラッグで動かせる、というのは残念ながら付いてないです。 フォルダをクリックすると開く的なやつです。 ↑ 開いた箇所はハイライトされる コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.app-folders.js"></script>本体とライブラリｗ読み込む $('.foo').appFolders({ opacity: .2, // セレクト

HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。 自分自身がWebカメラに対応したデバイスを現在手元に持ってないので動作テストしてないです。あとで検証しますが、現時点ではあくまで備忘録ですのでその程度の記事という事でご了承下さい。 当方の端末では対応して無いのでこのようにエラーが表示されてしまいますが・・編集も可能と言うのは凄いです。 実際はこのようになると思います。 getUserMediaに対応したブラウザならJavaScriptでWebカメラにアクセス可能です。マークアップはvideoとcanvasで実装出来ると思いますが、Photobooth.jsは、+編集が出来ます。 ご興味のあるかたは是非試してみてはいかがでしょうか。尚、実装テストしていないので詳細は割愛いたします。正

Metroライクなデザインに変更 できるTwitter Bootstrapのテ ーマ・Cosmoのご紹介です。 Bootstrapはレイアウトが上手く 出来ているので見た目を変える だけで十分かもしれないですね。 MetroっぽいTwitter Bootstrap用テーマです。

LocalStorageを使用したモックアップ の作成ツールのご紹介。シンプルで 軽量なので使いやすいです。見やすい し、D&Dで操作出来ます。手軽で使い やすいのは素敵ですね。プレゼン用 なんかにもいいかもしれません。 シンプルなモックアップ作成ツール。githubでもソースが公開されています。Backbone.jsやLocalStorageで作ったそうです。 左のエリアからシェイプやフォームのパーツをドラッグして方眼紙の箇所にドロップする、という普通の流れで作成します。マウスでリサイズやテキストの変更も容易に行えます。 日本語も問題なし。要素を選択すれば下部で変更出来る様になっています。 エクスポートはPNGで発行されます。自分好みにカスタマイズして使うのも良いのでは。 mockup-designer

長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日本語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSSのtext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttruncat

画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("

Toutubeで作ったプレイリストを スライドギャラリーにする、とい うjQueryのプラグイン。まだ使う 予定は無いけど便利そうだったの で。プレイリストを読み込むので、 動画を追加したい場合はリストに 動画を追加します。 プレイリストをJSONで取得してサムネイルを表示、スライダー化したものになります。スライドさせると自動で再生してくれます。 別のカルーセルプラグイン(carousel plugin)を併用するみたいです。 Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="carousel.js"></script> <script

フォームのlavel要素をHTML5の placeholder属性にする、という 方法。jQueryを使用します。 フォームが固定されたCMSのスマ フォサイトを作成するにあたり、 省スペース化したいのでこの方法 を使いました。 フォームのマークアップが固定のCMSのスマフォサイトでフォーム省スペース化に迫られて、label要素をplaceholder属性にする事で落ち着きました。折角なのでメモ。 Sample label要素をplaceholder属性に当ててdisplay:none;しました。 $("input").each(function(){ $(this).attr("placeholder", $('label[for='+ $(this).attr('id') +']').text()); });labelのfor属性とマッチするid名のついたinput要素にplaceho

ご連絡頂いたのでご紹介。人気の Twitter Bootstrapのデザインを、 kulerを使ってサクッと作り出せ るWebサービスです。国産なので 英語が苦手な方でも安心して使用 出来ると思います。 国産のTwitter Bootstrap関連ツールは個人的に見るのは初めてです。Adobe kulerのカラースキームを使ってテーマを作成出来ますよ。

いい感じのエフェクトだったので メモ。画像だけでなく、テキスト なども含んだ要素全体にblur効果 を与えられる、というjQueryの プラグインです。なかなか面白い。 要素に丸ごとブラー効果(ブレのエフェクト)を与えるスクリプト、Foggyです。jQueryが必要です。 こんな感じでブラー効果をテキストや画像に与えることが出来ます。 以下サンプル。サポートブラウザはIE8以上、Firefox、Safari、Chrome等との事。 Sample 一応IE7でも見ましたが、ブラー効果は与えられる事は与えられるみたいです。↓ コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type='text/jav

Twitter Bootstrap用のテーマを 作成出来る、というジェネレーター 的なもの。それだけでなく、作成 しながらスマフォやタブレットで の表示状態も確認出来ます。 Twitter Bootstrapのデザイン作成ツールです。Twitter BootstrapはレスポンシブWebデザインに対応していますので、このジェネレーターでもスマフォやタブレットデバイスのサイズで表示確認が出来る様になっています。 確認しながら作成できます。リンク色とか背景色とかボタンのカラーとか。使い方はよくあるジェネレーターと相違ないので割愛します。 簡易的なものではありますが、上記のようにスマフォやタブレットデバイスのウィンドウサイズにリサイズして表示を確認する事が出来ます。 コードは通常のCSSだけでなくLESS形式でも発行可能です。 もう少し使い勝手が良くなると嬉しい。今後に期待です。Twitter

フィルタリング可能なGoogleマップ を実装するjQueryのライブラリです。 便利そうだったのでメモがてらご 紹介。Googleマップも工夫次第で 自由が利くようになるのでやはり 重宝しますね。 フィルタリング可能なGoogleマップを実装するプラグインです。 検索やフィルタリングが可能なGoogleマップを実装できる、というプラグイン。Fusion Tables、API、Bootstrap等が併用されています。 Fusion Tablesのセッティングが若干面倒そうです。この辺はドキュメントを参照して下さい。 時間無いので今日はこの辺で。 Searchable Map

デートピッカーを実装するjQuery プラグイン・jQuery.minicalです。 シンプルさと軽量さが特徴です。 jQuery UIを使うほどでもないよう な場合はこういった軽量でシンプル な物が使いやすいですね。 デートピッカー実装ライブラリです。 軽量というのが売りのようで、gzipで4KBほどに圧縮できるそうです。動作もシンプルにカレンダーをポップアップ表示させるだけのもの。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src='jquery.minical.js' type='text/javascript'></script>ライブラリを読み込んで以下のようにセッティング。 $(

ファビコンに動的な円グラフを実装 するJavaScriptライブラリ・Piecon のご紹介。ユニークなライブラリで すね。以前、ファビコンでテトリス を実装するライブラリを見かけまし たけど、今後増えるのかな。 なかなか面白い。ファビコンに動的な円グラフを表示させるスクリプトです。非依存型なのでPiecon単体で動作します。 ファビコンとして表示された円グラフは時間と共に変化させる事が出来ます。 Sample コードPiecon.setOptions({ color: '#ff0084', // グラフの色 background: '#bbb', // グラフの空部分(empty)の色 shadow: '#fff', // 外側の円のボーダー色 fallback: false // タイトルバーのパーセンテージの切り替え設定 });ライブラリを読み込んで上記のようにセッティングします。

シンプルなパララックス効果 を少しのjQueryコードで作る というTips。プラグイン化さ れていますのでレイヤーの追加 も簡単です。 個人的にはあまり見かけなくなった印象のパララックス効果のあるサイトですが、まだ需要はあるみたいです。 今日は単純なパララックス効果のあるコンテンツを少しのjQueryコードで作るTipsです。 Sample マウスに合わせてレイヤーが動きます。 (function($) { $.fn.paralax = function(container, speed) { var $window = container, t = speed || 1, $object = this; return $window.on("mousemove resize", function(e) { $object.css({ top: -(e.pageY - $window.h

コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop

画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード幅が1024px以下なら何も読み込まないそれ以外はJQMのCSSをロードこう設定すれば、601px～1024

よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script>jQuery本体とプラグインを読み込みます。 $(do