[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連結に関するページ

[bootstrap] Zeptoとbootstrapを一緒に使おうとしてエラーが出た場合の対処

bootstrap.jsはjQueryありきで書かれている箇所があるので、Zeptoに変えるとエラーが出る。
その際の対処法

グローバルのjQueryをZeptoで上書き。 bootstrap バージョン2.3ではこれでOKだった。 参考：http://stackoverflow.com/questions/16160755/using-bootstrap-with-zepto-undefined-is-not-a-function

[compass]rgbaが使えない古いブラウザ向けにも対応できるcompassのプラグイン

バージョン8以前のIEはcssでrgbaが使えない。
いちいち画像作るのも面倒だったので、探してみたら、IE8以前向けに、自動で画像を作ってcssもつけてくれるプラグインを見つけた。

参考：https://github.com/aaronrussell/compass-rgbapng

■インストールが必要
gem install compass-rgbapng

■config.rbに下記を追加
require "rgbapng"

■cssファイルに下記を追加
@import "rgbapng";

■変数の設定
$rgbapng_path: 'my_pngs';　//自動で作ってくれる画像を格納するフォルダ名
$rgbapng_px_size: 8; //作成する画像のサイズ

■新しく追加されたMIXINを使うと動作する
rgba-background($color, [$path, $pixel]);

これが
@include rgba-background(rgba(0,0,0,0.75));

こうなる
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);


IE6には対応していないようで、もしIE6を使いたいなら‥
・DD_BelatePNGを使う
・自分でIE独自フィルターを使ったMIXINを作る
・Universal styesheetを使う
のどれかを選んだらと言ってくれてます。