かもメモ

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

javascript

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

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

javascript setTimeoutで関数内から自身を呼び出す時に初回を即時関数にするとうまく動作しない

javascriptでAPIを叩く関数を作ってAPIからデータ取得後にsetTimeoutを使って同じ関数を呼びたいような時 次のような関数を作ったりします。 var timer; // AjaxでAPIを叩いてデータを取得する関数 var getMyAPIData = function() { clearTimeout(timer); $.…

Twitterのフォローボタンをカスタマイズしたい

Twitterのアカウントをフォローできるボタンを作るには公式のドキュメントから作成できます。 Follow Button | Twitter Developers こんな感じに。 Follow @twitter window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr…

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

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

Google Apps Script 俺がスプレットシートの値を変更した時に特定のセルの値によって異なるシートに行(row)をまるっとコピーしたいんだが。

ちょっと前に流行ったラノベみたいなタイトルになってしまったが後悔はしていない。 例えば数箇所で行うイベントの予約をGoogleDriveのフォームで取っていたとして、予約のリストが回答というスプレットシートに反映されます。で、入金を確認した時にシート…

Google Apps Script スプレットシートでスクリプトのlogをとりたい。

何かと楽なのでGoogle Driveのスプレットシートを使うのですが、自動化をしたいとかでApps Scriptを書いている時、スクリプトエディターから実行させるだけ時はLogger.log()で書いておいてメニューの表示からログを表示させておけばよいのですが、セル内を変…

SublimeText3 jsHintで書いてるjsをチェックできるようにする

引越のするので、普段開発に使ってなかったラップトップに色々と開発環境を設定している日々です。一度やったことなのに直ぐにドキュメント化してないから、まぁ色々と忘れてる!3歩あるいたら忘れる。それくらい自分の記憶力に自身がない今日この頃です。 S…

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

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

javascript thisはトラップが多いよねー大井っちー

第1回 JavaScriptの基礎を見直す:聞いたら一生の宝,プログラミングの基礎の基礎 |gihyo.jp … 技術評論社 という記事を読みました。 jsってthisのトラップ多いよねーと思いながら読んでいたのですが気になる所があったので検証してみました。 thisの使い分…

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);を使おうとして少し気になる挙…

javascript 続・即時関数のトラップ!

以前ファイル結合した際などに起こりうるJavascriptの即時関数のトラップについて書きました。 しかし、即時関数にはまだトラップがあったのです!( -言- )ククク... それは、、、 変数に即時関数を代入する時に即時関数の書き方で代入される値が変化してしまう…

Javascript 配列を連結する

concat()関数を使う。 var a = [1,2,3,4,5]; var b = [6,7,8,9,10]; // 配列を結合 var c = a.concat(b); console.log(c); // [1,2,3,4,5,6,7,8,9,10] console.log(a); // [1,2,3,4,5] cosole.log(b); // [6,7,8,9,10] 元の配列を破壊せずに結合できる。 Arr…

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

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

javascript 即時関数のトラップ

(function() { })(); こんなのを即時関数って呼びます。よく書くと思います。で、gruntなどでライブラリなどを結合して、min化したりするのですが この即時関数の前に;が無いと死んでしまうトラップがあったりするので注意が必要です。特に自分で書いていな…

javascript 連想配列(オブジェクト)の要素数が知りたい。

javascriptの連想配列(オブジェクト)の要素数を知りたい時Object.keys()を使うと便利。 var myKantai = { flagship: '鬼怒', destroyer1: '吹雪', destroyer2: '白雪', destroyer3: '初雪', destroyer4: '深雪' }; 例えば上の様なオブジェクトの要素数を知り…

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

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

めも。wordpress × pjax

使いたい。 WordPressにPjaxを実装してみる | かくれざとう javascript:pjaxを使って非同期通信する方法 | webデザイン | web is a creation WordPressで初めてのバイラルメディアサイトを一時間で作る方法

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()と同じ…

JS複数の画像をload後に処理したい

desandro/imagesloaded · GitHubって便利なプラグインもあるけれど、そこまでしなくても良いやくらいな時に。。。例えばこんなHTMLで画像が全て読み込まれたら何か処理を実行したい (width取りたいとか。) <div id="images"> <img src="/img/hoge.jpg" /> <img src="/img/fuga.jpg" /> <img src="/img/mofu.jpg" /> </div> 画像のロード完了数を数えてcallbackを実行す…

jQueryのonとoff

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

jsでformを送る(submitする)際に気をつけること。

以前、他のブログにも書いてた事にまた引っかかってしまったので。 改めて。javascriptでフォームを送る方法 <form type="post" name="myForm" action="mofumofu"> こんなフォームだよ― ... </form> javascriptの場合。 // javascript document.myForm.submit(); jQueryの場合 // jQuery var $form = jQuery('form[name…

Gruntfileを晒す。

jade, scssのコンパイル、jsとcssのmin化とgzip化な感じで使っています。 // Gruntfile.js module.exports = function(grunt) { var pkg = grunt.file.readJSON('package.json'); grunt.initConfig({ jade: { compile: { expand: true, cwd: 'dev/jade/publi…

jsでブラウザの表示領域を取得するメモ

よく忘れすので。 var w = window; var d = document; var width = w.innerWidth || d.documentElement.clientWidth || d.body.clientWidth; var height = w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight; スクロール領域も含めた…

Gruntで処理をコンボする!

最近scssやjs, jadeのコンパイルや結合, min化にもっぱらgruntを使っています。 例えば concatで、自作のjsを結合してmain.jsに、jQueryなどのライブラリを結合してlib.jsを作成 uglifyで、main.jsをmin化してmain.min.jsを作成 再びconcatで、lib.jsとmain.…