Scrollable Div
((( spellific ))) Practice spelling while playing a fun word game! Click here to play
Overthrow
A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design. What is this all about? You want to use CSS overflow in your designs, but overflow doesn't work properly in many browsers, particularly mobile ones. Many popular mobile browsers treat overflow: auto the same as overflow: hidden, cropping overflow content from view, and leaving users no way to a
スマートフォン対応でよく使う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プラグイン - makogの日記
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル（iPhone/Androidでもご覧いただけます） jQuery.flickSimple ダウンロード（github） これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです - pig's diary
iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください！ 公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。 デモページ がありますので、見てみてください。 http://stakam.net/jquery/flickgal/demo ※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。 実装のしかた 説明ページを見てみてください。 http://stakam.net/jquery/flickgal/ 基本的にはこんな風に実装する方式です。 いくつかのルールにそっ
Touch and mouse | Articles | web.dev
Introduction For close to thirty years, desktop computing experiences have centered around a keyboard and a mouse or trackpad as our main user input devices. Over the last decade, however, smartphones and tablets have brought a new interaction paradigm: touch. With the introduction of touch-enabled Windows 8 machines, and now with the release of the awesome touch-enabled Chromebook Pixel, touch is
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
FlashからCreateJSに出力されたCanvasアニメーションをスマフォ用に組み込んだ断片メモ
CreateJSのコードを組み込んでみた 前提、ともかく現在の仕事においてアニメーションの導入という要件が出てきて、JavaScript書いてる者としてどのように解決しようかと相談した結果、下記の状況・前提からFlashのToolkit for CreateJSを利用することに決めた次第。 自分でアニメーションの動きを作ったことない アニメーターな方がFlasher 取り急ぎカッコ良く動いて欲しい が、今後を考えるとCSSでFlashの動きから書き起こすのダルい という理由から下記のソリューションを導入する方向になりました。（今の時点で本当にデプロイまで至れるかは、まだ手探りなので参考までに） CreateJS | A suite of Javascript libraries and tools designed for working with HTML5 Flash to HTML5
スマホ向けサイト制作の実装＆使えるTips10選
スマホ向けサイト制作の実装＆使えるTips10選：jQuery Mobileでスマホ向け企業サイト構築（3）（1/4 ページ） まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基本的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
How To Design A Mobile Game With HTML5 — Smashing Magazine
Tricks and techniques for making an HTML5 game. In this post, Eoin McGrath creates a very simple game that works on most smartphones as well as modern browsers. The great thing about these titles is that they work equally well on both mobile and desktop using the same code. Could HTML5 finally fulfill the holy grail of “write once, run anywhere”? Meet Touch Design for Mobile Interfaces, Steven Hoo
Responsive Websites
Eric Wendelin is one versatile dude. When I met him he was writing Java at a small startup called Sun / Oracle, and now he's writing front-end code for a startup -- that's a big leap. With this responsive design post, Eric flexes a little muscle and shares his process for putting together a responsive website. Not long ago, the biggest challenge for a web engineer was making sites that worked well
Ejecta - Impact
A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS & tvOS e·jec·ta, noun – debris that is ejected during the formation of an impact crater Ejecta is like a Browser without the Browser. It's specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms – only Canvas and Audio elements. This focus makes it fast. JavaScript code is executed directly by a JavaScrip
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Div Scroll with android 2.3.3
公海555000kk线路检测—首页（欢迎您）
flipsnap
http://team-pag.interprism.co.jp/member/noguchi/blog/2010/10/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%92%E7%BA%8F%E3%82%81%E3%81%A6%E3