javascript

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

javascriptの正規表現で変数を使う

通常のmatch text.match(/<table id="tbl"[\s\S]*<\/table>/); 変数を使う場合 var table = "tbl"; text.match('<table id="' + table + '"[\\s\\S]*<\\/table>'); 違いは、\を2個書くことと、前後の/が不要になる点 以下のようにRegExpを使っても同じっぽい var table = "tbl"; text.match(new RegExp('<table id="' + table + '"[\\s\\S]*<\\/table>')); JavaScriptで、変数を使っ…</table></table></table>