iosでcssでhover処理を入れていたaタグがクリック出来ない

タイトルの通り、hover処理を入れているaタグがiPhoneでクリックできなくなってた。
原因がわからなかったので対症療法でしか対応できなかった。

以下対応方法です。
クリックイベントが起きなくなってしまっていたので、touchstartでaタグのhrefを取って、ページを移動させてます。

$('a').on 'touchstart', ->
 location.href = this.getAttribute('href')

hover時にdisplay:blockしているaタグ要素の中身を表示させたりしているので、それが絡んでるんだと思います。
同じような状況になって、解決出来たって人いたら教えてください。

[js] IEのデバッグコンソールでJavaScriptのオブジェクトなどの中身を見たい

console.logを使ってオブジェクトの中身を見たい！って時に、IEは[Object object]なんていう文字列を吐いてくる。
で、中身は見れず。

その対策。
console.log(JSON.stringify(中身見たい変数など));

1行の文字列になるけど、これで中身は見れる

[jQuery] 取得済みの要素を合体させて操作する

jQueryで取得した2つの要素をまとめて、同じ処理をしたいって時がある。

先に取得していた要素1と後から取得した要素2に対して、途中までは別々の処理をするのだが、途中からは同じ処理をする…など。

はじめに2つまとめて取って、その中から要素をわける方がいいのかもしれないけど、処理の流れによっては…後からまとめる方がスッキリしたりする場合もあるかも

var $elem1 = $('.elem-1');
var $elem2 = $('.elem-2');
var $matome = $([$elem1.get(0), $elem2.get(0)]);

$matome.css... //2つの要素をまとめて処理する

console.timeで時間測ってみたが、chromeではまとめる方が、新たにまとめて取得するより、3倍くらい速かった。

iPhoneでiframeがはみ出してしまう

twitterのウィジェットを使っているサイトをiPhoneで見ると、twitterのiframeが画面の外まで伸びてしまっていた。

cssではmax-width: 100%;と指定している。
Androidでは問題なく表示されていたが、iPhoneではどうもうまく動かないらしい。

いろいろcssを変更してみた感じだと、width,max-widthの値を％で指定するとうまく効いてくれないみたい。
px指定だとちゃんと変更された。

親要素の問題かもしれない。
ちょっと調べてみよう。

[javascript] PreprosでZeptoを連結させるとエラーになった

普段、Preprosを使って、読み込むJavaScriptファイルを１つのファイルに連結してよみこんでるんだけど、Zeptoでそれをやったらエラーになった。

対応策は簡単
ZeptoのJSの最後に;（セミコロン）を追加するだけ。

処理が終わっていないと認識されてエラーになっていたみたい。
これだとZeptoをバージョンアップさせるたびにやらないといけなくなるな…

Zeptoだけ別ファイルで読みこめば問題は起きないが、読み込むファイルは減らしたい…

さすがにライブラリをバージョンアップしといて動作確認せずにファイルを更新…なんてことはないだろうとたかを括って、今回は１つに連結してやることにした。

[jQuery] position()で位置が取得できない

サイト内で使用している画像を保存させたくない場合に、透明のgif画像を指定の画像の上にかぶせて保存させづらく処理をした。

その際、jQueryのposition関数で画像の位置を取得していたのだが、場合によってかぶせる透明画像の位置がうまく重ならず、左にずれてしまうことがあった。

調べてみるとposition()で取得した値がtop, leftともに期待していたものと違っていた。

今回の対策としてはposition()をoffset()に変更することで対応できた。

position()の場合、スタイルのpositionがrelative, absolute, fixedになってる直近の親要素の左上を起点にして、相対的な位置を返してくるようだ。
htmlタグまでさかのぼってpositionがすべてstaticのままだったらhtmlタグが起点になる

offset()の場合、先祖要素のposition()は無視して、ページの左上からの位置を返すらしい。

なので、position()をoffset()に変えれば常にうまくいくというものでもなく、用途によって使い分ける必要があるようだ。
参考：jQuery の位置・サイズ関連メソッドまとめ

preprosでJavaScriptを連結させる

最近preprosを使ってます。
windows版codekitなんて呼ばれてるらしいす。
自分はmacなんですが、無料なんでcodekitじゃなくてこっちを使ってます。
いろいろ便利なツールを世界中の人々が開発してくれていて、とてもありがたや

複数のJavaScriptファイルを連結させて1つのファイルにしたかった。
日本語で紹介してるブログなんかを読むと、「JSの連結・圧縮もできます（やったね！）」みたいなこと書いてるんですが、実際のやり方書いてるとこは見つからんかったです

公式サイト見たらもちろん書いてました。

//jsファイルに↓こう書くと…
//@prepros-append first.js
//first.jsの中身がここに書かれる。頭のスラッシュ2つも必要です。

//↓prependもある。↑上のappendよりも先に記述される
//@prepros-prepend second.js

指定した箇所に、ファイルの中身が圧縮された状態で追加されるので、他の箇所には普通に処理を書いたりもできます。

$(function(){
 console.log('uoooooooOOOOOOUU!!!!!!');
 //@prepros-append second.js
 console.log('GYAAAAAAAaaaaaaaaa…….');
})

codekitのも使えるよ、とのこと。
//@codekit-prepend ***.js
//@codekit-append ***.js


デフォルトではjs/min/にファイルを書き出すようです。 参考：公式サイトJS連結に関するページ