はてなブックマーク

文字コードがUTF8以外の際にTwitterのウィジェットがIE8とかIE7とかIE6でエラーを出すのでその際に対処法。 <a href="https://twitter.com/share" class="twitter-share-button" data-via="hogehoge" data-lang="ja">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitte

Macではコピーアンドペーストを行うとディレクトリが新しいディレクトリに置き換わります。つまりディレクトリ内にコピー元と別のファイルがある場合消えてしまいます。Mac OS X Lionからはoption keyを押しながらドラッグアンドドロップを行うことで上書きをすることができます。ただ、Total Finderなどのアプリを入れているとMac OS X Lionでこの方法が利用できません。 そこでターミナルから置き換えではなく上書きコピーを行う方法 cp -rf ~/Sites/hoge/ ~/Dropbox/hoge/ cpコマンドにrfオプションをつけて実行する。めんどくさいけどこんな感じ。

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では後者のJavaScr

以下のように設定しておくと関数の呼び出し元の関数を調べることが出来る。 function a(){ b(); } function b(){ console.log(arguments.callee.caller) alert("hoge") } a() callerをどんどんたどるともっと呼び出しもとの関数をたどることができる。 function a(){ b(); } function b(){ var currentFunction = arguments.callee.caller; while (currentFunction) { console.log(currentFunction.toString()); currentFunction = currentFunction.caller; } alert("hoge") } a() 参考サイト：IE上のJavaScript

createElementでstyle要素を作成することでkeyframesのアニメーションをJavaScriptで動的に生成できる。 var main01main = [ "0% {left:100px}", "50% {left:200px}", "100% {left:300px}" ]; var cssAnimation = document.createElement('style'); cssAnimation.type = 'text/css'; var rules = document.createTextNode('@-webkit-keyframes main01main {'+ main01main.join(" ")+ '}'); cssAnimation.appendChild(rules); document.getElementsByTagName("head

とりあえずBackborn.jsを触ってみた感想 Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/backbo

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,

iPhoneやAndroidで固定配置を実装するJavaScriptライブラリ「iScroll」。 myScroll = new iScroll('wrapper'); $("#nameNav a").click(function(){ myScroll.scrollToElement($(this).attr("href"), 1); return false; }); iScrollでページ内リンクを実装するには上記のようにscrollToElementメソッドを利用します。

iPhoneでjQueryのliveイベントが発火しない。 $("div").live("click",function(){ alert("ok") }); delegateもdocumentやbodyにbindした際に発火しない。 $(document).delegate("h1","click",function(){ alert("ok") }) $("body").delegate("h1","click",function(){ alert("ok") }) 解決策としては「cursor: pointer;」を要素に指定するというもの。 h1{ cursor: pointer; } はい、すごいですね。たまにあるclickイベントが発火しないときにも有効です。

sortableを指定しドラッグアンドドロップを可能にした要素内にinput要素やtextarea要素があると選択されなくなってしまう。 #4429 (Can't select text in inputs within sortables) – jQuery UIによると以下のようにすると解決できそう。 $("#hoge").sortable().disableSelection().delegate('input,textarea','click',function(ev){ ev.target.focus(); }); 若干ソースは変更してます(delegate使わない意味がわからない)。

jQuery Deferredを利用したイケテルアニメーション制御、もっといい方法があるかもしれないので暫定版。 var que01 = $("#box1").animate({left:"100px"}); var que02 = $.when(que01).pipe(function(){ return $("#box2").animate({top:"100px"}); }); var que03 = $.when(que02).pipe(function(){ return $("#box1").animate({top:"100px"}); }); var que04 = $.when(que03).pipe(function(){ return $("#box2").animate({left:"100px"}); }); var que05_1 = $.when(que04)

配列やオブジェクトは通常の挿入では参照渡しになってしまう。これを値渡しにする方法 配列はArray.slice()などを利用して新しい配列を生成すればよい。 var ary = [1, 2, 3]; var copyAry = ary.slice(0); copyAry[0]=4; console.log(ary);//[1, 2, 3] console.log(copyAry);//[4, 2, 3] オブジェクトは次のように新しいprototypeオブジェクトを継承した新しいオブジェクトを生成することで可能になる。 var obj = {"a":"A","b":"B","c":"C"}; function clone(obj) { var f = function(){}; f.prototype = obj; return new f; } var copyObj = clone(o

HTML5のvideo要素に対応しているブラウザではvideo要素を利用して、対応していないブラウザではFlash のswfオブジェクトを表示するJavaScript。 try { var v = document.createElement("video"); if (v && v.canPlayType && v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) { $("object.movie01").hide(); }else{ $("video.movie01").hide(); } } catch (e) { $("video.movie01").hide(); } object要素とvideo要素に適当なclass属性を振っておき、表示・非表示で切り分ける。video要素に対応しているブラウザは生成したvideo要

jQueryプラグイン「Isotope」でIE6の不具合を修正する方法。 Isotopeではエフェクトを制御する為、要素にfilterが自動的に適応されます。その為、marginやpositionを指定した配置を行った場合、表示がおかしくなることがあります。 $('#unitItem').isotope({ filter: "" , animationOptions: { duration: 250, easing: 'linear', queue: false , complete : function(){ if($.browser.ie){ $(this).attr("style",$(this).attr("style").replace("alpha(opacity=100)","")) } } } }); animataionOptionsではanimateメソッドのオプション

jQuery Mobileでは別ファイルへのリンクはAjaxで取得してページ内リンクとして処理して遷移します。 <a href="index2.html">index2.htmlへ移動</a> その際に通常のリンクと同じくdata-transition属性でアニメーションを指定することも可能です。 <a href="index2.html" data-transition="slide">index2.htmlへ移動</a> ただ、alpha4.1では遷移先のhtmlファイルの特定のページにアクセスすることはできない。 つまり、次のような指定はできないということです。 <a href="index2.html#page2">index2.html#page2へ移動</a> このように指定したい場合はAjax機能をOFFにする必要があります。Ajax機能をOFFにする方法としてはrel属性に

iPhoneやAndroidのスマートフォンごとに読み込むスタイルシートを変更する方法。メディアクエリーだとAndroid端末によっては対応できないのでJavaScriptでやるのが正攻法 <head> ・・・ <script> (function(){ var _UA = navigator.userAgent; if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) { document.write('<link rel="stylesheet" href="/css/iphone.css">'); }else if(_UA.indexOf('Android') > -1){ document.write('<link rel="stylesheet" href="/css/android.css">'); }else{

Androidにfont-weight:boldが効かない。擬似的にtext-shadowで対応しようとしたらこっちの実装もヘボイ。 text-shadow:0 2px 0 #FFFFFF; 広がりに0pxを指定するとtext-shadowが反映されない。 text-shadow:0 2px 1px #FFFFFF; text-shadowの広がりには1px以上の数値指定が必要。0.1 pxとかも駄目。

HTML5のgeolocation APIでは次のように記述するとiPhoneやブラウザで位置情報が取得できる。 navigator.geolocation.getCurrentPosition( function (pos) { console.log(pos.coords.latitude,pos.coords.longitude); }, function (e) { alert("位置情報の取得に失敗しました"); } ); Androidで利用する場合はGoogle Gearsを利用しなくてはいけない。 あらかじめgears_init.jsを読み込んでおき、次のように記述するでAndroidを含むgeolocationに対応したブラウザで位置情報が取得できるようになる。 var geo = navigator.geolocation || google.gears.factory

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",funct

IE8以下でjQueryのimg要素のloadが動かない件でプチハマりしたのでメモ $("<img>").attr("src","....").on("load",function(){ //do something }); だとすでに画象がキャッシュされている際に動かない。 $("<img>").on("load",function(){ //do something }).attr("src","...."); にするとちゃんとロードされる。でもwidthやheightはうまくとれないので、 $("<img>").on("load",function(){ setTimeout(function(){ //do something },1); }).attr("src","...."); とするとちゃんとwidthやheightも取得できる

正規表現は毎回手こずるので作った正規表現を覚書 特定のURLからファイル名のみを取得する正規表現 "url".match(".+/(.+?)$")[1] 更に、拡張子を取り除いたファイル名を取得する正規表現 "url".match(".+/(.+?)\.[a-z]+$")[1]

CSS3のアニメーションメソッド｢-webkit-transition｣のアニメーション終了時のイベントは｢webkitTransitionEnd｣で設定が出来る。 $(this).bind('webkitTransitionEnd', function() { //コールバック関数 }) 便利ですわ。

通常イベントを設定すると次のようになる。 $(function(){ $("li").click(function(e){ $(this).css("color","red") }) }); これだとliの数が多くなるとすべてにイベントが設定されている状態になりブラウザのメモリに多大な負担がかかる。 $(function(){ $("ul").click(function(e){ $(e.target).css("color","red") }) }); 次のように記述すると設定するイベントはひとつでよい

ES2018で追加された機能 従来は指定順で取得しなくてはいけなかったマッチグループに名前ををつけて任意の名前で取得できる const word = "helllllo" const result1 = word.match(/he(l+)o/) const result2 = word.match(/he(?l+)o/) console.log(result1[1]) // 'lllll' console.log(result2.groups)// {myGroup: 'lllll'} https://js-next.hatenablog.com/entry/2018/09/06/212724