スマートフォンでのタッチイベントと移動を区別する方法 | スターフィールド株式会社
PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、 スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、 画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。 これは、jqueryのtouchstartイベントを使うではなく、 touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。 $(function() { $( 'div' ).on( { 'touchstart': function() { this.isTouch = true; }, 'touchmove': function() { this.isTouch = false; }, 'touchend': function() { if(this.isTouch == true){ // popupイベントを発生
スマホ用Webページにおける、タップやスクロールのイベント発火タイミング - Aqutras Members' Blog
こんにちは。id:naosuke2dx です。 梅雨でジメジメがすごい今日このごろ、皆様いかがお過ごしですか。 さて、今日の話はWebページ等でのイベント発火のタイミングについてです。 自分も何度か引っかかってそのたびに調べていたので、メモ的な目的もあります。 そもそもイベントってなんだっけ ｢ユーザを始めとしたあらゆるものが引き起こした、何らかのアクション｣のことをイベントと言います。 例えば、ユーザがクリックをした場合、そのクリックがイベントであるということです。 JavaScriptでは、このイベントをトリガーとして、様々な処理を行うことができます。 例えば、クリックした要素を変える、マウスが要素の上に乗っかったらその要素に影をつけてみるなどなど…。 有名どころのイベントだと、このようなものがあります。 qiita.com 標準イベントの他に、イベントを独自定義することもできます。
[JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js
スマホやタブレットの便利操作、プルダウンするとリフレッシュできる機能をページに簡単に実装できるJavaScriptの軽量ライブラリを紹介します。 リフレッシュは範囲やトリガーを設定でき、通常のプルダウンしてリフレッシュする挙動だけでなく、ヘッダを残してコンテンツだけというのもできる優れ物。 PulltoRefresh.js PulltoRefresh.js -GitHub PulltoRefresh.jsのデモ PulltoRefresh.jsの使い方 PulltoRefresh.jsのデモ デモはスマホ、タブレットでご覧ください。 ※デスクトップ環境では動作しません。 という訳で、iPadでデモページを見てみました。 デモではリフレッシュ時に、アラートが表示されます（もちろん無しにできます）。
![[JS]スマホの「プルダウンするとリフレッシュ」を簡単に実装できるスクリプト -PulltoRefresh.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/15ca24bfb4149f1510a5e0af56cfd65f35fded5f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120805.png)
ページの隅に隠せるコンテンツ実装「jquery.tabSlideOut.js」:phpspot開発日誌
GitHub - hawk-ip/jquery.tabSlideOut.js: jQuery plugin to create a side/top/bottom tab that slides out to show a feedback form, contact form, notepad etc. ページの隅に隠せるコンテンツ実装「jquery.tabSlideOut.js」 次のように通常はページサイドにしおりのように表示させておいてタップやホバーでコンテンツを表示する、という仕組みの実装が出来ます。 上下左右好きな位置に配置が出来ます 関連エントリ どこかで見たようなモーダルダイアログの実装「draggable-google-modal」 Bootstrapのモーダルダイアログを通知風にページサイドからスライド表示させる「notiModal」
タッチデバイスにhoverっぽい機能を付与するスクリプト・「Hover on Touch」
Hover on TouchはiPhoneやAndroidのようなタッチデバイスにPCサイトのhoverっぽい機能を付与する為のスクリプトです。上図はフリックしているところですが、タッチしている部分に変化が出ているのが分かるかと思います。 左は背景の色が変わっています。右はPCサイトでもよく見かけますね。マウスを乗せたら情報が出てくる的なもの。タップのように指を離してからの動作ではなく、触れた時点でアクションを起こすのでPCサイトでのhoverっぽい挙動を表現する事が出来る、という目的で開発したそう。説明下手で申し訳ありません； PCのhoverと全く同様の機能ではありませんが、これはこれで良いアイデアじゃないかなと思います。 Hover on Touch
iframe,embed,object,videoをレスポンシブ対応にするjQuery「Flexy」:phpspot開発日誌
iframe,embed,object,videoをレスポンシブ対応にするjQuery「Flexy」 2016年05月24日-
モバイルブラウザで画面の縦長・横長を検出する方法を再確認してみた - Qiita
※ iOS 8での挙動に関連して追加情報を書いてみました: Safari for iOS 8での画面回転とイベント はじめに モバイルブラウザ(iOS SafariやAndroid標準ブラウザ、Chrome for Androidなど)で、WebアプリのJavaScriptから端末画面が縦長(portrait)と横長(landscape)のどちらを向いているかを調べる方法は、Web上で検索すると色々出てくるのですが、特にAndroid対応を考えると、例えば「au開発者情報Blog: CSS3 MediaQueries で端末回転方向によるレイアウト切り替えができない」辺りに書いてあるように、やってみると上手くいかないことが色々と出てきたりするように思えます。 注意事項(参考) 厳密には、window.orientationやorientationchangeイベントは、現在はあくまでもベン
3 New JavaScript APIs You May Want to Follow — SitePoint
If you’re a frequent SitePoint reader and perhaps a follower of mine, you’re aware that I’ve written a lot of articles about HTML5 and JavaScript APIs. So far, I’ve published articles discussing APIs that you can start using today, even if with the use of a polyfill. Today I’ll break this habit by giving you a preview of some APIs that are still at a very early stage. To give you an idea of how cu
マルチデバイスで利用可能な固定ナビゲーションを実装できる「Smart Fixed Navigation」:phpspot開発日誌
Smart Fixed Navigation | Cody - Free HTML/CSS/JS resources マルチデバイスで利用可能な固定ナビゲーションを実装できる「Smart Fixed Navigation」。 ページの右下にメニューボタンを表示し、クリックすると開いて使えるナビゲーションが実装できます。 左上に配置するタイプが最近では一般的ですが、スマホは左手で操作するので右下も使いやすいかもしれませんね。 デモのデザインとアニメーションがいかしてます。 関連エントリ スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 スマホ用メニューっぽいスライドするメニューが作れる「jQuery Sliding Menu」 スマホ等用に複数階層のメニューが作れる「navgoco」 多階層のスマホサイトメニューを実装できる「Multi-Level
viewport内に入ったら処理を実行させられるjQueryプラグイン「isInViewport」:phpspot開発日誌
zeusdeux/isInViewport GitHub viewport内に入ったら処理を実行させられるjQueryプラグイン「isInViewport」 プラグインを利用すると in-viewport という擬似セレクタを使えて、viewportに入った時に特定の処理を実行させることができるみたい。 スクロールに連動させて表示・アニメーション等、何か処理をやりたいという場合にシンプルに実現できそうです。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」 スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 フルページスクロールするサイトを作るのに使える「fullPage.js」
スマホでpullしてズームできるJS「pull-and-zoom」:phpspot開発日誌
sandropaganotti/pull-and-zoom GitHub スマホでpullしてズームできるJS「pull-and-zoom」。 次のような若干アプリっぽいUIが実現できてしまいます。 Chrome(Android), iOSにて動作確認できているようです 関連エントリ スマホ等用に複数階層のメニューが作れる「navgoco」 スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 スマホ、PCで使えるサイドバー実装ライブラリ「Slidebars」 レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 スマホサイト、アプリ等に使えそうな120個のベクターアイコンセット
スマフォサイトにも対応可能の、インタラクティブなプロトタイプを作成する為のツールキット・「FRAMER.JS」
FRAMER.JSはスマフォサイトにも対応したプロトタイプ作成の為のフレームワークです。アニメーションを取り入れることでインタラクティブなプロトタイプを作成できる、という事を目的としているようです。使い慣れるまで少し掛かるかもしれませんが、慣れれば便利かも。 FRAMER.JS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」
http://cosao.net/archives/5524
ピンチやスワイプ、タップなどのジェスチャーを検出するライブラリ・「zingtouch」
[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS![[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/17cdfacd1e45aee2b86d8c20988b611f663292c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061001.png)
ネイティブっぽいフラットなモバイルWEBアプリの作成フレームワーク「App.js」:phpspot開発日誌
ネイティブアプリライクなWebアプリを実装する為のUIライブラリ・「App.js」