You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか おすすめ iPhone、Androidで使える!撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト用の軽量ライブラリ QUOjs HTML5のWebアプリで使えるジェスチャーにはどんなものがあるのか調べていたら、QUOjsというライブラリを見つけたので試してみました。 サイズが16KBと軽量なライブラリですが、簡単にイベント処理を実装できるので便利です。今回使ったバージョンは2.2.0 になります。 以下のサイトからダウンロードできます。 QuoJS 英語ですが以下のページに使い方が書いてあり
スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture***」というイベントが「二本指以上」の操作(ピンチイン、ピンチアウト、回転等)を行っている時
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
この記事は賞味期限切れです。(更新から1年が経過しています) 以前に紹介したSammy.jsのサイトを見に行ったら、 何やら色々とバージョンアップしてフレームワーク的な物に生まれ変わっていました。 もうちょっとシンプルな物が欲しい場合もあるので、エクササイズを兼ねて書いてみました。 HashChangeとは たとえば、いわゆるページ内リンクで http://www.example.com/ から http://www.example.com/#foobar にURLが変わったタイミングにイベントを受け取って なんやかんやする為のもの。 わりと有名だと思われるのが、jQuery hashchange eventプラグインですね。 » Ben Alman » jQuery hashchange event あとは、冒頭で言ったSammy.js。こちらもjQueryプラグインです。 » Samm
DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない
Internet Explorer 10 and Windows apps using JavaScript support Cascading Style Sheets, Level 3 (CSS3) Transitions. Transitions enable you to create simple animations by smoothly changing Cascading Style Sheets (CSS) property values over a specified duration of time. For instance, you could vary the size and color of an object over a period of 10 seconds. What you might have previously accomplished
Chrome, Safariは webkitTransitionEnd Firefoxは transitionend Operaは oTransitionEnd IE10は msTransitionEnd??? あと、transitionを適用するプロパティが複数あると その分だけイベントが複数する回数が増える。 あと、transition-propertyで適用させるプロパティを明示させないと 意図以上に発生する。特にopera function funfun(e){ $("#log").prepend("<div>" + $(this).attr("id") + ":" +e.type + "</div>"); } $("#yes, #no, #soso") .bind("webkitTransitionEnd", funfun) // Chrome, Safari .bind("tr
Togetterの「続きを読む」ボタンはVimiumのhit-a-hintに反応しないので、マウスでクリックしないと続きが読めなくて大変です。 というわけでUserScript化。 togetterの"続きを読む"を自動でクリック · GitHub // ==UserScript== // @match http://togetter.com/li/* // ==/UserScript== (function (element) { if (element !== null) { var event = document.createEvent("MouseEvents"); event.initEvent("click", false, true); element.dispatchEvent(event); } })(document.querySelector(".rich_butt
最終更新日 Sat, 03 Oct 2009 20:50:09 +0900 最後のコメント Sat, 11 Oct 2014 13:45:46 +0900 ブックマーク 久しぶりのエントリです。 随分と遅くなりましたが、2009/9/6に開催されたKanasan.JS JavaScript第5版読書会#8& 懇親会のレポートです。 第5版読書会も8回目となる今回は僅かに残ったイベントの章と、Formの章を読みました。 初の京都開催 今回は参加者のtaijiさんから紹介を頂いた、 場とつながりラボ home's vi(ホームズ・ビー)で行いました。 京都の町屋なのですが、いつもと違った感じで、とても新鮮でした。 時間の流れ方がゆるやかに感じました。田舎に行った時のような間隔です。 合成イベント 今回は特に難しい所もなく、淡々と進んでいたのですが、唯一気になった事がありました。 それが合成イベ
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定(2フィンガータップ、ロウテイト、ピンチアウト、ピンチ) 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
連載:jQuery Mobile入門 第5回 jQuery MobileでJavaScriptプログラミング ― グローバル設定とイベント ― 山田 祥寛 2012/05/17 ■jQuery Mobileのイベントを理解しよう jQuery Mobileで提供されるイベントは、ごく大まかには「ページ・イベント」「タッチ・イベント」「そのほか端末操作に関わるイベント」に分類できる。その中で、特にページ・イベントとタッチ・イベントは頻繁に利用することになるはずだ。本稿でも、この2点に絞って解説を進めていく。 ●ページ・イベントを理解する jQuery Mobileがページの描画/遷移に当たってさまざまな自動処理を行っていることは、これまで何度も述べてきた。そして、これら自動処理を手軽にカスタマイズするのがグローバル設定の役割だったわけだ。 もっとも、グローバル設定は、あくまでjQuery M
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ(Mobile Safari)のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ(以下、Mobile Safari)にて、以下のコードを実行してみます。 (分かりやすい様にjQueryを使用させて頂きました) なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
はじめに今回は Google Chrome と Safari に限った話。他のブラウザはしりません。検証に使ったバージョンは win 版の Google Chrome 6.0.495.0(Official Build 56152) devSafari 5.0.1(7533.17.8)です。また CSS のプロパティに関してはベンダープレフィックスは記事上では省いていますが実際のCSSではちゃんとプレフィックス付きで書いています。 サンプルTransition and webkitTransitionEnd Event - jsdo.it - share JavaScript, HTML5 and CSS hover 擬似要素や JavaScript からのインラインスタイル変化などが起きたときその変化をアニメーションで表現する仕組みです。 サンプルコードではクリックしたときクラスを付けたり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く