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
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
UIWebViewでリンクをクリックされたときのデフォルト動作を変更する - 強火で進め
ここでは例としてこちらのWebページをUIWebViewで読み込み、そのリンクをクリックした時の動作を置き換えます。 UIWebViewでリンクをクリックした場合には以下のdelegateが呼ばれます。 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationTypeここで navigationType の値をチェックすると何のイベントで呼ばれたかが確認できます。 ここにはサブミット(フォーム入力時のsumbitボタンが押されたとき)のときには UIWebViewNavigationTypeFormSubmitted 、リロードされた時には UIWebViewNavigat
sappari wiki - CoffeeScript
CoffeeScript とは、JavaScriptにコンパイルできる簡易言語。 JavaScriptの良いところはそのままに、RubyやPythonのようにすっきりと書ける。 既存のJavaScriptライブラリもシームレスに使える。 JavaScript Lintにも通る読みやすいJavaScriptが出力され、どんなJavaScript実装でも動作する。 （本家紹介より） なんだか良さそうだ！ CoffeeScript インストール Coffee コマンド CoffeeScript 言語リファレンス Cake ツール defunkt/coffee-mode for Emacs その他エディタ用プラグインなど
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" ,
Create Background Scrolling Effect with jQuery
Introduction Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my project which has a blue sky with clouds and it makes the whole website came alive. I think that's pretty impressive. In this tutorial, we're not only go through how to make it, we will have it in p
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
http://neteye.github.com/touch-gallery.html
Demo Click on one of the images below to view it fullscreen. Use your fingers or cursor keys to flick through the images. Click again (or press esc) to return to this view. NETEYE Touch-Gallery A fullscreen photo gallery for touch-devices. Supported Browsers The plugin was written and optimized for Mobile Safari running on the iPad or iPhone 4. It also runs in Dektop Safari, Firefox 4, as well as
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://indigonote.com/2011/05/17/javascript-twitter-button/
http://indigonote.com/2011/09/14/original-like-button/