この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
【jQuery】iframeの高さを取得し自動調整するスクリプト（Microsoft Edgeにも対応）
概要 ▶ jQueryでiframeの高さを自動的に設定してくれるスクリプトを紹介。Microsoft Edge対策も。本ページはプロモーションが含まれている場合があります Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。 このiframeは高さが決まった高さなら、CSSで高さ（height）を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。 そこで、JavaScript（jQuery）を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。 ●HTMLで準備すること 高さを自動調整したいiframeのclassに「autoHeight」を付けてく
【jQuery】高機能スライダーSlider Proで画像のクリックでリンク先に飛ばない場合の対処方法
概要 ▶ jQueryを使ったスライダー「Slider Pro」の画像にリンクを付けるとクリックしてもChromeでは効かない場合の対策を解説。 画像をウェブページ上でスライドのように切り替えるスクリプトは、いわゆるスライダーと呼ばれます。 ●高機能スライダースクリプト「Slider Pro」 このスライダーを使うためのスクリプトとして有名で高機能なスクリプトに「Slider Pro」があります。 Slider ProはjQueryと一緒にロードして使うタイプのスライダーのスクリプトです。 画像出典：Slider Pro - Elegant and Professional Sliders Webサイト制作に役立つ情報を発信しているサイト「コリス（Coliss）」でも紹介されていましたね。 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レス
jQuery 3.0 Final Released! | Official jQuery Blog
jQuery 3.0 is now released! This version has been in the works since October 2014. We set out to create a slimmer, faster version of jQuery (with backwards compatibility in mind). We’ve removed all of the old IE workarounds and taken advantage of some of the more modern web APIs where it made sense. It is a continuation of the 2.x branch, but with a few breaking changes that we felt were long over
jQueryの .on('hover',function(){...}) ではhoverのイベントが動作しないのはなぜ？
概要 ▶ .onのイベントを指定する引数部分に「hover」と書いても意図した動作にはなりません。それはhover自体が複数のイベントをまとめて書いた省略形（エイリアス）だからです。本ページはプロモーションが含まれている場合があります 画像出典：.hover()（jQuery API Documentation） ●jQuery 1.7以降の.onを使っていますか？jQueryの1.7以降では、.onという要素にイベントを追加する命令（メソッド）が使えるようになっています。今まで.bindで書いていたものから置き換えて使えるようです。 といっても私は.bindすら使っていませんでしたが…（.hover()や.click()だけで事足りていたので…）。 The .on() method attaches event handlers to the currently selected set
jQueryのlightboxプラグイン「prettyPhoto」のリンクに毎回「rel="prettyPhoto"」と書きたくない場合の解決方法
概要 ▶ jQueryで動作するLightboxプログラムのprettyPhotoで画像拡大のリンクを作る時に楽をするためのコードを紹介します。本ページはプロモーションが含まれている場合があります このブログは画像拡大表示の動作（lightbox）には prettyPhoto というjQueryのプログラムを使用しています。 複数の画像をグループとして表示したり、YouTubeやvimeoの動画を表示することができたりと高機能のlightboxプログラムです。（下の画像もPCで見た場合、クリックするとprettyPhotoのlightboxで表示されます） 画像出典：jQuery lightbox（No Margin For Errors） このprettyPhotoですが、トップページのサンプルのページに以下の様に書いてあります。 Create a link (<a href="#">)
window.jQuery || document.write('＜script src="●●"＞＜\/script＞') という書き方は何なのかをFirebugで調べてみた
概要 ▶ window.jQuery || document.write('') という書き方についてFirebugを使って検証しながら理解をしてみました。本ページはプロモーションが含まれている場合があります 以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。 モヤモヤを抱えたままだったので自分なりに考えてみました。 今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。（インストールはこちらから） Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。 画像出典：Firebug この機能を使って「window.jQuery || document.write(
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
見た目がFacebookのLikeboxっぽいTwitterウィジェットを作成出来るjQueryプラグイン・Twitter Follow Box - かちびと.net
使いそうだったので備忘録。Facebook で恐らく最も利用されてると思われる ソーシャルプラグインのLikeboxと似た ようなものを、Twitterアカウントで 作成するjQueryプラグインです。デザ イン的にもバランスが取れるので覚え ておいて損は無いのでは。 と言うわけでLikeboxライクなTwitterウィジェットです。自身のアカウント、フォローボタンと、フォロワーさんのアイコンを表示する事が出来ます。 よく見かけるアレのTwitter版です。以下サンプル。 Sample 一部日本語に変えました。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="jquery.follow
jQuery で checkbox が check されてるか調べる - dogmap.jp
Twitter で、@masaru_b_cl さんが、「jQueryでチェックボックスがチェックされているかどうかを取るのって、 var checked = $("#checkboxid").attr("checked"); しか方法ないのか・・・」と言ってました。 jQuery オブジェクトには .checked() とかってメソッドがありません。 なので checkbox がチェックされてるかどうかは、通常以下のようにして取得します。 checked = $("#checkboxid").attr("checked"); checked = $("#checkboxid").get(0).checked; ただ、これだとあまり直感的じゃないですね。 checked = $("#checkboxid").checked(); のようにして、取得できるとカッコイイです。 本当にできないんで
jQueryでHTML5の独自データ属性（data Attributes）を扱う
jQueryでHTML5の独自データ属性（data Attributes）を扱う HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 投稿日2011年07月01日 更新日2011年07月01日 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッドの
jQueryでscrollToを使うときの注意点 - NoteBook
Categories JavaScript (3) CSS (2) SOY CMS (4) Mac (5) Google (4) iPhone (5) Windows (3) Firefox (2) Photoshop (1) Prallels Desktop for Mac (3) jQuery (3) アプリケーション (5) Archives April 2010 (4) February 2010 (7) January 2010 (3) December 2009 (2) November 2009 (1) October 2009 (1) September 2009 (5) March 2009 (1) February 2009 (1) January 2009 (1) Blog Post IEのFilterの検証(2010/04/22) Photo
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
無職のプログラミング jQueryで、異なる要素のアニメーションを順番に実行する 改
が要素の数だけ並行して実行されることになる。 監視するタイマーが多いだけでも問題なのだが、 CPU使用率が高くなるなどでJavaScriptの処理が不安定になると、要素のdelay時間にバラつきが生じ、各要素のfadeOut/fadeInが等間隔に見えなくなる。 この問題の解決方法として、「jQueryのキューを使用して異なる要素のアニメーション実行順序を制御する方法」を考えた。 アニメーションを実行する要素の例として10個のboxを作る。 更に、キューを作成するダミー要素を一つ作る。 // boxを10個作成 (boxのcssは略) var $div = $("#main"); // htmlに記述している親ノード var $box; for(var i=0;i<10;i++){ $box = $("<div/>").addClass("box").attr("id","id" + (
jQueryで作るスライドするローテーションバナー
jQueryで作るスライドするローテーションバナー ちょっと前まではコーポレートサイトのトップページによくあるローテーションバナー（というかスライドショー？）はFlashで作るのが当たり前でしたが、最近ではjavascriptで作成しているものが増えてきましたね。 ということでjQueryを使用してシンプルなスライドタイプのローテーションバナーを作成します。 投稿日2010年09月15日 更新日2011年04月03日 html+cssの作成 bannerというidを付けたdivにリストでマークアップした表示する画像を入れます。 画像は全て同じサイズの方が良いでしょう。ここでは320×213の画像を4枚用意しました。 html <div id="banner"> <ul> <li><a href="img/01.jpg"><img src="img/01.jpg" width="320" h
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Smoke
bootstrap/CHANGELOG.md at master · twbs/bootstrap · GitHub
Image Zoom Tour with jQuery