エレファンキューブリンク帳: jQuery

ラベル jQuery の投稿を表示しています。すべての投稿を表示

2018年8月31日金曜日

jQueryでスクロール最下部判定

いろいろ書き方があるが、ここが分かりやすく、最新版jQueryでも動いた
https://blog.toshimaru.net/jquery-bottom-scroll/

2018年8月30日木曜日

動的にimgタグで配置した画像の読み込みチェック

//画像読み込み確認
function imageChecker(){
var imgLoaded=0;
var imgTotal=0;
$('.swiper-wrapper img').each(function(){
imgTotal++;
if(0<$(this)[0].naturalHeight){
imgLoaded++;
}
});
if(imgLoaded == imgTotal){
$('.swiper-wrapper').css('opacity', 1);
}else{
setTimeout(function(){
imageChecker();
},100);
}
}

jQuery使用。

width()やheight()は、CSSで設定された値が返ってくるだけなので、naturalHeightを使う。

参考にしたサイト

https://stackoverflow.com/questions/1832907/is-there-any-way-to-read-out-the-naturalwidth-of-an-image-with-jquery

2017年11月7日火曜日

大文字小文字関係なく検索しハイライトする

http://jsdo.it/tsunet111/qX4C

2017年10月30日月曜日

ページ読み込み中にローディング

http://gimmicklog.main.jp/jquery/278/
読み込みに時間がかかるときに、ブラウザならローディング中がわかるけど、Cordovaで囲むとわからないので、いれるほうが親切そう。

2017年5月31日水曜日

jQuery 右クリック禁止

http://black-flag.net/jquery/20130227-4487.html

2017年5月9日火曜日

iOSでマウスアウトを機能させる

以下コードをいれることで、要素外タップでマウスアウトが発火する。

$('*').on('click', function(){ return true; });

mouseout イベントや hover の第二引数などいくつかの書き方で動く。

参考：http://stackoverflow.com/questions/7006799/does-iphone-ipad-support-mouseout-event

2017年5月7日日曜日

フルスクリーン用JS

https://github.com/sindresorhus/screenfull.js
ブラウザごとの違いを吸収してフルスクリーン実現できる

2017年3月13日月曜日

document ready と window load の違い

画像の読込もおわってから処理したいときは、$(window).load を使おう。

https://www.softel.co.jp/blogs/tech/archives/2425

2017年3月11日土曜日

HTML data-*属性

HTMLの属性（attribute）として、data-* とついているものがよくありますが…
他の属性と違った取り扱いができるらしい（しらなかった！）

jQueryだと、
<tag data-abc="myValue">
に対して、
$(selector).data("abc")
で値が取得できます。
ふつうに属性取得するのは、
$(selector).attr("data-abc")

このデータの扱いについて、少し注意が必要そう。
http://qiita.com/Kta-M/items/2eda39750abd10df9801

2016年12月6日火曜日

タッチデバイスでjQueryUI draggable の cancelオプションを使えるようにする

http://raqool.com/blog/archives/334

ｊQueryUIをタッチデバイスに対応させるために、【jquery.ui.touch-punch.js】を使うが、そのままではiPad等のタッチデバイスで、draggableのcancelオプションが機能しない。
上記リンクをやればできるようになる。

2016年5月25日水曜日

JSでドラッグ＆ドロップ

http://qiita.com/tsunet111/items/911b72e0fb140969190c

2016年4月4日月曜日

jQuery 選択したテキストを取得するプラグイン

http://madapaja.github.io/jquery.selection/ja_jp.html
iPadでもうごきました。

2016年3月3日木曜日

jQueryのイベント指定に on を使おう

http://qiita.com/naoyeah/items/b3210a80907896e79cb5
「ｊQueryのイベント指定に on を使おう」という話。
これ知らなかった。

最後に書いてあるけど、スマホだと、bodyやdocumentにイベント割り当てられないらしいので注意。ま、containerとかwrapperとかで囲んでそこに設定すればいいというだけ。

2016年2月19日金曜日

jQuery 右クリックをカスタマイズする

https://swisnl.github.io/jQuery-contextMenu/

2016年2月1日月曜日

スマホ対応のjQueryのカラーピッカープラグイン

プラグインDL（GitHub）
https://github.com/rjfranco/excolor

使い方（基本）
http://taitan916.info/blog/?p=2358

2016年1月7日木曜日

HTMLモーダル画面作成 fancybox

http://fancyapps.com/fancybox/
モーダル画面を生成するjQueryプラグインです。
同様のものは多数ありますが、いろいろ試して
・分かりやすく応用がききやすい
・安定している
・IE8など古いブラウザも動作する
という理由でよく使っています。

商用利用は有償ですが、Multi Domain License を買っているので、制限なく使って問題ありません。