jQueryでスマホのスクロールイベントを無効化する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
スマホサイトで使えるコピペTips集(Javascript / CSS3 / HTML5) | hi-posi Front-End blog
※ほぼ備忘メモで説明をかなり省いているので、ある程度制作知識のある方向けのエントリーです。 ※JavascriptはjQueryを使う場合が多いので読み込んでいる前提です。 目次 振り分け系 ユーザーエージェントを判別する ページを横幅320pxに合わせて拡大(zoom)する 画面の回転（Landscape-Portrait）イベントを取得する 現在Landscapeモードか、Portraitモードかを調べる スクロール制御系 タップするとページの一番上にスクロールで戻る タップすると指定したidの位置までスクロールで戻る タップすると指定した位置までスクロール無しで戻る iPhoneのSafari(iOS7含む)でスクロールを禁止する タッチ制御系 タッチ開始を検知する タッチ中を検知する タッチの終わりを検知する フォーム制御系 フォームのラベルのタップを有効にする フォームのペース
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
URLスキームからのスマフォアプリ起動のフォールバック
前段 ブログリハビリ..._:(´ཀ`」 ∠): URLスキームで任意のアプリ（今回はLINE）を起動したい フォールバックとして、アプリのURLに誘導するなりアラートするなりしたい Android Galaxy S3 (4.0.3) と Xperia SX (4.1.2) のAndroidブラウザで確認する限りは、下記のようなコードで実現できた。 var iframe = document.createElement('iframe'); iframe.className = 'is-hidden'; iframe.onload= function() { alert('LINEアプリ、インストールしてなくない？'); iframe.parentNode.removeChild(iframe); }; iframe.src = 'line://msg/text/loremipsum...
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
iScroll 5, smooth scrolling for the web
Are you looking for the smoothest scroll for your web pages? Look no more. iScroll is the best smooth scrolling, high-performance, multi-platform javascript scroller that will add a sleek and modern look to your web pages. Get everything you need to know and understand about the fastest and smoothest scrolling library, iScroll. iScroll is a multi-platform JS library that lets you add scrollbars to
Touche.js - seamless touch event mapping for your click events
Touche.js - seamless touch event mapping for your click eventsEffortlessly re-map click events to touch events on touchscreen UIs tl;dr Removes the 300ms delay (after the user lifts their finger), applied by all touchscreens devices and immediately invokes your click handlers. Takes your click events applied with jQuery and silently re-maps them to the "touchend" event for devices that support tou
Switchery - iOS 7 style switches for your checkboxes
What is Switchery? Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly. Licensed under the MIT License. Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+ If you like this module and you're a fan of iOS 7 sty
Safari on iOS 7 and HTML5－firt.dev
Problems, changes and new APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 13 years ago (18 Sep 2013) About 18 min reading time #ios #html5 #webview #homescreen webapps Apple has rolled out iOS 7 with iPhone 5S and iPhone 5C . As expected, Apple has published just 10% of the necessary information for web developers, and I can say without fear of mistake that this is the buggies
iOS6 webkit timer bug workaround
ios6-timers.js ��[⪪ ��[⪪ (function (window) { // This library re-implements setTimeout, setInterval, clearTimeout, clearInterval for iOS6. // iOS6 suffers from a bug that kills timers that are created while a page is scrolling. // This library fixes that problem by recreating timers after scrolling finishes (with interval correction). // This code is released in the public domain. Do with it what
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
GitHub - cheeaun/tappable: A simple, standalone library to invoke the tap event for touch-friendly web browsers.
noScroll - (boolean: defaults to false) Whether or not to scroll when moving on the element. activeClass - (string: defaults to tappable-active) A string indicating the active class applied to the element. onTap - (function) The function to execute when tapped. onStart - (function) The function to execute when touchstart event is fired. onMove - (function) The function to execute when touchmove ev
iOS6 webkit timer bug workaround
ios6-timers.js p��પ ��પ (function (window) { // This library re-implements setTimeout, setInterval, clearTimeout, clearInterval for iOS6. // iOS6 suffers from a bug that kills timers that are created while a page is scrolling. // This library fixes that problem by recreating timers after scrolling finishes (with interval correction). // This code is released in the public domain. Do with it what y
iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 | DevelopersIO
iOS6出た！ iOS6が出来ましたね。社内ではiPhone5を入手した社員がLTEの速度に驚いていました。私はまだiPhone4Sですが、iOS6にして新しい機能を楽しんでいるところです。さて、iOS6にしてSafariの仕様が変わって困ったと言った投稿が海外のフォーラムで挙っています。それも、基本的なPOST通信についてです。これは困ったということで、動作を確認して対策方法についてシェアしたいと思います。 どんな時にPOSTをキャッシュする？ まずはどんな状況か確認してみたいと思います。 Cache-ControlもExpiresも無い場合 ： iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control max-age=0指定 と Expires指定 ： iOS6 Mobile SafariはPOSTをキャッシュする Cache-Control: no-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - IjzerenHein/autolayout.js: Apple's Auto Layout and Visual Format Language for javascript (using cassowary constraints)
GitHub - matthewhudson/current-device: The easiest way to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).