iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
Responsive Navigation
Pull Down for Navigation Demo See the tutorial here Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada
iPhoneやiPadでドラッグやリサイズ可能なコンテンツを容易に実装出来る・jQuery.ui.touch-punch.js - かちびと.net
iPhoneやiPadのタッチイベントに 対応させるjQueryプラグインです。 軽量なんですが、jQueryUI併用な ので一応軽量とは謳わないように しておきます。導入も結構簡単 なので覚えておいて損は無いかも。 iPhoneやiPadでドラッグやリサイズを可能にするライブラリです。もちろんiPhoneだけでなく、PC側でも動かせます。 ただ、要素をドラッグしたりリサイズしたり、だけではなくドラッグ可能なコンテンツをネストしたりドラッグコンテンツ内にスライダー入れたりとかも出来る。 試しにjQueryMobileと併用しました。サンプルどうぞ。QRコードも用意しときました。 sample 使い方 <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script src="http://code.jque
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
iPhoneやAndroidなどスマートフォンのスワイプ操作で動かせるカルーセルを実装する非依存型スクリプト・SWIPEVIEW - かちびと.net
iPhoneやiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト にも導入もしやすいかもしれません。 スワイプで動かせるカルーセルです。他ライブラリに依存しませんので使い勝手はなかなか良いかなと思いました。この手のはカクカクしがちですけど、これは動作も結構スムーズです。多少はありますけどね・・ まだ画像しか対応していませんが、今後対応していくとの事です。jsファイル自体も8KBほどの軽量スクリプトですよ。完璧とは言いませんが今まで触った中でもなかなかスムーズな方ではないかと。 サンプル作りましたので以下よりお持ちのスマフォでどうぞ。 Sample お持ちではない場合はスクリーンキャストをご覧ください。 エミュレーターですけど、動作
導入も手軽でiPhoneなどにも自動でレイアウトを最適化するシンプルなイメージスライダーを実装出来るjQueryプラグイン・Slides - かちびと.net
レスポンシブWebデザイン対応のイメージ スライダーです。かなり沢山出てきました ね。こちらはcssやHTMLもシンプルで済む のでコードをシンプルにしたい際は使い 勝手が良さそうです。こうして選択肢が 増えるのは凄くうれしいですね。 続々出てきますね・・・こちらもレスポンシブWebデザイン対応のスライド。こちらはMedia Queriesを使用していないようなので、いつも通りのマークアップで手軽に実装出来るのが特徴みたいです。 パッと見は普通ですが、どのようなモニターサイズでもレイアウトを崩すことなくスライダーとして機能してくれます。slidesjsベースで作っているようですので2つ先、3つ先の画像に移動しても余計なアニメーションがありません。 スクリーンショット スマートフォンで閲覧しても自動でスライドごとリサイズしてくれます。少しだけ動きがアレですかね？ コード <script sr
Mobile Boilerplate: A best practice baseline for your mobile web app
★ Analytics, icons, and moreA lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icons; and several mobile-focused tools and helpers. ★ Normalize.css and helpersIncludes Normalize.css v3 — a modern, HTML5-ready alternative to CSS resets — and further base styles, utilities, and media queries.
11 Javascript Plugins Optimized for Mobile Devices (With QRCode for Quick View!)
11 Javascript Plugins Optimized for Mobile Devices (With QRCode for Quick View!) Introduction The popularity of mobile devices has increased dramatically within these few years. We have responsive website that transform itself to different screen size and now we have a bunch of javascript plugins built and optimized for mobile as well. When I was searching for resources, I was having this issue th
スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER - かちびと.net
スマートフォンやiPadなどのタブレットはもちろん、 様々なウィンドウサイズにも自動でレイアウトを 調整するレスポンシブなjQueryスライダーのご 紹介。FLEXSLIDERは4KBと軽量で、実装も 手軽なので覚えておくと重宝しそうです。マーク アップも簡単なのでiPhone向けサイトの構築 時に導入を検討したいですね。 以前もレスポンシブWebデザイン対応のスライダーをご紹介しました（Blueberryというスクリプトです）が、こちらは加えて軽量なスクリプトで表示も速いようです。 見た目はシンプルなスライダーですが、iPhoneやiPadのようなウィンドウサイズの狭いデバイスにもレイアウトを自動で調整してくれます。スクリプトも4KBと、とても軽量なのでMediaQueriesとうまく併用したいところですね。 iPhoneでの表示。自動で幅を調整しています。 iPadの幅だとこんな感じ。
iPhoneとiPadでviewportを分けるJavascript
iPhoneとiPadは解像度がデラ違うもんだがよーmetaのviewportが同じだっだら表示がえろー崩れるからJavascript先生。これは技というにはあまりにもおこがましいですが単純にifでユーザエージェントからviewportを分けてるだけ。でも便利かも。 Javascriptで書くとこんな感じ。 var d = window.document;if(navigator.userAgent.indexOf('iPhone') > -1) d.write('iPhone用のviewport');else if(navigator.userAgent.indexOf('iPad') > -1) d.write('iPad用のviewport');といった具合。これをhead内で呼び出すのみ。たったこれだけでiPadにも対応できるんだからよく設計されてるよなぁMobile Safari
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Image Gallery
Clarity Consulting