We value your experience and would love to hear your thoughts. Could you spare just two minutes to fill out a quick survey? Your feedback helps us make bxSlider even better! Thank you for your support 🤗
Great News! We’re reinventing FooTable to bring you a responsive table that’s better than ever! FooTable will be a WordPress Table Plugin, which will allow you to add responsive tables to your pages and posts. We want to create the tables that you need, like pricing and comparison table, or data tables. We want to include features that will make your life simpler. This might be versatile styling o
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
jScrollPaneの使用方法をご紹介しています。 jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 スクロールバーのスタイル オプション デモ 次のデモは、CSSでbackground-colorとpadding、borderを指定しています。 スクロールはデフォルトのものです。 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text te
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
pjax - jquery plugin 10 pjaxはデータの読み込みと描画の冗長部分を省略することで非常に高速かつ低コストなページ移動を実現する、HTML5で実装される次期標準ブラウジング機能です。 pjaxはこのプラグインを使用することでサーバーに手を加えることなく簡単に導入できます。 最新版のダウンロード プラグインの最新版はGitHubで公開していますのでそちらからダウンロードしてください。 GitHub:https://github.com/falsandtru/jquery.pjax.js ファイル:https://raw.github.com/falsandtru/jquery.pjax.js/master/jquery.pjax.js 概要 サイト内のページ移動において指定したHTML要素(異なるコンテンツを持つ領域)のみ更新することでページ移動を高速化します。ajax
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 pjaxとは pjaxはpushStateとajaxを組み合わせた造語(pushState + ajax = pjax)となります。 pushStateはhtml5に新実装されたHistory APIのひとつで、javascriptからブラウザの履歴に直接挿し込む為に用意されているメソッドとなります。 詳しい詳細はこちらの記事を参考によろしくお願い致します。 HTML5 History APIについて 再びPjaxに関してなんですが、ajaxを用いて表示内容を書き換え、さらにpushStateを用いてそれに対応するURLへと置き換えhistoryも辿れるようにする技術のことです。 ajaxによるパフォーマンス向上が期待できる他、よく使用されている#!(hashbang)を
2012年6月4日 – jQuery Rain | jquery-handsontable @ GitHub 一見普通のテーブルだけどExcel風に 使えるjQueryプラグイン「Handsontable」。 Excelのテーブル風ウィジェットは色々 ありますがリッチすぎて重いようなものは使いづらかったりします。 2013年1月10日 – ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれる jQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下の テーブルがあったとします プラグインで初期化すれば、ソータブル、 ..
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい!ってよくありますよね。 たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・ そんな時に使えるのが「Handsontable」です。 紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・ なので、簡単な使い方をメモ代わりに書いておきたいと思います。 まず、Githubから「Handsontable」をDLします。ちなみに、公式サイトはこちら。 単純に使うだけなら結構カンタンで、公式サイトにもあります。 DLしたファイルから「jquery.handsont
jQuery Vortex エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 製品画像などを動きをつけて回転させるなどの用途に使えそうです。 スピードの調整ができたり、奥行きなんかもパラメータで自由に調整できるので、平面的に回転させることもできるっぽい 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」
問題 $(document).ready() と $(window).load() は何か違うの? 答え 違う。 readyはDOMが構築されたら実行される。 $(document).ready(function() { // Handler for .ready() called. }); これは次のよく見かける省略形と同じ。 $(function() { // Handler for .ready() called. }); loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。 $(window).load(function () { // run code }); そのため $(document).ready(function() { // 画面にある画像の大きさを取得したいよ → できません× }); $(window).load(function(
How does it work? Like this: <script src="jquery.js"></script> <script src="lake.js"></script> <script> $(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); </script> ... <img id="lake-img" src="lake.png" style="display: none;"/> Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. Th
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
jQuery Floater Plugin ? Examples Design Chemical Lab 面白いフローティングナビゲーションを実装できる「jQuery Floater」 特定のブロックをページの特定の位置に配置し、スクロールさせてもアニメーションしながら位置を記憶することができます。 要素をバウンドさせながらもとの位置に戻す効果などもあって使いようによってはなかなか面白い使い方ができそう ちょっと文章では説明しづらいのでサンプルページを見てみてください サンプルページにサンプルと一緒にコードが載っているので実装は簡単にできそうです。 関連エントリ テーブルをちょっとだけ使いやすくしてくれるjQueryプラグイン「rbTable」 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 Yahoo!Incのお天気ウィジェット実装jQueryプラグ
TransformJS - 3D and 2D Transforms for jQuery 2Dや3Dの変形アニメーションを実現できる「TransformJS」 例えば、サムネイル画像をクリックすると画像を立体的に回転させながら拡大するというようなことが出来ます。 クルクル回転しながら拡大 jQueryのanimateメソッドの引数パラメータを調整するだけでアニメーションを調整できるみたいです 関連エントリ カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 カーソルを合わせた際に背景画像をアニメーションさせるメニュー実装jQueryデモ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 CSS3なキーフレームアニメーションのデモ
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」 2011年09月29日- Shuffle Letters Effect: a jQuery Plugin | Tutorialzine 文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」。 Flashサイトなんかであったりするあのエフェクト。ちょっと言葉では説明しづらいんですが、別の文字からa,b,c という感じでアニメーションさせつつ切り替えながら本来表示すべき文字にするというモノです。 デモページ - ページ下部に文字を入れてEnterキー ド派手ってわけじゃないんですが、なんかカッコイイですよね。 タイトル文字なんかをアニメーションさせれば単なるテキストでもインパクトがあります。 次のようにコールするだ
ファイルサイズの大きい画像を多用しているページやアクセスが集中するサイトは、画像の読み込みがレンダリングスピードに影響する割合は少なくありません。なるべく早く表示する為にも画像の読み込みは工夫したいとこですよね。 そこで、スクロールに合わせて画像を表示するjQuery「LazyLoad with jQuery」を試しに使ってみました。このブログにはあまり必要ないかなと思ったんですが、他の管理サイトで必要なので備忘録として初心者向けに設定方法を書き残しておきます。もしかしたらこのブログからは外すかもしれませんが。 jQueryをダウンロード まず、以下の2つのスクリプトをダウンロードします。 jQuery (jquery.js) Lazy Load Plugin for jQuery (jquery.lazyload.js) ダウンロードしたスクリプトの拡張子を変更するやり方も、一応書いてお
Test: jQuery.path animation ten arcs Start Plot ten beziers Start Plot custom path: sine wave Start Plot links Javascript file Project Page Feedback
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く