2015-01-20

[jQuery] iPhoneでスクロールイベント

レスポンシブのサイト制作で、
スクロールさせるとイラストやコンテンツが表示されるようなjQueryを書こうとしたのですが、
iPhoneの場合、スクロールイベントが起こるのは指を離してスクロールが終了した後になり、
PCと違って表示がかなり遅れてしまうことが判明。

iscroll.jsを使う方法もあるようだったのですが、ブラウザに負荷がかかるっぽい感じだったので、
scrollイベントではなく、touchmoveイベントを使うことで対応しました。

参考サイト
http://qiita.com/zaru/items/82d61ac90394885fb486

2013-10-15

Google

縦にスクロールさせることでサイトが1ページで成り立っているものが最近多いですが、
jQueryで#を使ってページ内リンクで遷移させたりすると、
アナリティクスには全体のhtmlファイルしか記録されません。
そこで_trackPageviewを使って、計測できるようにしました。

(さらに…)

2013-09-26

あるCSVを読み込んで集計を行う簡単なプログラムを作成していたのですが、
最終的にそれをエクセルに保存していくときに、
集計した内容を別のCSVに落としていたので、
いちいちダウンロード>開く>コピペ とかなり面倒でした。

そこで、クリップボードにタブ区切りでデータをコピーすれば、
エクセルにすぐ貼り付けができるだろうということで調べてみました。

(さらに…)

2013-08-30

jQueryのカルーセルスライダーはいろいろ種類がありますが、
最近ではレスポンシブ対応、スマホ対応のものもかなり増えてきました。

そういう中で何を選ぶか、というのもかなり難しいところなのですが、
Elastislideというプラグインを使った案件で、気になった点があったので変更しました。

(さらに…)

2013-05-08

以前にも記事を書いた、スマホなどでいい感じのフォトギャラリーができる「PhotoSwipe」。
これまでは単純に写真を見せるだけの使い方をしていたのですが、
その写真に対してリンクをつけてECサイトに飛ばしたいという要望がありました。

PhotoSwipeでは写真をクリックすると、上下のメニューが表示されるので、
キャプションのところにリンクURLを載せたらいいかと安易に考えたものの、
HTMLタグもすべてテキストで表示されてしまうんですね。
うーん、困りました。。

(さらに…)

2012-11-08

ナビゲーションメニューのマウスーオーバーで
背景画像をbackground-positionで変更させるようなものを作成していて、
IE6で確認するとなぜか画像が上に1ピクセルあがってしまってしまいます。

IE6のこの手のバグはいろいろあるのですが、
今回の場合は、PNGをIE6対応にさせるDD_belatedPNG.jsを使っているのが原因でした!

(さらに…)

2012-10-26

jQuery
Google Analyticsの情報をエクセルで管理していたのですが、
複数のアカウント情報をパッと見たいときに面倒だったりするので、
jQueryのプラグインを使用して、ブラウザで見れるようにしてみました。

グラフ描画のプラグインは「jqPlot」以外にも「”jQuery Visualize」など、
いくつか種類があるようなのですが、グラフのリサイズ機能が気に入ったので、
「jqPlot」を採用してみました。

下記のサイトにかなり細かく各オプションのリファレンスも載っているので、
かなり役に立ちました!

参考サイト
http://alphasis.info/jquery-plugins/jqplot/

2012-08-21

PhotoSwipe

仕事でスマホサイトを作る割合がかなり高くなってきたのですが、
自分が担当するサイトでは画像を拡大表示するようなことが多いので、
スマホサイトらしく、拡大したらグループ化されたものはスワイプして
見れるようにしたいと思い、いろいろプラグインを見ていましたが、
現時点では、PhotoSwipeがベスト!と思いました。

PhotoSwipe
http://www.photoswipe.com

オプションもいろいろあるので、いろいろ融通も効くのも重要なところ。
画像がキレイなサイトならこのプラグインを使って見せるだけでも
結構インパクトがありますね!

2012-07-04

jQuery
クライアントの仕事でAwkward Showcaseというプラグインをよく使っているのですが、
ie9で確認したところ、うまく動作していないことが発覚。
互換モードにするとレイアウトがおかしくはなるものの動いていました。

ほかのサイトではうまく動いているものもあるのにな、と調べていると
jQueryのバージョンが古かったのが問題でした。

(さらに…)

2012-06-15

jQuery
主にページトップなどで使うことの多いスムーススクロール。
ページトップだけでなく、どこのページ内リンクにもスムーススクロールするには
プラグイン的なものもありますが、他のものとの相性がよくなかったりしたので、
普通にコードを書くことにしました。

<script type=”text/javascript”>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function() {
// スクロールの速度
var speed = 800;// ミリ秒
// アンカーの値取得
var href= $(this).attr(“href”);
// 移動先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? ‘body’ : ‘html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
</script>

こういうよく使うjQueryを集めたライブラリみたいなものも最近はよくありますよね。
(最近でもないですかね、、)
自分でもそういうのを作っておくと便利かも。


参考サイト
http://www.coolwebwindow.com/weblife_column/coolweb/000301.php