Layout Balancerはイメージギャラリー等でよく使われているグリッドレイアウトで、アイテムの数に関係なく幅を揃えてくれるスクリプトです。jQueryに依存しています。語彙が乏しいのでうまく説明出来ないのでサンプルを上に用意しました。動的に数が変わるようなコンテンツでも空の部分が出ないようにしたい、という目的のようですね。コードもシンプルで良い感じです。 Layout Balancer
イメージギャラリー等で使うようなグリッドレイアウトでアイテムの数に関係なく幅を揃えてくれるスクリプト・「Layout Balancer」
Layout Balancerはイメージギャラリー等でよく使われているグリッドレイアウトで、アイテムの数に関係なく幅を揃えてくれるスクリプトです。jQueryに依存しています。語彙が乏しいのでうまく説明出来ないのでサンプルを上に用意しました。動的に数が変わるようなコンテンツでも空の部分が出ないようにしたい、という目的のようですね。コードもシンプルで良い感じです。 Layout Balancer
jQueryTween - Lightest Tweening Engine for jQuery
jQueryTween - Lightest Tweening Engine for jQuery jQueryTween Welcome to jQueryTween - Lightest Tweening Engine for jQuery jQueryTween!! The Lightest Tweening Engine for jQuery This plugin is a bridge to tween.js and aims to drastically simplify your work. Each script does what it does best, for high performance hardware accelerated animations. Github Tween.js My Work Demo Developer Friendly Using
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
jQueryでページトップへ戻るボタンに動きをつけよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ ここ最近新しいゲームにピンと来ず、PS3のアーカイブスからFF8をDLしてプレイしております。スコール尊いです( ˘ω˘)✌ どうでもいいですね✌(´ʘ‿ʘ｀)✌ 今回はjQueryメソッドanimateとjQuery.Deferredを駆使して、動きのある「トップへ戻る」ボタンを作ってみました。 こちらの実装方法をご紹介します( ˘ω˘)☝ HTMLとCSSの準備 HTML HTMLはこんな感じでございます。通常の状態の#buttonと、変化させた時に表示させる#button_linkを用意しました( ˘ω˘)☝ <footer id="footer"> <a href="#wrapper" id="page_link"> <span id="button"><i></i></span> <span id="button_c
Examples - jQuery Steps ステップ形式のウィザードが作れる「jQuery Steps」
See how beautiful jQuery Steps is and what you can do with it! HTML <div id="example-basic"> <h3>Keyboard</h3> <section> <p>Try the keyboard navigation by clicking arrow left or right!</p> </section> <h3>Effects</h3> <section> <p>Wonderful transition effects.</p> </section> <h3>Pager</h3> <section> <p>The next and previous buttons help you to navigate through your content.</p> </section> </div> Ja
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
![[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/854418a1d6f45d24d878040e9370f59845bb3b0c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091702.png)
ボックスの高さを一番高いものに合わせる
Result jQueryvar maxHeight = 0; //もしdivがmaxHeightの値より大きい場合はdivの高さを全部合わせる $("div").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); //divの高さを取得する $("div").height(maxHeight);cssdiv{ height:auto; width: 70px ; background:#eee; margin:3px; float:left; }html<div>1<br />2<br />3<br />4<br />5</div> <div>div</div> <div>div</div> <div>div</div> <div></div> <div>1<br
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select
複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 動作サンプルです。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="jquery.multiple.select.js"></script>本体とプラグインを読み込みます。 $('#foo').multipleSelect();セレクタにはselect要素を指定します。 また、細かいオプション設定が可能です。詳
Demo • jQuery Feeds
<script type="text/html" id="entryTmpl"> <article class="<!=source!> entry"> <p> <a class="link" href="<!=feedLink!>" title="<!=feedDescription!>"><!=feedTitle!></a> <span class="publishedDate"><!=publishedDate!></span> </p> <p class="author"><!=author!></p> <div class="content"><!=content!></div> </article> </script> $('.feed').feeds({ feeds : { facebook : 'http://www.facebook.com/feeds/page.php?
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
jQueryでajax()の重複実行を回避する方法
jQueryでajax()の重複実行を回避する方法を紹介します。 １．問題点 次のような、ajax()メソッドを使って「http://user-domain/foo.cgi」にアクセスし、実行結果を取得するコードがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function(
[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu
MultiLevel Push Menuの使い方 アイデアの元となっているのは、こちらのデモ。 MULTI-LEVEL PUSH MENU 実装はより簡単に、オプションも豊富に進化しています。 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="multilevelpushmenu.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.multilevelpushmenu.min.js></script> IE8をサポートする際は、Modernizrを加えます。 <script src="//oss.max
複数ボックスを順に表示出来るモーダルウィンドウを実装するスクリプト・vex
複数の要素をモーダルウィンドウとして表示し、順に表示させる事が出来る、というスクリプト。うまく説明できませんので見てもらったほうが早そうですね・・ モーダルウィンドウを実装するスクリプトです。「21世紀のモーダルウィンドウだ！」との事。
[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper Slider Demo - html5beta.com
Multifilter - Sort a table on Multiple inputs. A jQuery plugin from Tommy Palmer.
[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit
Jqueryのfindでand検索or検索 - susan-styleの日記
