((( spellific ))) Practice spelling while playing a fun word game! Click here to play
Scrollable Div
((( spellific ))) Practice spelling while playing a fun word game! Click here to play
JavaScriptのオブジェクト指向は、逆の順番で学んだほうが理解しやすいと思うので…
事の発端というか、きっかけは、id:perlcodesampleさんとid:gfxさんの下のポストを見て、 JavaScriptで一番簡単にオブジェクト指向プログラミングを行う方法 (id:perlcodesampleさん) JavaScriptにおけるオブジェクトの定義 (id:gfxさん) newとかprototypeを使うのが推奨されてないとか、直接代入するほうが楽とかじゃなくて、挙動が違うんだよなぁ、と思ったこと。 挙動が違うんだから、もちろん使いどころも違うんですよね。 でも実際、JavaScriptのオブジェクト指向は混乱しやすいと思います。 自分もご多分にもれず、さんざん混乱させられたクチですしね。 わかってしまえば、どってことなくて、とってもシンプルなんですけどね。 せっかくなので、今だからこそ言える、自分だったらこうやって教えて欲しかったなぁ、っていう説明をしてみようかと
Androidでconsole.log()を見る - Just posted a blog
おもにWindowsの方からつらいという声聞こえた スマートフォン向けのウェブサイトのデバッグ、console.log()を見る方法いくつかある。 Eclipseのlogcatを見る Android開発者ならまだしも、JavaScript書いてるのにEclipse立ち上げたくない。 標準ブラウザでabout:debug 対応してないバージョンもある。それにPCにエラーログ出た方が嬉しい。 adb logcat Linuxとかなら adb logcat | grep browser 出来るけど、windowsだとgrep出来なくて悲しい。 busyboxを入れて端末側でgrepする ビルドが面倒とか、すべての検証端末に入れるのが面倒とか。 BrowserCatを作ったニャン BrowserCat windowsでもadbが入ってれば動きます。 まだログが見れるくらいしか機能ない
AndroidでJavaScriptのconsole.logを表示する方法 - Webtech Walker
Androidでconsole.logとかの出力を見るのには二通りあるみたいです。 1. about:debug ブラウザのアドレスバーにabout:debugと打ち込むとJavaScriptのコンソールが現れます。これ簡単でいいんですけど、実機（Xperia ack）で試したらなんかよく（OSごと）落ちるし、いちいち入力するの面倒だしでちょっと微妙でした。あとどのバージョンからこれに対応してるかもよく知らない。 2. adb logcat たぶんこっちが正当法。AndroidSDKに入ってるadb（Android Debug Bridge）というツールを使います。adbはAndroidSDKの tools/adb にあります。 まずエミュレータの場合。エミュレータを立ち上げたら以下のコマンドで接続を確認します。 $ cd /path/to/AndroidSDK/tools $ ./adb
Androidのoverflow:auto/scroll対策
Android2.xでoverflow:scrollやautoが効かない（overflow:hiddenとして処理される）のは有名な話で、困った経験がある方も多いと思います。 調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか？ 当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や 他UIと組み合わせた際の相性（イベントが競合しても調整しやすいように）を考えて自前実装で対応する事にしました。 ネイティブで対応済みのバージョンは？ 最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。 手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応（Android4.0.4の標準ブラウザ&Chromeで確認）、
キャプチャリングとバブリングとpreventDefault()とstopPropagation() - 車輪を再発明 / koba04の日記
ある要素に無名関数でイベントが設定されているけど、そのイベントを発生させたくない！でも要素は消したくない！ということがあったのでJavaScriptのイベントについて少し調べてみました。 具体的には、ある要素がtouchmoveの中でpreventDefault()しているためその要素の上だとタッチスクロールが出来なくて不便なのでどうにかしたいという状況でした。 preventDefault() preventDefault()はその要素に設定されているブラウザの規定のアクションを中止する関数です。 タッチスクロールも規定のアクションに含まれます。 https://developer.mozilla.org/ja/DOM/event.preventDefault イベントのキャプチャリングとバブリング DOMのイベントには、キャプチャリングフェーズとバブリングフェーズという二つのフェーズが
Androidでtouchmoveがうまくうごかない件とflipsnapでの対応策 - hokaccha memo
この件。主に2.1とかっぽい。 http://www.youtube.com/watch?v=s6c3n7IjKuY 手元の端末だとIS03で同じ現象だった。エミュレーターでも同じ挙動になったので端末依存じゃないかも。 んで検証してみたらtouchstartをpreventDefault()すればうまく動くことがわかった。 http://dl.dropbox.com/u/336104/demo/touch/touchmove.html この例だと上二つはうまく動くけど下二つは動画みたいになる。つまりtouchstartをpreventDefaultすれば問題解決なんだけど、touchstartをpreventDefaultすると、ネイティブのスクロールが効かなくなる。 これで何が困るか。flipsnapはtouchmoveで横と縦どっちに動いたかを判定して、ネイティブのスクロールを止めるか
touchmove | JavaScript リファレンス
touchmoveはスマートフォンで画面上でタッチした指が動いた発火するイベントです。 iPhoneやAndroidなどのスマートデバイスで画面上でタッチした指が動いた発火します。 var i=0; document.addEventListener("touchmove", function() { i++; document.getElementById("target").innerText = i; }, false); sample ただし、一部のAndroid端末ではtouchstart時にe.preventDefault()を行ないブラウザのスクロールを停止しないとtouchmoveイベントが最初の数回しか発火しないことがあります。また、最初の数回touchmoveイベントが発火したタイミングでe.preventDefault()を行なうことでtouchmoveイベントが継続
androidでtouchmoveイベントが取得できない理由 « 大阪のアンドロイド/iOS･ Webアプリ開発会社 ノーティス
iphone,ipad,android用のHTML5アプリを開発していて、androidのタッチイベントの挙動が（mobile safariと比べて）おかしいなと思うことがあります。w3c Touch Eventsでの策定でも、細かなところまでは決められないだろうし、守られるものでもないだろうとは思うが、出来る限り統一されることを望みます。 W3C Touch Events version 2 機種・バージョンの差異に加えて、様々なブラウザが登場しているので、ネイティブアプリにせよ、HTML5アプリにせよ、ますます開発と試験が混沌としてきたと感じます。 手元のSonyTableS(android4.0.3)では、コンテンツをscalableに設定した場合、touchmoveイベントが取得できません。viewportにてuser-scalable=noとすると正しく取得できるようになります。
event.isDefaultPrevented - jQuery API 日本語リファレンス
jQuery API の event.isDefaultPrevented() は、preventDefault() メソッドでイベントのデフォルトの動作を停止させたかどうかを返すメソッド。 実装例（サンプル） event.isDefaultPrevented() event.isDefaultPrevented()-1: event.isDefaultPrevented()-2: 実装例（サンプル）の動作について event.isDefaultPrevented() をクリックしても、リンク先ページは開かず、「event.isDefaultPrevented()-1: 」の右側に、フェードイン・フェードアウトで「false」というテキストを５秒間表示、「event.isDefaultPrevented()-2: 」の右側に、フェードイン・フェードアウトで「true」というテキストを５秒間
Windows8 Gesture動作 - とみぞーノート
Vivo Tabを買ったWindows8タブレットでの動作確認用にASUSのVivo Tab RTを買った。タブレットとして使う分にはWindows8のメトロUIはなかなか使いやすい。 Gesture関連のイベント早速、JavaScriptからタッチ等ジェスチャ関連のイベントをどのように扱えるか試してみた。 まず、iOS,Androidのタッチ関連のイベントとはまったく異なる。Windows8ではタッチ関連のイベントにはマウスイベント、ポインタイベント、ジェスチャーイベントの3種類がある。 (a) マウスイベント 従来のマウス操作で使っていたmousedown,mouseup,click等のイベント。これらは、タッチパネル操作でも従来どおりイベント発生するので、PC用のサイトなどでは特に修正をしなくてもタッチパネルから操作できる(このあたりはiOS,Androidも同じ)。ただし、マルチタ
)
Pointer and gesture events in Internet Explorer 10 (Windows)
Note For more current overviews on these topics, see the Pointer Events and Gesture Events topics. Caution The W3C Pointer Events specification has undergone several revisions since its implementation in Internet Explorer 10. Additionally, the MS vendor prefixes on Pointer Events APIs are deprecated as of Internet Explorer 11. See Pointer Events updates for a summary of changes and compatibility
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
OS X Lionぽいスクロールバーを実装できてiOSにも対応した Skroll.js :: 5509
前略そんなわけでスクロールバー作りました。 一応目指していたところは、PCベースのサイトを作ったときにiOSで見てもスクロールバー実装したとこいい感じになるよ！っていうのです。 PCでLionぽいスクロールバー作りたいなと思って会社の合宿中に始めたのですけど、なんかいつの間にかiOSにも対応することになってて、動きにこだわり始めたら収集つかなくなってめちゃめちゃ時間かかりました・・・ 対象バージョンはある程度絞ってあるんですけど、結構納得いく動きにできたかなーと思います。動きはとりあえずPCとiOS（4.2以上）で見てください。 タイトルにないですけど、これはjQueryプラグインとして動作します（jQuery mobileは必要ないです）。自分で使う機会が多ければjQuery外してiOSに特化してもいいかなとかそういうノリなので、もし使う人がいればフィードバックください。 iOS用のスク
iPadでブラウザをドラッグすると画面全体が動く - OKWAVE
iPadの画面操作について教えてください。 iPadの画面操作について教えてください。 iPadでネット内のウインドウに書き込み等をする場合その枠内だけを動かす方法はありますか。 たとえばMixiメッセに返信したいとき、もとの文章を取り入れて所々に文章を入れたいのですが、ドラッグしようとすると画面全体が動いてしまい、できません。 どうしたらうまくいくのか教えてください。 画面全体にマスク 参考 http://ficc.jp/ こちらのページの最下部、「非公開作品集」をクリックしたときのように、ブラウザのサイズに関わらず画面全体にマスクをし、その上にFlashからHTMLを読み込んだオブジェクトをおきたいと思っています。 画面全体に対するマスクをかける方法について、何かヒントいただけないでしょうか？ ブラウザ画面全体のスクロールキャプチャー FireFOXで、ブラウザ画面全体のスクロールキャ
onchangeイベントを強制的に発生させる
お世話になります。 onchangeイベントをjavascriptで強制的に動作させたいと思っております。 発生させたい場合 ・ユーザーがtextボックスを入力 ・リンクボタンを押下した場合 簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/javascript"> function change(){ alert('test'); } function update(){ document.getElementById('1').value = "update"; document.getElementById('1').onchange = change; } </script> <input id="1" type="text"
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - niekjuh/touch-scroll: touchScroll is a lightweight jQuery plugin that enables inline scrollable content in mobile Safari on iOS, and other WebKit, touch-based browsers on Android.
Post by @0-9
javascriptのスクロールイベント | 村式流 イッパシエンジニアへの道