pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax

Quick Tip: Learning jQuery 1.4's $.proxy | Nettuts+ jQuery 1.4で追加されたjQuery.proxy()、この使い方について解説がされていましたので、ご紹介。自分なりに変化させたりしていざチャレンジ！！ jQuery.proxy()ってなに？ This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the

jQuery Mobile のリファレンス的なものを作りました。 取り敢えず叩き台で、ツッコミなどあればコメントください！ ※RC2版に対応しました Page 要素 属性 値 概要 div data-role page ページ 設定 値 既定 備考 data-fullscreen boolean false フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある） data-add-back-btn boolean false 戻るボタンの自動生成 data-back-btn-text 任意 "Back" 自動生成された戻るボタンのテキスト data-keep-native 任意 ネイティブで利用するUIをセレクターで指定する data-dom-cache boolean false ページをキャッシュする data-theme 任意 c テ

history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function

jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery, you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome. With the importance of navigation in mind, let’s start our journey trough our selection and hopefully you will find the one that will suit your

Every other week, we'll take an ultra focused look at an interesting and useful effect, plugin, hack, library or even a nifty technology. We'll then attempt to either deconstruct the code or create a fun little project with it. Today, we're going to take a look at a plugin that implements a pretty neat effect -- it's pretty hard to explain in a sentence so you may as well click on the continue but

Image sliders and sideshows have become an essential element in web design. They are a great way to display information and visual content in an interesting way. From the classical […] Image sliders and sideshows have become an essential element in web design. They are a great way to display information and visual content in an interesting way. From the classical slide-to-the-side method to modern

Methods for developing drag and drop styles have been around for years. With the increase of programmers working for open source scripts like jQuery it’s not a surprise we are seeing an upheaval of these older methods. The JavaScript library is very adaptive and offers some major improvements to our new age web. We’ll be going over a lucrative script you can use to create dynamic drag and drop box

2011年02月14日 URL #!的な話題の関連記事まとめ #!関連のエントリーが調べにくいので目にとまったらここに追記していく。 TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場 NewTwitterとかFacebookのAjaxなURL(#!)を変換する奴を書いた - 金利0無利息キャッシング – キャッシングできます - subtech Tim Bray: 「URLに#!入れるな」 - karasuyamatenguの日記 urlに#!とか入れるなという話と、ひとつのURL≒ひとつのコンテンツという原則の話 さらなる「#!」URL批判 - karasuyamatenguの日記 HOKYPOKY.BLOG » 「#!」を含むURLについて YappoLogs: #!なんか糞だ ツイート Prev E

There are several ways to define a block of JavaScript functionality. Learn which is the most appropriate one for your particular use case.

CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」 iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。 そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。 jQuery.transitionAnimate.js 新しいバージョンを「transitionAnimateをバージョンアップ」からダウンロード可能です $(セレクタ).transitionAnimate(params, duration, easi

Home » Tutorials » Basic Beginners’ Guide to Installing a jQuery Lightbox Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning! Have you always wanted to add those cool Javascript lightbox

chromeとsafariを対象とする場合 if(!jQuery.support.checkOn){ alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです'); } if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。 FirefoxとOperaを対象とする場合 if(jQuery.support.checkOn && jQuery.support.noCloneEvent){ alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです'