2013年02月26日

iPhoneでカルーセル時のチラツキをなくす

iPhoneでtranslate3dを利用したスワイプギャラリーでカルーセル処理を行おうとするとチラツキが生じる。

.swipeBox *{
-webkit-transform: translate3d(0,0,0);
}


といった具合にスワイプギャラリーの構成要素すべてにtranslate3dを指定してGPUをONにすることでチラツキが解決する。
posted by ねこまんま at 00:58 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年08月08日

iPhoneのiOS4.3でopacity変更時に画像が欠ける

iPhoneのiOS4.3でopacityをanimateで変更した際に画像が欠けるバグに遭遇

$("img").css("opacity",0).animate({
"opacity":"1"
});


opacityを1ではなく0.99に変更することで画像が欠けずに

$("img").css("opacity",0).animate({
"opacity":"0.99"
});
posted by ねこまんま at 11:33 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年07月16日

iPhoneでwindowの高さを取得

iPhoneではjQueryを使って「$(window).height()」としても正確な高さが取得できない。すこし小さくなる。jQueryを使わずに、

var winHeight = window.innerHeight


などとすると正確な高さが取得できるようになります。
posted by ねこまんま at 19:41 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

iOS4.3でclientX,clientY

iPhoneのiOS4.3でclientX,clientYが取得できないバグがある。pageX,pageYと同じ値が返ってくる。

var clientX = event.targetTouches[0].pageY - $(window).scrollTop()


などとしてclientXを計算すればOK
posted by ねこまんま at 19:32 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年07月09日

iPhoneのtouch イベント

iPhoneのtouch イベントについてもう少しくわしく調べてみるとタッチイベントの取得は

$("hoge").bind("touchstart",function(e){
var e = event.touches[0];
console.log(e.pageX)
})


だけでなく

$("hoge").bind("touchstart",function(e){
var event = e.originalEvent.changedTouches[0];
console.log(event.pageX)
})


でも取得できるっぽい。
posted by ねこまんま at 23:54 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年04月05日

iScrollでページ内リンク

iPhoneやAndroidで固定配置を実装するJavaScriptライブラリ「iScroll」。

myScroll = new iScroll('wrapper');
$("#nameNav a").click(function(){
myScroll.scrollToElement($(this).attr("href"), 1);
return false;
});


iScrollでページ内リンクを実装するには上記のようにscrollToElementメソッドを利用します。
タグ:iScroll android
posted by ねこまんま at 14:50 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年02月27日

touchstartイベントに対応しているかどうかチェックするスクリプト

touchstartイベントに対応しているかどうかチェックして対応している場合はtouchstartイベントを、対応していない場合はclickイベントを利用する方法

var tap = window.ontouchstart===null?"touchstart":"click";
$("#hoge").bind(tap,function(){
//fire
})
タグ:touchstart iPhone
posted by ねこまんま at 19:53 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2011年12月17日

iPhone ,Androidで縦でも横でも同じ横幅にする

AndroidとiPhoneで縦でも横でも横幅320pxにする方法

;(function($){
var portraitWidth,landscapeWidth;
if(/Android/.test(window.navigator.userAgent)){
var changeEvent = "resize";
}else{
var changeEvent = "orientationchange";
$("body").width(320)
}
$(window).bind(changeEvent, function(){
if(Math.abs(window.orientation) === 0){
portraitWidth=$(window).width();
if(/Android/.test(window.navigator.userAgent)){
if(!portraitWidth)portraitWidth=$(window).width();
}else{
portraitWidth=$(window).width();
}
$("html").css("zoom" , portraitWidth/320 );
}else{
$("body").removeClass("portrait").addClass("landscape");
if(/Android/.test(window.navigator.userAgent)){
if(!landscapeWidth)landscapeWidth=$(window).width();
}else{
landscapeWidth=$(window).width();
}
$("html").css("zoom" , landscapeWidth/320 );
}
}).trigger(changeEvent);
})(jQuery);
タグ:iPhone android
posted by ねこまんま at 18:03 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

スマートフォンで画像をダウンロードさせない方法

iPhoneやAndroidなどのスマートフォンではガラケーと違い画像の長押しで写真がダウンロードできてしまう。それを防ぐためのjQuery スクリプト。

$(function(){
$(".hoge img").load(function(){
if(!$(this).data("gifFlag")){
$(this).data("gifFlag",true)
$(this).css({
"background":"url("+$(this).attr("src")+")",
webktBackgroundSize:"100%",
backgroundSize:"100%"
}).attr("width",$(this).width()).attr("height",$(this).height()).
$(this).attr("src","data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D");
}
});
});


画像の読み込みがおわったあとで画像をimg要素の背景書に設定し、src属性を透過gifに書き換えるだけ。透過gifも用意するのがめんどくせいのでdata スキーム URIでいい。
posted by ねこまんま at 17:46 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2011年01月10日

iPhoneシミュレータのiOS SDKのバージョンアップ

iPhoneシミュレータのバージョンが古いと指摘されて調べると、
iOS Dev CenterのiOS SDKの最新バージョンはXcode3.2.5 and iOS SDK 4.2。現状のXcode3.2.3 and iOS SDK 4.0。

というわけでバージョンアップしましょう。

iOS SDKのバージョンアップはiOS Dev Centerから最新のバージョンをダウンロードして行います。

ダウンロードとインストールで結構時間がかかるうえ14G(ファイルのダウンロードに3G、インストールに10G)ほどHDが必要になるので注意が必要です。

HDDの状況によってはアップデートではなく、一度アンインストールしてからインストールしてもよいかも。

ターミナルから次のコマンドを入力することでSDKの削除が出来ます。

sudo /Developer/Library/uninstall-devtools --mode=all


一度 OS を再起動してからインストールします。

うーんめんどくさい。HDDの容量アップしたいな。
タグ:iPhone iOS SDK
posted by ねこまんま at 05:35 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2010年08月09日

iPadでportrait(縦)とlandscape(横)を切り返すスタイルシート

link要素を次のように記述すると縦横のスタイルシートが切り替えられる。

<link rel="stylesheet" media="all and (orientation:portrait)" href="style/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="style/landscape.css">
タグ:iPAD CSS
posted by ねこまんま at 15:52 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2010年07月28日

iPhoneのonTouch系イベント

iPhoneではonmouse系のイベントが利用できない。代わりにonTouch系のイベントが用意されている。

onTouchStart
onTouchMove
onTouchEnd
onTouchCancel

jQueryでは次のようにbindを利用してonTouch系のイベントが利用できる。

$("hoge").bind("touchstart",function(){
//処理
})



注意点1

$("hoge").bind("touchstart",function(e){
console.log(e.pageX)
})


なんてのは動作しない。イベント情報はeventで取得できる。

さらにevent.touches[0]と言った形で指の本数だけイベントが設定されている。指の1本だと次のようにイベント情報が取得できる。

$("hoge").bind("touchstart",function(e){
var e = event.touches[0];
console.log(e.pageX)
})


注意点2

onTouchEndではevent.touchesを取得できない。TouchEndではもうディスプレイから指が離れているので情報取得できないよという糞仕様。言いたいことはわかるが不便で仕方ない。
posted by ねこまんま at 23:29 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

iPhoneでステータスバーを消す方法

iPhoneではステータスバーを消す為のフルスクリーンモードが用意されています。以下のmetaタグを追加するだけでOK。

<meta name="apple-mobile-web-app-capable" content="yes" />


しかし、フルスクリーンモードはホーム画面に登録後にホーム画面から起動したページにしか適応されない。微妙すぎる。

つぎのjQueryコードを入れておくと自動でステータスバーが消えます。

window.onload = function(){
$("body").animate({scrollTop:0})
}


ステータスバーはページが完全に読み込みが行うまで消せないのでwindow.onloadで実行のタイミングを調整(ちょっとタイミングがずれるけど誤差)

iPhone,iPod touchでは両方のテクニックが使えますが、iPadでは後者のJavaScriptは利用できませんのであしからず。
posted by ねこまんま at 23:20 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする