iPadでリンクを長押ししたときにフキダシが出てきます。
これを出さないようにする方法を色々調べました。
下記にサンプルを用意したのでそれをiPadで見るのが一番早いでしょう。
サンプル
iPhone,iPadのタッチイベントについてはこちら[javascript]iPhoneタッチイベント
基本的に対象に下記のような処理をすればよい。
addEventListenerでtouchstartに登録する方法ではダメでした。
var n=document.getElementById('targetID');
n.ontouchstart=function(){
return false;
};
下記のようにするとページ全体が対象になる。
var n=document;
n.ontouchstart=function(){
return false;
};
facebookのシェアボタンの対象URLを
jquery.socialbuttonを使って変えようとしたらうまく行かなかったので、対応方法をメモ。
socialbuttonメソッドを呼び出す前に下記を実行すればよい。
window.FB=undefined;
参考サイト
jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社
http://itra.jp/jquery_socialbutton_plugin/
タイトル通り
基本形
var m=get_query();
var flashvars={};
flashvars.browser=navigator.userAgent;
flashvars.id=(m.id)?m.id:'';
var params={};
params.base=".";
params.menu="false";
params.wmode="opaque";
params.allowfullscreen="false";
params.allowscriptaccess="always";
swfobject.embedSWF("swf/main.swf", "flashcontent", "100%", "100%", "9.0.45", null, flashvars, params);
FlashPlayerのバージョン判定だけ
swfobject.hasFlashPlayerVersion("9.0.45")
動的にFlash領域の大きさを変える
$(window).bind('resize',when_window_resize);
function when_window_resize(){
var n=$('#flashcontent');
var wt=$(window).height();
n.css({height:(wt-80)+'px'});
}
タイトル通り
data.xml
<?xml version="1.0" encoding="UTF-8" ?> <data> <item id="A">あいうえお</item> <item id="B">かきくけこ</item> <item id="C">さしすせそ</item> <item id="D">なにぬねの</item> </data>
JavaScript
$.ajax({
type:"GET",
url:"data.xml",
dataType:"xml",
async:true,
success:function(xml){
$("#status").empty();
$(xml).find("item").each(function(){
var id=$(this).attr("id");
var tex=$(this).text();
$("#status").append("id:"+id+" text:"+tex+"<br/>");
});
}
});
不親切なjQueryPluginを作りました。
lightboxやfancyboxと同じような画像ビューワーです。
これらと違うところはuiが無い点です。
uiは自分で作りたい時に良いかと
使い方はサンプルを見て下さい。
下記ブラウザで動作を確認しました。
Windows7 Firefox7.0.1
Windows7 GoogleChrome 16.0.912.75 m
Windows7 Safari 5.1
WindowsXP IE6
js canvasで円グラフ
IE6,Firefox,Chrome,Safari,iPhoneで見れます
参考にしたサイト
ExplorerCanvas
http://excanvas.sourceforge.net/
iPhoneのホーム画面の動きを２つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。
タイトル通り
四角がクリックした座標へCSS3のanimationを使って移動します。
Firefox,Chrome,Safari,iPhoneで動きます
jQueryプラグインで既にあるようですが後学のために。
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]
参考にしたサイト
CSS3リファレンス
音を出すためのjs
HTML5ではなく小さなflashを利用しているので
ほとんどのブラウザで大丈夫です。
しかし、iPhone,iPadではエラーが起きるので
下記コードみたいに条件判定するとよい。
見た目を変えたいときはaudio.jsの中にCSSの記述があるので
これを書き換える。
※追記 ソースコードをよく見たら、ブラウザによってはHTML5を使っているようです
var isTouch = ('ontouchstart' in window);
init_audio();
function init_audio(){
audiojs.events.ready(function() {
if(isTouch)return;
audiolist=audiojs.createAll();
});
}
参考にしたサイト
audio.js