pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
pjax - 実装｜PORTFOLIO PAPER by FAT
pjax - jquery plugin 10 pjaxはデータの読み込みと描画の冗長部分を省略することで非常に高速かつ低コストなページ移動を実現する、HTML5で実装される次期標準ブラウジング機能です。 pjaxはこのプラグインを使用することでサーバーに手を加えることなく簡単に導入できます。 最新版のダウンロード プラグインの最新版はGitHubで公開していますのでそちらからダウンロードしてください。 GitHub：https://github.com/falsandtru/jquery.pjax.js ファイル：https://raw.github.com/falsandtru/jquery.pjax.js/master/jquery.pjax.js 概要 サイト内のページ移動において指定したHTML要素（異なるコンテンツを持つ領域）のみ更新することでページ移動を高速化します。ajax
レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。 設置方法 > DEMO > DOWLOAD 設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。 プラグインのダウンロードは本家サイトより行えます。 対応ブラウザ Firefox, Chrome, Safari, iOS, Android, IE7+ 読み込
範囲を指定して切り抜き。jQuery製の画像クロップライブラリ·Jcrop MOONGIFT
Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの
Facebookページの投稿を表示するボックスを実装するjQueryプラグイン・Facio
Facebookページの投稿を任意のWebサイトに表示するjQueryのプラグイン・Facioのご紹介です。公式のが嫌、という方はこちらをご利用になってみては如何でしょうか。 Facebookページの投稿を羅列させる事が出来る、というもの。以下が動作デモです。 動作サンプルもう投稿しなくなりましたけど・・当ブログのFBページを表示させてみました。少し表示に時間かかります。 ※input要素が必要と言うわけではありません。貴方のFBページのURLを入力すれば表示テストが可能です。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>jQueryのプラグインなのでコアを読み込みます。 <div id="facio"></d
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました
こちらもおすすめです！(2013.08.27)→『ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』 』 こんにちは、霙（@xxmiz0rexx）です。 スマートフォンサイトでのメニューの表示方法をあれこれ考えた結果、素敵なjQueryプラグインに辿り着きましたのでご紹介したいと思います。 コンテンツ量が多くてもメニュー分のスペースを考えずに構成できるのでかなり気に入っています :) FacebookやPathなどで使われているあのメニュー表示の動きをjQueryで簡単に再現できるプラグインです。 普段はCSSで非表示にしておいて、ボタンを押した時に┃＼( °Д°)三ｶﾞﾗｯと引き戸を開けたようにメニューが出現しますｗ ＊追記＊ ライセンスはMITなので商用サイトでも使用OKです！ 参考：PageSlide: a j
PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた
こんにちは かねしろ@pinkrootです。 昨日は久しぶりにPHPでのコーディングを行いました。 取り組んだのはPHPとjQueryを組み合わせて、あるボタンが押されたときにajaxなPOSTを飛ばして、その飛んでいったパラメータをMySQLに格納する、という文字での説明が難しい処理です(笑) イメージとしては、ボタンを押しても画面がリロード(更新)されず、処理の裏側でDBへのデータ格納を行なっている、という感じ。 備忘録的にやり方をまとめます。 HowTo 自分で作成するファイルは以下の3つ。 ユーザが閲覧してボタンを押す画面(index.html) ボタンが押されたら呼び出されるjavascriptファイル(post.js) バックボーンで動作し、MySQLでデータを格納するPHPファイル(post.php) 上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となり
今こそ知っておくLightbox風プラグイン20+:phpspot開発日誌
20 Useful jQuery Lightbox Plugins 今こそ知っておくLightbox風プラグイン20+。 LightBoxが登場して7年ぐらい経つんでしょうかね。色々なところで見るようになったLightBoxのインタフェース。 新しいウィンドウを開く部分の軽量化、ポップアップブロック対策などとして広く使われるようになりました。 派生スクリプトも多数出てきていますので、定番からマイナーなものまで、まとまっていて選択の際に便利かも。 そんなこんなで、このブログも7年ぐらいほぼ毎日更新を続けていますが、LightBox登場あたりから7年も経つのかと時の流れの速さを感じています。 関連エントリ CSS3で出来たクールなLightBox実装チュートリアル
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
URLのハッシュフラグメントを操作するjQueryライブラリ “jQuery.locationHash”
概要 このjQueryプラグインは、ハッシュフラグメントパラメーターの追加や削除・解析を行うためのプラグインです。 非同期通信系の画面を作る際に威力を発揮するプラグインなんです。 Google Ajax Crawlerに対応したりする為には結構必須のプラグインだったり。 Google Ajax Crawlerに関しては以下のリンクを参照。 Getting Started – Making AJAX Applications Crawlable – Google Code SEOにも強いクローラブルなAJAXコンテンツを作成するために :: 5509 対応ブラウザ 以下のブラウザに対応するように実装されています。 Internet Explorer 6.0以上 Firefox 3.0以上 Google Chrome Safari ダウンロード 当ライブラリはgithubで管理していますので、
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FileSystemObject オブジェクトでファイル名にワイルドカード文字を使用できますか - Hey, Scripting Guy!
Transit - CSS transitions and transformations for jQuery
連番画像のアニメーションをjqueryで実現する | t2421.jp
ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル - かちびと.net
5509.me