pushState, popState - 酔いどれコード
github でリポジトリのディレクトリをたどっていくときのエフェクトが気になったので調べてみた。 戻る・進む とりわけ気になるのが、アドレスバーの内容は書き変わるけれど、画面の更新は一部しか起こらないこと。しかも、ブラウザの戻る・進むボタンに対しても同様の画面の更新が起きること。どのイベントをキャッチしているのだろう？onload イベントだとすでに画面が切り替わってしまっているので、使われていなさそう。 pushState, popState github の Javascript のソースを見てみると、pushState というのを使っているということが分った。push とくれば、そう pop。戻る・進むボタンをクリックしたときに popstate イベントが発生する。そのイベントの中で画面更新の処理が走っていた。 サンプル カレンダーを表示するページを作ってみた => http:/
history.pushStateをつかってみる。 - hello, world.
pushState、実際にサンプルつくってみた。 http://dl.dropbox.com/u/131731/sample/pushstate/index.html リンク遷移時にページ内で必要な部分のみ表示が代わり、かつ、 ページのtitle、ページのURLも読み込んだ内容に適応したものにかわるよう。 HTMLは事前にこんな感じになっている事想定。 HTML //トリガーとなるaタグ、classがpjaxのものを対象としてる //<a href="リンク先" class="pjax" title="遷移先のページのタイトル">〜</a> <a href="index.html" class="pjax current" title="index">index</a></li> <div id="main"> //この内容がページごとに置き換わる </div> JavaScript jq
Android 4.0でtouchendが実行されない？！ - Gravity Pianist -個人的メモログ-
この問題に数日かかったので……なんか悔しくて……orzスマートフォン用のサイト作っていく際に、同一の画面上で左右のスワイプ検知とaタグによるリンク、上下のスクロールをやらなければならなくなってしまった。 とりあえず、スマートフォンのタッチを検知するイベントである touchstart,touchmove,touchend にスワイプの検知するコードを書いていった。 なんどか試していくうちにスワイプを検知することには、成功した。 だが、aタグによるリンクがあるため、各イベントで、event.preventDefault() でデフォルトのイベントを停止させていなかった。iPhone4SやAndroid 2.xなどで試して特に問題もなかったので安心しきっていたら、Android 4.0 で正常な動作をしない。具体的にいうと、スワイプにつられて動く画面が、スワイプを終えても動きっぱなしになってい
facebookの「いいね！」ボタン設置方法 | DiimoWeblog
facebookページに「いいね」「友達にすすめる」ボタンを掲載するための方法です。iframe版、facebookJavascriptSDKをロードしたHTML5版、XFBML版(facebookが提供する独自タグ)の3種類の方法で設置できます。公式サイトでコードを取得して、指定されたソースコードエリアにタグをそのままコピー&ペーストするだけです。 facebookの「JavaScriptSDK」はfacebookに関する様々なアプリケーション機能を提供するもので、スクリプトが読み込まれた後、FB.initで初期化を行い、各API機能(ウォールへの投稿、ウォールデータの取得、ユーザーデータに関する情報の取得、ログイン情報の共有など)を利用する事が出来るようになります。全ての機能を利用するためには、facebookアプリとして登録したappIdが必要になりますが、ソーシャルプラグインの利用
Dragdealer JS
Drag provider – the good stuff Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders. 2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency. Take a look through all the demos below to understand how it works. Links / download code.google.com/p/dragdealer/ blog.ovidiu.ch/dragdealer-js HTML
Image Flip Using jQuery - Webmuch
Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery. View Demo 1 View Demo 2 Download Source Code Preview: Note: Image fli
The Wall | A Javascript plugin for Mootools.
ONE COORDINATE, ONE POSITION The Wall enables to create an endless grid. You choose the number of elements, The Wall will see to the rest. Every moment you may know the position of your wall or move it where you like better by clicking or dragging it. What could be simpler? CUSTOMIZED CONTENTS With The Wall you decide the position of your contents punctually. Every plug is ready to hold your conte
Canvas+Javascriptで動かす物理エンジンBox2DJS | idealoops
html5で作られたサイトを見るうちに個人的に心を奪われた、Canvas要素での物理表現。それを実現するライブラリ「Box2DJS」について紹介したいと思います。 きっかけ。Webページ上で自然にモノが動くってすごい！ きっとみんな好きなyugop.com。 Flashで作られたサイトですが、この実験的な感じと簡潔なデザインの組み合わせのセンスの良さは僕の中で永遠のヒーロー。 ところが、最近になりyugop.comと同じくらい、ちょっと別の角度から衝撃を受けたのが株式会社コンテンツのサイト。 HTML5で制作された国内企業サイト20から現状の制作状況を知る!!やWeb Designingでも取り上げられていましたが、「なんじゃこりゃ！？」って感じです。 実験的な要素が盛りだくさんですが、コーポレートサイトとしてもしっかり機能しつつ、htmlで書かれているところがスゴイ！ 「めっちゃ遊んでる
jQuery.flickSimple.js
※アイコンはNIXUS Icon Packを使わせていただきました。 特徴 iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。 同じような動作をするプラグインは他にもありますが、このプラグインについては以下のような目的のもとに作りました。 フリック動作のみを実装する 見た目に関連する部分は、なるべく自由にできるようにする その代わりに、拡張しやすいようにする 内部のパラメータに簡単にアクセスできるようにする コールバック関数を用意する iPhone、Androidだけでなく、PCのブラウザ上でも動作させたい IE6でも動いた iPhone、Safari等、CSSアニメーションが使えるものは使う iPhone、Androidの縦持ち・横持ちに対応する 子要素の中にアンカーや画像があっても大丈夫 Macの場合、画像がドラッグさ
RefineSlide
Features A few transitions to play with Responsive down to mobile scale CSS transition & 3D transform support Javascript fallback fade transition Auto-formatted, responsive thumbnails Good browser support (IE7+) HTML captions Hardware acceleration on supported browsers Free to use and abuse as you like Simple, semantic markup Lightweight: 12k minified (4k gzipped) Installation - Essential steps -
ぽんぽこ日記
2023-12-30 2023年の振り返り 今年の振り返り 身辺雑記 近況報告 雑貨 読書 仕事 2022年の暮れからFlutterのプロジェクトに関わっており、8月にリリースしました。Swiftとは勝手が異なることも多く戸惑うこともありましたが、そこそこのボリュームのアプリをやりきったのでFlutterのスキルはついたと思います。 つかった技術としては… 2023-12-22 今年読んだ本 図書館 読書 身辺雑記 2023年に読んだ本。 2022-12-30 2022年の振り返り 今年の振り返り 旅行 自転車 身辺雑記 Flutter 2022年の振り返り。読んだ本、旅行の記録など。 #一年の振り返り 2022-08-30 pyxelをRustから使ってみた。 rust pyxel conway's lifegame Pyxelゲームエンジンを使ってRustでライフゲームを作ってみた。
UIWebViewでリンクをクリックされたときのデフォルト動作を変更する - 強火で進め
ここでは例としてこちらのWebページをUIWebViewで読み込み、そのリンクをクリックした時の動作を置き換えます。 UIWebViewでリンクをクリックした場合には以下のdelegateが呼ばれます。 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationTypeここで navigationType の値をチェックすると何のイベントで呼ばれたかが確認できます。 ここにはサブミット(フォーム入力時のsumbitボタンが押されたとき)のときには UIWebViewNavigationTypeFormSubmitted 、リロードされた時には UIWebViewNavigat
Headphones & Earbuds
Orders are shipped from our warehouse in the bonded area Shenzhen, China. Warehouse opening hours: Monday through Friday, except holidays, from 8:30 a.m. to 5:30 p.m. CST. Orders placed before 12:00 p.m. (mid-day) will be processed and shipped out the same day. Orders placed after 12:00 p.m. will be processed and shipped out in the next business day. Once your package has been processed, it is rea
CoffeeScriptを使ってTitaniumでiPhoneアプリを作る - AUSGANG SOFT
最近、まわりでCoffeeScriptがすごいという声が。 CoffeeScriptって？ Javascriptを洗練させてPythonやRubyライクな文法で書ける言語。 コンパイルするとクロスブラウザでJS Lintも通るJavascriptになるというもの。 某WebベースのTwitterクライアントも、JS部分はこれで書いてるとか。 CoffeeScript - sappari wiki https://sites.google.com/site/sappariwiki/coffeescript CoffeeScriptについては、日本語だと、ここがよくまとまってます。 さっそく、CoffeeScritptを入れて、Titaniumの最初のコード(プロジェクトを新規作成するとできるやつ)をCoffeeScriptで書きなおしました。 https://gist.github.com/
sappari wiki - CoffeeScript
CoffeeScript とは、JavaScriptにコンパイルできる簡易言語。 JavaScriptの良いところはそのままに、RubyやPythonのようにすっきりと書ける。 既存のJavaScriptライブラリもシームレスに使える。 JavaScript Lintにも通る読みやすいJavaScriptが出力され、どんなJavaScript実装でも動作する。 （本家紹介より） なんだか良さそうだ！ CoffeeScript インストール Coffee コマンド CoffeeScript 言語リファレンス Cake ツール defunkt/coffee-mode for Emacs その他エディタ用プラグインなど
CoffeeScript
☕ CoffeeScript CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript's less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it's just another way of saying it. Disclaimer: CoffeeScript i
jQuery Mobileで提供されているページ系イベントについてのまとメモ
jQuery Mobileで設定できるイベントについて jQuery Mobileではモバイル端末向けに色々なイベントが追加されています． tap, taphold, swipe, swipleft, swiprightなどのイベントもありますが，今回はjQuery Mobileのページが切り替わったり読み込まれたりするときに配信されるページ系イベントについて紹介します． いま気がつきましたけど、swipleftとswiperightはiOSらしいおお振りなジェスチャに対応したインタラクションを作れそうでいいですね。 bindするとき こんな感じで，各イベントの動作をbindします．基本的には、documentに直接bindして、event.targetから絞り込めばいいかなと思っています。 $(document).bind('イベント名', function(event) { // ev
Androidブラウザでviewportのwidth指定
Androidブラウザでviewportのwidth指定 AndroidブラウザはiPhoneのようにviewportのwidthに数値が指定できません。(ネットを見ていると指定できると書いているページもよくあるのでデバイスによって違うのかも？) タイムリーに@takazudoが同じようなことをやっていて、対応方法が公開されていました。 ただ、私の検証環境、IS01やGALAXY S、Androidシミュレータだとうまく動かず。デバイスの実装差異かなんかかな。 で、色々と試行錯誤していたのですが、meta要素で「content="width"」を指定せず、JavaScriptで次のように指定すると「content="width=640"」っぽい表現が可能です。 $(window).bind('resize load', function(){ $("html").css("zoom" ,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://moriwaki.net/cms/?p=503
Loading...
