かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

jQuery

TypeScript CDN の jQuery を使いたい

テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました!!!! CDN から読み込まれている j…

JavaScript 複数の要素をまとめて追加したい

VanillaJSなら DocumentFragment を作成してDOMに追加したい要素を溜めておき、appendChild( DocumentFragment ) で丸っと実際に表示されるDOMに追加することができる!

PHP / JavaScript ファイル生成してDLさせたいけどmax_input_varsにかかってしまう問題にパワープレイで立ち向かった話

PHP製の管理ツールで、CSVを生成してDLするシステムを作っていました。 データ量が多いとエラーになるということで調べたら、PHPのmax_input_varsにかかって居るのが原因でした。 そして、使っているサーバーがhetemlでmax_input_varsの上限を変えることが出…

iOS javascript clickイベントが効かないにはまる。

レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。 Chromeの開発ツールでは意図したとおりに動作していたのですが、…

Javascript Chromeでページトップに戻る(scrollTop)が効かなくなってた件。

Chromeで以前作ったサイトを見ていて、jQueryで実装していたページトップに戻るが効かなくなっているのに気づいてしまいました... スペック Mac OSX Chrome v61.0.3163.91 $('body').scrollTop() が効かなくなっていた。 今までは、FireFoxとIE系はhtmlタグ…

Ajaxを使ってWordPressからコンテンツを取得したい。

WordPress製のサイトに独自のコンテンツなどを取得できるAjaxを作成する方法のメモ 1. 呼び出すアクション名を決める 2. Ajaxの送信先をjsから使えるように出力する 3. Ajaxで呼び出される関数を作成する (PHP) 4. フロントからAjaxでの呼出しを作成する (ja…

JS 呼び出し元の this を担保するメモ。

例 オブジェクト内の関数でsetTimeoutを使ってその中で、オブジェクト自身をthisとして使いたいような場合 var obj = { name: 'obj', func: function() { console.log(this); // => Object setTimeout(function() { console.log(this, this.name); // => Win…

jQuery .triggerと.onとで実行される関数へのデータの渡し方の違いメモ。

オブジェクトのイベントを呼出して、オブジェクト自身をイベント内で使いたい時とかのメモ .trigger .trigger( eventType [, extraParameters ] ) extraParameters Type: Array or PlainObject Additional parameters to pass along to the event handler. .…

WordPress ContactForm7 フォーム送信時に送信確認のチェックをリセットしたい

ContactForm7は送信前の確認したかのチェックボックスを設置することができます。 ただ、フォームを送信した後、エラーの有無にかかわらず送信確認がチェックされたままで、送信ボタンを押すことができる状態になったままになっています。 そこで、ContactFo…

WordPress ContactForm7 フォーム送信時に任意のjsを実行したい。

管理画面から WordPressの管理画面 > コンタクトフォームの編集画面 > その他の設定 を選択して、記入エリアにon_sent_ok:(送信完了時)、on_submit:(送信された時常に) のキーワードに続けて実行したいjavascriptのコードをテキスト形式で記述する。 on_sent…

PHP Slim 2.x Ajaxでputで送った値を取得したい。

"Slim is a PHP micro-framework" Rubyのテンプレートエンジンじゃない娘のお話です。 3系が既に出ているのですが、先方のサーバーのPHPのバージョンの関係で2系で開発をしています。今回 Ajaxのputメソッドでデータを送ったのですが、Slim側で値をとるのに…

ある要素までスクロールしたらアクションをさせるJavascriptを作成する時に気をつけること。

画面をスクロールさせて、特定の要素の場所に来た時にアニメーションをさせるなどスクロールに応じたアクションの作成をすることがあります。 複雑なものの場合ライブラリを使うのが手っ取り早いと思いますが、簡易なものの時や大きなライブラリを読み込ませ…

input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。

HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなるinput[type="date"]、Firefoxなどカレンダーで選択できる機能が実装されてないプラウザもまだまだ多い印象があります。単純にinput[type="text"]にしてjQueryUIのdatepicker使…

jQuery.whenのdone()にAjaxで取得したデータを加工して渡したい

$.when()で複数の非同期処理を行って、.done()で結果を受け取ってその後の処理をするのですが、特に非同期処理がAjaxの時、$.when()の.done()でAjaxで取得できた値を受け取って加工するのではなく、Ajax側で取得したデータを加工して$.when()のdone()に渡し…

WordPress 投稿のカテゴリーをラジオボタンにカスタマイズしたら、クイック編集でカテゴリーがチェックされなくなったので。

ちょっと古い記事なのですが、LIGさんの解決!WordPress投稿画面のカテゴリーをカスタマイズする方法という記事を参考に投稿のカテゴリーを複数選択できないようにラジオボタンに変更しました。 記事に掲載されているコードの通りに行うことでカテゴリー選択…

javascript iPhoneで今まで使ってた判別方法だとscrollTopが効かなくなっていたので調べた。

jQueryを使ってページをスクロールさせるスクリプトでよく見かけるのは下記のような感じです。 $('body, html').animate( {scrollTop: 0}, 'fast' ); このコード動くんですけど、bodyとhtml両方でイベントが起きているので、処理中にチラツキが発生したりコ…

jQuery .each()のループから抜けたい。

javascriptでループから抜けるときはbreak;を使います。 for(var i=0, l=myArg.length; i

iPhone aタグでclickイベントが効かない時があるっぽい!

iPhone用のサイトを作っていて、aタグに付けたclickイベントがchromeのデベロッパーツールで確認した時は動作しているのに、実機では動作しないという現象に出会ったのでメモです。 今回はボタンクリックでモバイル用のメニューを表示させるような機能を作っ…

Google Analyticsのスクリプトがあるとページをリロード直後の.scrollTop()が上手く動作しない?

1ページの長いサイトを作っていてページがロードされた時にパラメータに合わせて該当する場所に予めスクロールさせたいと思い下記のようなコードを書いていました。 jQuery(function($) { (function(w, d) { var hash = w.location.hash; var $area; // ロー…

javascript jQuery スクロールバーの幅を含むウィンドウサイズを取得したい。

.width()で取得できる。 var width = $(window).width(); $(window).width();で取得できる値は表示されているエリアのサイズになります。 Y方向にスクロールがあるページの時、これで取れるwidthにはスクロールバーの幅は含まれないっぽいです。 レスポンシ…

jQuery $.data()と.data()、データの保存と取得で気をつけること。

jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita こちらの記事に data() // 普通の書き方 $(elem).data(key, value); // 10倍速い! $.data(elem, key, value); とあったので、$.data(elem, key, value);を使おうとして少し気になる挙…

jQueryのバージョンを確認する方法。

ページで使われているjQueryのバージョンを確認する方法。ディベロッパーツールのコンソールに下記を入力 $.fn.jquery js内に記述するなら console.log($.fn.jquery); よく忘れる。

jQuery aタグに.prop()と.attr()した時では挙動が違うっぽい?

ラジオボタンやチェックボックスのcheckedされているかの確認やjsでのon/off、セレクトボックスのselected、フォームパーツをdisabledにする時に.prop()が推奨されているので var $checkbox = $('#checkbox') // checkedされているかの確認 true or false $c…

jQueryでimportantのcssを付けたい。

CSSの!importantは極力使いたくないのですが 使わざるを得ないケースが有ります。jQueryでimportant付きのcssを付けたい時 // javascript $('#hoge').css('width', '900px !important'); の様に記述してもスタイルそのものが付きませんでした。 どうやら // …

javascript 引数の配列を展開して関数に渡したい。

jQueryの.triggerみたいな処理をjQuery以外で使いたい。 ・ .trigger() | jQuery 1.9 日本語リファレンス | js STUDIO要は.triggerと同じで引数に関数名と配列を渡して、 その関数に配列を展開した引数を渡して実行する見たいな事をしたい。 ActionScriptのd…

JSで1つめのクラス名を取得する。

javascriptで要素についたクラスの1つめだけ取り出したい時。 element.className.split(" ")[0]; で最初のクラス名を取得できます。たいていjQueryを使っている思うので、 // HTML <p id="hoge" class="className1 className2">要素だよ</p> // jQuery $('#hoge').attr('class').split(" ")[0]; の様な記述を…

めも。高速化など出来になったサイト

Tumblrの省メモリーな無限スクロール - 記録 display = "none"でメモリ節約になるのか!! 高速で安全なjQueryを書くために今できること | Dress Cording [jQuery]closest()とparents() | WEBプログラム覚書 closest()は最初のDOM要素だけですが、parents([exp…

Ajaxで読み込んだPinterestのボタンをアクティブ化する

サイトにPinterestにPin itするボタンを設置する事も多いと思います。こんな感じに↓ ボタンそのものはWidget Builder | for Business のページで作ることが出来ます。 で、貼り付けよ!と出てくるコードがこんな感じ。

jQuery Ajaxでファイルを送りたい!

input[type="file"]をAjaxで送信したい時 普通にAjaxを使って送ると、ファイルが文字列になってしまい form.submit()した時と違うのでハマったのでメモ。どうやら FormData を使い Ajaxが自動的に送信データを整形する機能をOFFにすれば form.submit()と同じ…

jQueryのonとoff

jQueryでイベントをバインドする際にイベント名もつける事ができる。 これを利用すればこれを利用すれば、イベント名でまとめてアンバインドもできる。 $(document).on('click.myEvent', 'selector', event1) .on('click', 'selector', event2) .on('click.m…