読者です 読者をやめる 読者になる 読者になる

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>

javascriptで改行を含んだ正規表現

text.match(/[\s\S]*/); [\s\S]は改行を含む任意の一文字ということになる複数行にマッチさせる正規表現 | You Look Too Cool

jqueryのセレクタの第2引数の意味

var ele = $('#id', var_html); $()の第2引数にhtmlエレメントを指定すると、#idの検索対象をそのhtmlに設定することができる $(var_html).find('#id') これも同じ意味ぽい

jqueryによる行追加方法

これもしょっちょうやるのにメモするのを面倒臭がって結局毎回調べることになるので今度こそメモ。例えば以下の様な感じで、行追加ボタンを押す度に最後の行をベースにtrを追加したい場合。html <table id="itemTbl"> <tr> <th>名称</th> <th>金額</th> </tr> <tr> <td><input type="text" name="item_name[]" value="<?php e(h($v['name']));?>" /></td> <td></td></tr></table>

jquery-uiのdialogを閉じる度にoverlayが伸びていく現象の対応策

最近のjquery-uiだと治っていたかもしれないけど、古いjquery使う時に毎回調べているので今度こそメモ。 close: function() { // 閉じる度にoverlayが高くなるのを防ぐ $('.ui-widget-overlay').css('position', 'absolute'); }, open: function() { // 閉じ…

jqueryでメッセージを徐々にフェードアウトする方法

例えばid="success"のタグを徐々にフェードアウトさせたい場合、以下で出来る。 $(document).ready(function() { // まず現在のアニメーションを停止(stop) // 1.2秒かけてフェードイン(fadeIn) // 2.5秒待機(delay) // 3.0秒かけてフェードアウト(fadeOut) …

ファイルアップロードのデザイン変更方法

ファイルアップロードのデザイン変更って面倒だと思っていたけど、案外すっきり出来た。 以下、参考にした丁寧にまとまっている記事↓【jQuery】ファイル選択フォームデザインのカスタマイズ方法 | WebTerminalこれで一件落着と思いきや、案の定IEがダタをこ…

fancyboxが便利だった件について

ちょいちょいjquery UI使ったフロート表示内でpostをしたい時がある。LightBoxとかあーいう画面内で遷移させるってことね。その際に今までは全部ajaxでちまちまやっていたけど、これだとサーバーサイド側の処理とかも含めて、結構面倒くさかったりする。fanc…

javascriptで数字以外は削除する方法と注意事項

なんでjavascriptって覚えられないんだろう。 俺がアホ過ぎるんだろうか?いや違う。単に努力が足りていないだけだ。 努力不足を自分の才能のせいにするなんて、クズもいいとこだな。 var str = ('03-5555-4444').replace(/[^0-9]/g, ''); // 0355554444 【…

jqueryのblurとchangeの違い

selectタグが変更した時に何かしらの処理を実行したい時などにjqueryのchangeメソッドを使うんだけど、textボックスに対してchangeを使った場合は、フォーカスが外れた時に実行されることになる。同じような関数にblurがあるけど、こちらもフォーカスが外れ…

入力・ペーストした際に先頭・語尾の半角・全角スペース削除

$("#keyword").on('keyup', function(e) { if ($(this).val().match(/^( | )+|( | )+$/g)) { $(this).val($(this).val().replace(/^( | )+|( | )+$/g, '')); } }).on('paste', function(e) { var keyword = this; setTimeout(function () { $(keyword).val($…

javascript使う時はシングルクォーテーションに注意

文字列にシングルクォーテーションが入っているとjavascript使うときに色々と弊害が起きるので、エンティティの&#039;(実際は小文字)に置換すること。ちなみにシングルクォーテーションには実体参照が存在しない。(ダブルクォーテーションは&qout;)あ…

Firefoxでhistory.backした時の挙動をIEやChromeに合わせる方法

知らなかったのでメモ。 例えば、入力→確認画面と遷移するときに、入力画面でボタンをdisabledにして移動し、確認画面でhistory.backで戻ったケース。 ieやchromeなら戻った画面でも普通にボタンを押せるんだけど、ffだとdisabledのままになってしまう。 ff…

javascriptの数値変換について

基本的なことだけど忘れていたので書く。例えば以下の場合。javascript var num = $("#test").val() + 1; alert(num); html <input type="hidden" value="1" id="test" /> 結果は以下のようになる11文字列を数値として解釈したいのであれば以下のようにする var num = parseInt($("#test").val()) + 1; a…

JSON.parse が駄目なら eval でいいじゃない

cakephpでjson返してjavascriptで JSON.parse するとparseエラーが出た。別の環境だとうまくいくのに。phpのバージョンとかjqueryのバージョンも関係なさそう。理由がさっぱり分からん。上手くいかないケースはタブが\tでなかったり、/がエスケープされてな…

ajaxの際に form.serialize で一括送信できる件

今までバカな事していた。ajaxでpostとかgetする際に、いちいち各inputの値とかを取得していたんだけどそんなことしなくてもform.serializeで一発だった。javascript function postForm(btn) { $.ajax({ type: "post", url: "/test.php", data: $(btn.form).…

javascriptを非同期で読み込む方法

郵便番号から住所を表示してくれる外部ライブラリのjsを利用しているんだけど、たまに読み込むのに時間がかかって画面の表示が遅くなる時があった。 で、調べてみたところ非同期で読み込む方法があったらしい。 方法は単純でscriptタグに async="async" を追…

juqery-uiのdatepicker使うときのバージョンについて

jqueryが1.3.2より新しい場合は、jquery-uiを1.8.9より新しいバージョンにしないといけないらしい。ちなみにdatepicker使う際は、下記4つがあればOK ・jquery.js ・jquery-ui.js ・jquery.ui.datepicker-ja.js(日本語対応用) ・jquery-ui.css jqueryとjquer…

IE9 で jquery ui がドラッグ出来ない件

jquery 1.7.2 jquery-ui 1.8.20にしたらIE9でもドラッグ出来たjquery 1.4.3 jquery-ui 1.8.6以上であればこのバグが改修されているらしい参考サイト jQuery UI does not work on IE9... - jQuery Forum

ajaxでクロスドメイン接続する方法

忘れていたのでメモ。 以下の様な感じでdataType: 'jsonp' と callback=? を指定する。 (callbackの値はjqueryが勝手に付与してくれる) var url = 'http://crossdomain.jp?callback=?'; $.ajax({ type: "get", cache: false, url: url, dataType : 'jsonp', …

HTMLのクリアと削除

HTMLをクリアしたいときはempty 削除したい場合はremove $("#test").empty(); // divは残る $("#test").remove(); // divもまるごと削除 <div id="test"> <p>今日も晴れ</p> </div>