javascript

jquery autocomplete firefox 日本語入力で正しく動作しなかった件

jqueryのautocompleteを導入したさい、chromeとie11だとちゃんと動くのにfirefoxだと日本語の入力を正しく認識しなくてサジェストが正常に動作しなかった件。結局はバージョンの問題だったぽい。jqueryはこれがあるから本当に困る。既存環境との兼ね合いがあ…

jquery-ui 1.7.2 datepickerを同じページに複数表示したい場合、setDefaultsが便利だった件

同じページに複数datepickerを表示したかったんだけど、共通の設定を何度も書くのが嫌でどうすればよいか悩んだ挙句、setDefaultsを使えば良いことが分かった。 // 共通設定 $.datepicker.setDefaults({ showOn: "both" }); // 個別設定1 $("#date1").datepi…

jquery slickとphotoswipeを連携する

前記事 jquery bxsliderとphotoswipeを連携する - 技術ブログbxsliderの挙動がスマホだといまいち(スワイプ中にスクロールしてしまう等)だったのでslickに変更。http://kenwheeler.github.io/slick/ slick http://photoswipe.com/ photoswipeslickで画像をス…

jquery フォームのコピーについて完全に忘却していたので一生忘れないためのメモ

html <ul> <li>test1</li> <li>test2</li> </ul> こんなhtmlがあって、1つ目のliをコピーしてulに追加したいとする。そこでまずコンソールにコピー元のhtmlを表示する。javascript console.log($("ul li:first")); chromeのコンソールの結果 [li, prevObject: n.fn.init[1], context: do…

jquery bxsliderとphotoswipeを連携する

http://bxslider.com/ bxslider http://photoswipe.com/ photoswipebxsliderで画像をスライド表示させ、画像クリック時にphotoswipeで拡大表示させたい場合の話。 普通に実装すれば問題無くできる。ただ注意するところとして、photoswipeはデフォルトだとfig…

jquery エレメントのデバッグを分かりやすくする方法

How do I console.log a jQuery DOM Element in Chrome? - Stack Overflow デバッグに関する面白い回答があった。例えば↓のようなhtmlがあったとして、 <div> <label> <input type="radio" class="flat" name="radio1" value="0" />チェック1 </label> <label> <input type="radio" class="flat" name="radio2" value="1" />チェック2 </label> </div> findの結果を見たい場合、…

jquery bootstrapのiCheckでflat指定したradioボタンを選択する方法

はまったのでメモ。html <div> <label> <input type="radio" class="flat" name="radio" value="0" />チェック1 </label> <label> <input type="radio" class="flat" name="radio" value="1" />チェック2 </label> </div> jquery $(function(){ // ↓flat指定ありの場合 $("div").find('input').eq(0).iCheck('check'); // ↓flatを使わない通常の選択方法 //$("di…

jquery qtip2をレスポンシブ対応する方法

javascript - qTip viewport adjustment not working - Stack Overflow これを見れば分かる。要はpositionにviewportを追加しないといけなかった。低予算で始められるおすすめのFX口座はこちら。 http://s2fx.com/ranking/856.html

bootstrapでradioボタンのonchangeが効かない件

メモ iCheckでラジオボタンがかっこよくなると一生changeイベントが拾えない - arimoつくったメモicheckというライブラリが原因らしい Checkboxes and radio buttons customization (jQuery and Zepto) plugin以下のようにすること //$("#radio1").on('chang…

アンカーでonclickをする場合、return falseをすること

以下はどっちも同じ挙動するんだけど、ずっと方法2を使っていた。方法1は「return false」をつけることでアドレスに#が付いてページの先頭に移動してしまうのを防げる。void(0)とか気持ち悪いときは方法1がよいかも。 方法1 <a href="#" onclick="func();return false;">テスト</a> 方法2 <a href="javascript:void(0)" onclick="func()">テスト</a> 参考サイト …

jquery ある要素がDOM上に存在しているか確認する

if ($("#aaa")) { // 存在している場合 } とかでいけると思いきやダメだった。正解は↓ if ($("#aaa").size()) { // 存在している場合 } lengthでもよいぽい参考サイト device302.me - jqueryで任意の要素の存在チェック

jquery browser is undefined エラーの件

jquery1.9以降、$.browserが削除されたらしく、新しいjqueryとqtipを一緒に使うと出てしまうエラー。 jqueryを古いものに変えることができない場合、以下を読み込めばOK。http://code.jquery.com/jquery-migrate-1.0.0.js16/2/28追加 chromeだと以下のエラー…

jqueryでいい感じのトースト表示を行いたい

以下を使えば簡単にできる。 kamranahmedse/jquery-toast-plugin · GitHub 使い方 <script src="/js/jquery.toast.min.js"></script> <link rel="stylesheet" href="/css/jquery.toast.min.css"> javascript $.toast({ //heading: '更新しました', text: '更新しました', position: 'top-center', stack: false, //bgColor: '#f9edbe', //bgColor: '#E01…</link>

javascript ドラッグ&ドロップによる複数ファイルアップロードについて

【仕様】 ・ファイルをドラッグ&ドロップでアップロードしたい ・従来のファイル選択でのアップロードも可能(一度に複数選択可)jQuery File Upload Demo 最初は「jQuery File Upload」でやろうとしたけど、 機能が多すぎて、導入やカスタマイズがめんどくさ…

javascript データ構造について

JavaScriptで覚えておくとよいデータ構造 - 配列・オブジェクト - いろいろ解析日記 すぐに忘れるのでメモ配列 定義 var a = []; var a = ["b","c"]; 格納 a.push("b"); 特定の位置に格納 a[1] = "b"; 長さ a.lengthオブジェクト 定義 var a = {} var a = {"…

javascript dragenter やら drop イベントについて

[HTML5] Drag & Drop API おさらい 「ファイルの DnD」 | Developers.IO 参考サイトhtml5のドラッグ&ドロップについて。dragenter 領域内にファイルをドラッグさせた時に発生するイベント。 stopPropagationによりイベント伝播を止めないとdropイベントが…

javascript stopPropagation preventDefaultについて

1分でわかるreturn false; preventDefault(); stopPropagation() の違い | iwb.jpここが分かりやすいpreventDefault リンク等のイベントを無効にする(イベント伝播は継続)stopPropagation イベント伝播をキャンセルする

javascriptでスーパーリロード(Ctrl+F5)を行う

reloadの引数が無いと通常のリロード。trueをつけるとスーパーリロード。 location.reload(true); 最近始めたfxが絶好調です。 低予算(1000通貨)で比較 | FX比較 低予算から始めるFXランキング 初心者の外為入門

YUI Compressor を使ってCSS&Javascriptを圧縮する手順

YUI Compressorのサイト YUI Compressorダウンロードページ Releases · yui/yuicompressor · GitHubコマンドプロントで以下を実行してusageが表示されること。 java -jar yuicompressor-2.4.8.jar CSSを圧縮 java -jar yuicompressor-2.4.8.jar myfile.css -…

jquery ブラウザバックで戻った場合も$(function(){});は実行される

頭から抜け落ちていた。 そのせいで2~3時間は無駄にしたと思う。 今後は絶対に忘れないこと。2015/8/11追記 IE11だと実行されなかった。 IE11でdisabledにしたフォームをブラウザバックでenableにしたい場合、以下のようにonpageshowを使えばOK window.on…

jquery 要素には同じイベントを複数登録できる

jquery2で確認したのでjquery1ではダメかもしれんがメモ。 チェックしたい要素が沢山あって、デフォルトのchangeと個別のchangeを登録したかった時のサンプル。 // 全要素に「変更後カーソルが外れたらxxする」イベントを追加 $("#form1 input, #form1 selec…

ある位置にスムーススクロールさせたい

2行で出来る var myPos = $("#move").offset().top; $('html, body').animate({scrollTop: myPos}, 500); html <table> <tr id="move"> <td>aaa</td> </tr> </table>

selectのoptionで値を指定して削除する方法

$("#select option[value!=0]").remove(); こうするとたとえばselectの最初の"選択してください"だけ残した上で、残りのoptionをすべて削除することが可能。

googleチャートメモ

複合チャートの際に参考にしたサイト 青空の底の少し上 |2軸の折れ線グラフを作成する方法 vAxisとvAxesの違いにはまったGoogle Chat API Combo Chart サンプル - CLIP Google Chartsで複数軸を設定 Ruby on RailsでWebサイト公開!に挑戦中オプション翻訳 A…

submit時にie11とfirefoxでgifアニメーションが動かない&表示されない件

ページ読み込み中にローディング画面を表示する この辺のサイトを真似てgifアニメーションでローディング表示をしようと思ったところ、IE11でgifアニメが動かない現象が発生。どうやらIE11(それ未満のversionは不明)だとgifアニメをdisplay:noneとかで先読み…

jquery-uiのdialogを一回閉じると、再open出来ない件について

原因:jqueryとjquery-uiのバージョンの違いにより発生以下、正常動作する1例jquery-1.7.2.min.js jquery-ui-1.8.20.min.js

jsで出来る入力制御のメモ

いっつも忘れるのでメモ。あるテキストボックスがあって、半角英数字のみ「許可したい」場合は、 jquery.autotabで以下のようにやればいい。 $('#sample').autotab({ format: 'alphanumeric' }); 自動で「半角英数字モードにする」(または全角モード)こと…

javascriptでx日後の日付を得る方法と日付の比較について

jqueryのdateFormatを使うと整形がシンプルにできる。html <script type="text/javascript" src="/js/jquery.dateFormat-1.0.js"></script> javascript // 今日 var day = new Date(); // 10日後 day.setDate(day.getDate() + 10); // Date型にすることで日付同士の比較が可能となる day = new Date($.format.date(day, "yyyy/M/d")); var…

Table-to-JSONが非表示になる時の対処法について

Table-to-jsonの対象となるhtmlは、dom上にappendされていないと通常処理の対象とならない。Appendせずに処理の対象としたい場合、ignoreHiddenRowsオプションをfalseにすればよい。 element.tableToJSON({ignoreHiddenRows: false});

javascriptでurlのパラメータ値を取得する方法

window.location.searchその他、window.locationが持つ情報について locationオブジェクト一覧|window.locationオブジェクト|JavaScript/DOM|PHP & JavaScript Room