【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
スマホアプリのような横から出てくるサイドメニューを実装できるjQueryプラグイン
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
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')); }) });
スマートフォン（iPhone,Android,iPad）をjQueryで簡単に判別する方法 : おばけノート
下記のように書くと、各スマートフォン別にCSSを適用することが出来ます。 （「display:block;」とか「display:none;」とか） userAgentの名前を指定すれば良いので、CSSハックより見た目で分かりやすいです。 <script type="text/javascript"> $(document).ready(function(){ var agent = navigator.userAgent; if(agent.search(/iPhone/) != -1){ $('#hogehoge').css({display : 'none'}); }else if(agent.search(/iPad/) != -1){ $('#hogehoge').css({display : 'block'}); }else if(agent.search(/Android/)
jQueryでiPhone、iPad、Androidのそれぞれ縦・横画面の向きを判別してCSSクラスを追加する方法｜BLACKFLAG
iPhoneやAndroid（アンドロイド）向けのスマートフォンサイトを制作する際、 各キャリアの縦向き、横向きを考慮した画面設計やHTML構成を考えて制作しなければなりません。 それぞれ端末ごとに細かな設定の変更が必要な場合など OSの判別をする必要になってきますが、 そんな際に使える、jQueryを使って簡単にOSを判別し、それぞれCSSクラスを追加し 画面の縦／横それぞれ切り替わった際にも別々のクラスを追加するスクリプトの紹介。 jQuery SmartPhone SWITCH アクセスされたOSと画面の向きを判別して それぞれ＜body＞タグにCSSクラスを追加します。 追加するCSSクラスは以下の通り。 —————————————————– iPhoneには「body class=”iphone”」追加 iPadには「body class=”ipad”」追加 Androidには「
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
Media QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠す - かちびと.net
シンプルで良かったので一応メモ。レスポ ンシブWebデザインのTipsです。Media Queries とjQueryを使用して、スマフォでアクセス した時だけ、邪魔になりがちなナビゲー ションメニューを上に隠す、みたいな手段。 割と良かったので参考までに記事に備忘録 として残しておきます。 隠すというと語弊があるんですけど・・・凄くシンプルな方法です。 Pull-Down-for-Navigation 通常のPCでは普通のナビゲーションですが、スマートフォンの場合、このように上に隠れています。しかし、タップで降りてくる、引っ張る、などのギミックではありません。 まずはデモをご覧下さい。 Sample QRコードでもアクセス出来ます。 Media Queriesの内容はだいたい予想が付くと思いますのでjQueryだけ。これもかなり単純ですが。 function checkWidth ()
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
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法
今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN （スマートフォンサイト） （Yahooさんの手法とは違うかもしれませんが） その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。 そもそも、iOSのSafariやAndroidの「ブラウザ」は、 ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、 URLバーが引っ込む仕様のようです。 （あくまで推測。ページ内リンクなどで、そうなるのが根拠です。） まぁ、これのなにがいいのかというと、 ページの表示範囲を少し広く見せられる。 ってところでしょうか。 やり方は簡単です。 JavaScriptでWin
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
