サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちは、中村です。jQueryを使ってスクロール量によってイベントを発火させたいケースがそれなりに多いので、サンプルと説明を残しておきます。 追記：scroll系のイベントは発火の回数が著しく多いので、重い処理を入れてしまうとユーザー体験を損なう可能性があります。。もし時間があったら、【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。も合わせて見てもらえたら幸いです。 利用するjQueryメソッド 『scrollTop()』 windowやdocumentなどの要素に対して使えるメソッドです。ページをどれくらいスクロールしたかのスクロール量を測ることができます。 『scroll()』 ブラウザ上でスクロールを行った時に発火するイベントです。スクロール量に応じてイベントを発火させたい場合は『scroll()』を利用して関数を発火させること
jQuery 公式Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
作成：2014/05/7 更新：2014/11/01Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。エンジニア速報はTwitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
仕事上必要だったので、拙筆「webkit系ブラウザ（Chrome/Safari）で両端揃えはできないの？jQueryで検証」のスクリプトを流用して作りました。 簡単な説明 コーディング例justify（両端揃え）cssだと上手くいかない なぜなら、justifyが横幅よりも少ない文字列の右端を揃えるという趣旨ではないからです。 table.company th, table.company td {text-align:justify;text-justify: inter-ideograph; border-right: #ccc 1pxsolid; border-bottom: #ccc 1pxsolid; padding: 10px; } 自作jQueryの場合 table.company2 th, table.company2 td {text-align:just
ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」Webデザインやコーディングの経験を積んでくると、「ユーザーにやさしいWebサイト」といったことを意識するようになると思いますが、今回はそんなユーザーフレンドリーなサイトにするためのjQueryプラグインをまとめた「40 Fresh jQuery Plugins To Make Your Website User Friendly」を紹介したいと思います。 JqueryAlpha Image by Ilker Guller 基本的な機能からフレキシブルデザインに対応したもの、検索候補を出すプラグインなど、かゆい所に手の届くプラグインが揃っています。中でも気になったものをピックアップしたので下記よりご覧く
ページの下までスクロールしたときに何らかの処理を実行する例 $(window).bind("scroll", function() { scrollHeight = $(document).height(); scrollPosition = $(window).height() + $(window).scrollTop(); if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) { //スクロールの位置が下部5%の範囲に来た場合 } else { //それ以外のスクロールの位置の場合 } }); demo ページをある程度下までスクロールしたときに何らかの処理を実行する - デモ 「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。 条件
jQueryを学ぼうと思ってネット検索をしても、色々な情報が出てきてどの情報を参考にすればいいか分からないという経験をした方はいるのではないでしょうか。 特に独学で学ぼうとすると、その壁によくぶつかります。ドットインストールのようなメジャーなサービスも使ったことがなければ、その価値は分かりません。 そこでおすすめなのがプログラミングスクールの活用です。最初に何から学ぶべきかといった説明はもちろんのこと、キャリアプランまで相談に乗ってくれるので、ただ単に学んで終わるということが減らせます。 The post jqueryを効率よく学ぶ方法は？ first appeared onプログラミング学習の窓口.
jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力時にリアルタイムチェックしてくれます。 OKだと青くなります。 カレンダーは選択式です。 チェックボックスなどのデザインがカスタマイズされています。 ドロップダウンも色がついています。 jq-idealformsではステップごとに表示を分けたり、キーボードの入力をリアルタイムにサポートしていたりと便利な機能がたくさんついています。ブラウザはIE8以降の他メジャーなブラウザに対応し、Android
jQuery-menu-aimはAmazonの右上メニューの動作を真似たjQueryライブラリです。 このソフトウェアを見てはじめて気がついたのですが、Amazon.(co.jp|com)の左上にあるメニューはとても面白い動きをしています。一階層目のメニューはマウスオーバーで二階層目の内容がリアルタイムに反映されるのですが、二階層メニューにマウスポインタを動かす際に多少別なメニューに被ったとしても内容が変わりません。それをjQueryで実装したのがjQuery-menu-aimです。 クリックでメニューを表示。 マウスを下に移動すると右側に項目を表示します。 反応はとてもいいです。 通常であれば二階層目の表示反映タイミングを遅らせるようにするか、マウスの動きに過敏に反応して二階層目に移行したら別なメニューの内容を表示してしまった、なんてことになりかねません。縦と横の動きをうまくキャッチする
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qu
リッチなWebアプリケーションに対するニーズの増加に伴い、JavaScriptで十分なパフォーマンスを担保することが難しくなってきています。とりわけ、スマートフォンのような非力なデバイスでは一層シビアなチューニングが求められるでしょう。本セッションでは、もっともポピュラーなJavaScriptライブラリである「jQuery」を中心とした、いくつかのパフォーマンス解決のためのヒントについてご紹介させていただきます。 http://frontrend.github.com/events/04/#pocotan001
当日のスライドでございます。 先月のはじめごろにイベント告知 Frontrend Vol.4で宣伝させていただいたイベントが先々週末に無事おわりました。席数に対して、非常に多数の（300/200人!!）お申し込みをいただきありがたい限りです。 Frontrend Vol.4 powered byCyberAgent, Inc. セッション概要・スライド・デモなどは、↑のサイトにまとまっています。t32k++ 60分そこそこのプレゼンだけで、正確な情報が伝わる/伝えられるとはあんまり思っていないので、ワークショップ系でもない限り「興味の喚起と独学の助け」をモットーにやっております。そのようなご託を含め、今回は先月のCSS Nite LP26でStylus推ししたときとは、また趣の違うふっかけ気味な構成でございました。 動画とデモファイル jQuery to Backbone from Fr
Learning Center ChatTwitterGitHub Copyright 2025 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks andlogos not indicated on the list of OpenJS Foundation trad
I have been usingit quite substantially for a number of different projects now and must say that I absolutely love the wayit works. - Soteri Panagou I've been using your grid on a couple of small projects and I'vegot to sayit's an awesome piece of work.It's very easy to configure and offers a lot of features while staying really responsive. As a programmerit inspires me to write better code.
twitter facebookhatenagooglepocket システムなどでよく使うことがあるツールバーを、jQueryプラグインを使って簡単に導入しましょう。 Toolbar.js - jQuery plugin tocreate tooltip style toobarsは、クリックすると表示させられるツールチップタイプのツールバーが作れます。 sponsors 使用方法 Toolbar.js - jQuery plugin tocreate tooltip style toobarsからファイルをダウンロード。 <link href="jquery.toolbars.css" rel="stylesheet" /> <link href="bootstrap.icons.css" rel="stylesheet" /> <script type="text/java
Teamwork Ganttガントチャートとタスクツリーが作れるjQueryコンポーネント「Teamwork Gantt」。 次のようなガントチャートを作成できる無料サービスに加えて、実装コンポーネントをダウンロードすることができます。 開始日、終了日の指定がカレンダーで指定できたり、入力も楽々。 この手の使いやすいUIを自分で作るとなると骨が折れそうですが、これをカスタマイズ等して便利に使うことが出来そうです 関連エントリ コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 jQueryでブレットグラフを作れるjQueryプラグイン「jquery bullet graph」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
