【みんなの知識 ちょっと便利帳】ページ内検索を自ページに設置 - ヒットしたテキストをハイライト表示
<!-- ページ内検索ハイライトのカラーなど --> <style> .highlight{ font-weight:bold; background-color:Yellow; } </style> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- jquery.highlight-5.js プラグイン --> <script> /* highlight v5 Highlights arbitrary terms. <https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plug
jQuery.Deferredを使って処理を並列化・直列化 - remonbonbon's weblog
基本 ajaxでない処理の場合。 deferred.resolve()をコールすることで、続くthen()を実行することができる。 直列つなぎ deferred.then()で接続する。 $.Deferred().resolve() .then(function() { console.log("serial 1"); }) .then(function() { console.log("serial 2"); }); つなぐ個数が可変の場合 var n = 10; var defer = $.Deferred().resolve(); for (var i=0; i<n; i++) { defer = defer.then(function() { console.log("serial", i); }); } defer.done(function() { console.log("d
async:false とは何か。或いは、非同期処理を諦めるのはまだ早い! - Qiita
JavaScript は非同期処理が基本 jQuery は非同期処理を簡単にしてくれる Knockout MVVM における非同期処理パターン の三本立てでお送り致します。 JavaScript は非同期処理が基本 最近、こんな記事をいくつか見かけました。 「jQuery.ajax で結果が反映されない！困ったら async:false だ！」 これは Tips とは言えません。 async:false にすると何が変わるのか、正しく認識していますか？ jQuery の API リファレンス には、こうあります。 Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. 同期リクエストは 一時的にブラウザをロックし、一
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
jQueryのajax()で返り値を得る方法 - 冬のソフトウェア海岸
jQueryのAjax()で返り値がとれない!? こんなふうに書くと返り値はundefinedになってしまう。 function test(){ $.ajax({ type: 'GET', url: 'http://hoge.fuga' dataType: 'text', success: function(response){ return response; }, error: function(response){ return response; }); } var result = test(); // undefined これはajax()がデフォルトでは非同期通信をするためである。非同期通信とは、レスポンスが返って来る前に次の処理に行くことである。だから返り値を返す前に次の処理に行ってしまう。 解決策 1. 同期通信にしちゃう async: falseとすると、同期通信になる
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
Deferredその１：何故をDeferred使うかの理由 - jQuery無双
さて、jQuery.Deferred(以下、Deferred)の使い方についての記事を書こうかと思います。 Deferredを使う主なメリット ・コールバックの入れ子(ネスト)によるスパゲティコードを防げる。 ・可読性の高い並列処理のコードを書ける。 ・これにより非同期処理の記述や処理をスムーズに進められる。 とまあ、このようなメリットがあります。 まずは、このDeferredを敢えて使わないパターンをいくつか挙げて、その後にDeferredを使った簡単な処理を記述しようかと思います。 なお、Deferredの様々な詳細な書き方とかについては、他の記事に書いていきます。 ここではDeferredを使用しないパタートの比較という事で。 Deferredを使わないパターン リクエストのパラメーターに文字列を囲んで返すテスト用のPHP １．このパラメータは"contents"があり、"パラメータ
jQueryでスクロール量に応じて拡大するヒーローイメージ
jQueryでスクロール量に応じて拡大するヒーローイメージ 最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。 ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。 投稿日2016年12月28日 更新日2016年12月28日 HTML 画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。 fixedで固定表示するので他の要素とは別にしておきます。 HTML <div class="scale-bg"></div> <h1>Title</h1> <div class="contents"> ・・・ </div> CSS scale-bg に fixed、contents に relative を指定して位置を調節します。 CSS .scale-bg { backgr
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><
![[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8c95bc6d707ff555b0dcfe047f07bb04a7b352/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F01%2Fcatch-study.jpg)
スクロール時に追加的にコンテンツを読み込むには？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前の通り、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
jQueryライブラリを使用して、EXCELのように操作できる画面を簡単実装 | 株式会社AMG Solution
こんにちは、樋口です。 WEB上でEXCELのように操作できる画面を簡単に実装することができるライブラリ、handsontableについてご紹介します。今回は、ライブラリのダウンロードから簡単な実装までについての説明となります。 下記ライブラリを使用して説明をしていきます。 jQuery 1.10.2 handsontable 0.31.2 BootStrap 3.2.0 ライブラリの入手 handsontableは下記サイトよりダウンロードできます。 handsontableダウンロード(GitHub) ZIPファイルダウンロード後、ZIPファイルの中身の下記ファイルとフォルダを、任意の場所へ解凍します。 handsontable.full.min.css handsontable.full.min.js これで準備は完了です。 HTMLファイル 初めに、HTMLファイルを作成します。
OpenLayersで地図表示 - tanaka's Programming Memo
OpenLayersを利用して、フリーの地図Open Street Mapを表示する方法をまとめる。 環境準備 OpenLayresのダウンロード 地図を表示するJavaScriptのフリープラグインOpenLayersをダウンロードする。 http://trac.osgeo.org/openlayers/wiki/HowToDownloadに接続 「Current Stable API URL is always」に続くhttp://openlayers.org/api/OpenLayers.jsを右クリックして、「名前を付けてリンク先を保存」を選択。 適当なフォルダに保存する。この例では、htmlファイルを置くフォルダ内に「plugins」というフォルダを作成して、その中に保存。 jQueryのダウンロード 簡単にDOMを扱うためにjQueryを組み込んでおく。 http://jque
jQueryプラグイン - テキストエリアの入力フォームをポップアップで大きく表示 - Textarea full screen
テキストエリアの入力フォームをポップアップで大きく表示するプラグイン「Textarea full screen」を紹介します。 jQueryプラグイン「Textarea full screen」このプラグインを使えば、テキストエリアの入力フォームをクリックでポップアップ表示することができます。 画像のポップアップのように小さな入力フォームをクリックで大きく表示されるので、文字数が多くてもかなり入力しやすくなっています。 それでは、デモページのテキストエリアをご覧ください。 「Textarea full screen」のデモ ソース（ HTML + jQuery ）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Textarea full screen のデモでーす。
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to slide{move} slider in Selenium WebDriver
GitHub - roadkillwiki/roadkill: A modern .NET Wiki
User-friendly Duration Picker Plugin With jQuery - timesetter
gmaps.js：Googleマップを簡単に挿入するjQueryプラグイン (1) gmaps.jsの導入 | Web技術指南書
