[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
Post by @geckotang
[Frontrend Vol.4 powered by CyberAgent, Inc.](http://atnd.org/events/35720)に行って来ました。 とてもテストについてのお話を聞けたのでとても楽しかったです。 誤字、間違いなどありましたら教えてください。 ※アンケートへのリンクを削除しました。 # GUIのお話 ## Chrome Dev toolsのお話 * Chrome DevTools.next http://www.slideshare.net/yoshikawa_t/chrome-devtoolsnext * ショートカット便利 ### Break Point XHRとかで使う ### Timeline ボトルネックな部分調べるのが便利 ## Chromeの隠しURL的なの chrome://chrome-urls で一覧できる ## Charles デバッ
吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」:phpspot開発日誌
Toolbar.js - jQuery plugin to create tooltip style toobars 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 次のように、初期化位置にカーソルを合わせるとポップアップするツールバーを設定でき、そこからアクションを選べます。 ありそうであまり無かったプラグインかもしれませんね。 縦バージョンにもできます これは便利に使えそう 関連エントリ UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「Par
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」
twitter facebook hatena google pocket Pinterestが流行ってからタイル状に配置するデザインが増えました。 新はてブのように目線がばらつくという指摘もありますが、画像だけを見せるのであれば有効な手段なのではないでしょうか。 今回紹介する「stalactite : A jQuery plugin」では、画像だけでなく、iframeなども徐々に読み込んでいくというエフェクトもかけてくれます。 sponsors 使用方法 stalactite : A jQuery pluginからファイルをダウンロード。 下記のようにJavaScriptを記述します。 <script type="text/javascript" src="/test/js/jquery-1.8.3.min.js"></script> <script type="text/javascr
[WordPress]これでフッターに重ならない！ ブログのサイドメニューを固定してスクロールに追従させる方法 | NANOKAMO BLOG
photo credit: Eric M Martin via photopin cc どうも@kuroji1987です。 ブログのサイドメニューに、スクロールに追従するメニューを設置いたしました。「オススメ記事」というタイトルで、同じカテゴリの記事をランダムで表示させています。 広告を表示させることもできるのですが、Googleの規約で禁止されているという話なのでやってません。結構やっているブログあるので、もしかしたら大丈夫なのかなぁとも思うのですが……。どうなんでしょうかねｗ ということで、その追従するメニューの設置方法をご紹介します。 フッターにめり込まないメニューがいい スクロールに付いてくるだけならとっても簡単に実装できるのですが、多くのブログがそうであるようにスクロールしきったのち、そのままメニューがフッターにめり込んでしまうという現象が発生します。これが僕はどうしても許せま
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
Sencha Touch 2 vs jQuery Mobile
SenchaUG 勉強会 第2回@東京 での発表資料。 http://www.meetup.com/Japan-Sencha-User-Group/events/81279312/ ネタなので大目に見てやって下さい
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」:phpspot開発日誌
Keypress: A Javascript library for capturing input キーボードイベントを実装する際に単体で使える軽量JSライブラリ「Keypress」 jQuery等に依存せず、簡単に使えるキーボードイベント実装ライブラリ。単体キーだけでなく、複数のキーの組合せや、キーを押した順によってイベントを発動させることができ、とりあえずキーボードショートカットなんかを入れたいという場合に簡単に使えそうです。 ライブラリを使ったイベント実装コードは以下。Shift+Sで発動する関数を設定しています。 keypress.combo("shift s", function() { console.log("You pressed shift and s"); }); 次のような感じで、キーボードを↑↑↓↓〜という感じに順に打ってイベントを発動させることも可能 keypr
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」 - かちびと.net
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
1216彩票-官网平台
Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」:phpspot開発日誌