スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld
見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向（上
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
特定の要素以外で発生したイベントをキャッチする（jQuery Advent Calendar 2014 jQuery） - ksk1015のブログ
jQuery Advent Calendar 2014 の6日目の記事です。 空いていたので書きます。 特定の要素で発生したイベントで処理行う場合は と書きます。普通ですね。 特定の要素以外で発生したイベントで処理行う場合は、こんなふうに書けます 解説 documentにイベントリスナー貼ると、どこでイベントが発生してもキャッチできます。 （バブリングするイベントの場合ですが。 イベントバブリングについて解説した記事） そしてイベントオブジェクトからイベント発生元の要素を取得できます。 その要素自体またはその要素が指定セレクタ内かどうかは、.closest()メソッドで簡単に判定できます。 ドロップダウンメニューみたいなUIの閉じる処理、それ以外がクリックされたときは閉じたいけど、操作不能にはしたくないときとかで使ったりします。 調べてみたらjQueryUIのSelectmenuも同じふう
DateTimePicker - XDSoft plugins, scripts, program, parsers
PeriodPicker or TimePicker or PeriodDateTimePicker Try another perfect period picker or cool datetimepicker. Used TimePicker or perioddatetimepicker Compact mode like this datetimepicker mode or cute timepicker (touchable,draggable,use keyboard and mousewheel, support mobile devices). Read more Buy and Download Read more ... How do I use it? First include to page css and js files <!-- this should
jQuery Resizable Columns
<script src="/path/to/jquery.js"></script> <script src="/path/to/store.js"></script> <script src="/path/to/jquery.resizableColumns.js"></script> <table class="table table-bordered" data-resizable-columns-id="demo-table"> <thead> <tr> <th data-resizable-column-id="#">#</th> <th data-resizable-column-id="first_name">First Name</th> <th data-resizable-column-id="last_name">Last Name</th> <th data-res
Appleの商品スライダーを再現したjQueryプラグイン「Kiwi-slider」
Posted: 2014.10.28 / Category: javascript / Tag: jQuery 「Kiwi-slider」はAppleの商品ページのスライダー動作を再現したjQueryプラグインです。 プラグインのダウンロードと準備 デモ＆ダウンロードは下記から Kiwi-slider html & css ダウンロードした「kiwi.css」「kiwi-slider.js」を読み込んだら、後述するidを「new KiwiSlider」で指定します。 html <link rel="stylesheet" type="text/css" href="stylesheets/kiwi.css"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="javascrip
Googleマップを手軽に利用する定番プラグイン「gmap3」
本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。前回は世界地図と日本地図を表示するプラグイン2種を取り上げましたが、今回はもっと狭い範囲で特定の場所（地点）の情報を表示するのに便利な、GoogleマップをWebページに表示するjQueryプラグインを取り上げます。 はじめに Googleマップに象徴されるように、Webページで地図を表示することは近年一般的に行われています。特に静的な画像ではなくJavaScriptで動的に描画される地図は、利用者がインタラクティブに操作を行って場所の情報を取得できるため、Webページの利便性を高める手段として有用です。 前回は世界地図を表示するjQuery Vector Maps（JQVMap）と、日本地図を表示するJapan Mapの、2種類のjQueryプラグインを取り上げま
Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup
bootstrap-wysiwyg tiny wysiwyg rich text editor for Bootstrap About This tiny (5KB, < 200 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5. Here are the key features: Automatically binds standard hotkeys for common operations on Mac and Windows Drag and drop files to insert images, support image upload (also taking photos
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
Youtubeの動画を背景に
jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。 まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。 このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合にお
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
文字の均等割り付けを行うjQueryプラグイン jQuery.justify.js
日本人は表組が大好きです。 クリスマスのチキンより表組みが好きなんです。（嘘 そんな表組の中で時折見かけるのが下表のようなデザイン。 見出し部分を均等割り付けです。 均等割り付けなんかイヤだ！といってもやらなきゃいけないときもあるわけで。 普通、こういう表現をする場合スペースなんかで間隔を揃えてしまいがちですが、アクセシビリティを考えるとあんまりよろしくありません。 そんなとき、CSSプロパティのletter-spacingを利用して文字間隔を揃えます。 しかし、手動でやるのは文字数やフォントサイズが変わるたびに値を調整しないといけないため、あまり効率的ではありません。 そんなときに使えるのが本jQueryプラグインになります。 jQuery.justify.js [ダウンロード] ※IE6, 7, 8, firefox 3.5, Safari 4, Google Chorme 4での動作
viewport内に入ったら処理を実行させられるjQueryプラグイン「isInViewport」:phpspot開発日誌
zeusdeux/isInViewport GitHub viewport内に入ったら処理を実行させられるjQueryプラグイン「isInViewport」 プラグインを利用すると in-viewport という擬似セレクタを使えて、viewportに入った時に特定の処理を実行させることができるみたい。 スクロールに連動させて表示・アニメーション等、何か処理をやりたいという場合にシンプルに実現できそうです。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 フルページスクロールするサイトを作るのに使える「fullPage.js」
JavaScript開発ライブラリ - Wijmo（ウィジモ） | Developer Solutions〈開発支援ツール〉 - メシウス株式会社
帳票・レポート 日本仕様の帳票開発に必要な機能を搭載したコンポーネント ActiveReports for .NET ActiveReportsJS 表計算・グリッド Excel風のビューと表計算機能を実現するUIコンポーネント SPREAD for Windows Forms SPREAD for ASP.NET SPREAD for WPF SpreadJS 入力支援 快適な入力を実現する日本仕様入力コンポーネントセット InputManPlus for Windows Forms InputManPlus for ASP.NET InputManPlus for WPF InputManJS 多段明細 1レコード複数行&日付表示に 最適なグリッドコンポーネント MultiRowPlus for Windows Forms 戻る コンポーネントセット Visual Studioで利用す
Smart Fixed Navigation | CodyHouse
Smart Fixed Navigation A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution. Web pages with a lot of content require a quick way for the user to get back to the top, where the navigation is (most of the time). Hence the old back-t
carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー - CodingMania
スライドショー下にサムネイルのカルーセルを設置したスライドショーです。自動送り・手動送りできます。 carouFredSel を使っているので、先にjqueryとjquery.carouFredSel-6.2.1.jsを読み込みます。 サムネイル用の画像はスライド用画像を小さくして表示しているだけなので、スライド用の画像のみ用意すればサムネイル画像も表示されます。 5枚以上の構成になっていますので、5枚ない場合は、リストのタグを繰り返してください。。。 デモページへopen_in_new JSを読み込みます <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../js/jquery.carouFredSel-6.2.1.js"></script> J
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ninton/jquery.jpostal.js: 郵便番号から住所入力するjQueryプラグイン
