JavaScript

history.pushStateをつかってみる。

pushState、実際にサンプルつくってみた。 http://dl.dropbox.com/u/131731/sample/pushstate/index.html リンク遷移時にページ内で必要な部分のみ表示が代わり、かつ、 ページのtitle、ページのURLも読み込んだ内容に適応したものにかわるよう。 HTMLは事前…

Google Mapsで住所から緯度経度 / マーカーから緯度経度&住所を求める

タイトル通りの内容。地図を登録させるフォームつくる機会があったんだけど、 住所検索だけだと同一番地内などで微妙に位置ずれする。なので、マーカーで緯度/経度を修正して、 投稿時には ・入力した住所 ・マーカーの緯度/経度 をもらってGoogle Mapsを表…

jQueryのフェード系メソッド + IEで、文字が潰れる問題

タイトルの通りなのだけどIE環境で特定要素に、 $('div').fadeIn('fast'); など、フェード系のメソッド(sideToggleとかいろいろ)かけると、 文字が潰れてジャギジャギなる。 より具体的にいうと、ClearType(Windowsの文字のアンチエイリアシング方式)が…

fsmenu.jsとmootoolsがコンフリクトする問題

fsmenu.js(FreeStyle Menus)というhoverで下層ナビゲーションを表示するスクリプトがあるのだけど、 (HTML+javascriptでDHTMLと呼ばれてたころからあるっぽい) mootoolsと同時につかうと、コンフリクトして動作しなくなる(fsmenu.jsが)。 今ならfsmenu…

photosetでいろいろ

先のエントリーで、Flickrの任意のSetを取得してみたが、それでいろいろ試してみる。 Flickr x jQuery Cycle Plugin 画像の〜するって事を考えると、 » JQuery Cycle Plugin との相性は良さそう。というわけで ■デモ(画像切り替え) http://2244.jp/_demo/f…

PrettyPhoto.jsで表示した要素をスムーススクロール

PrettyPhoto.jsを使ってiframeやインラインコンテンツを読み出す際に、 Windows IE系ブラウザ ページ全体にスクロールが発生している。 prettyPhoto内にスクロールがある。 マウスホイールなどでスクロールさせてる。 という環境下で、 マウスホイールでpret…

無駄にjQueryでiframeコンテンツを切り替え

タイトル通り。 無駄にjQueryを使ってフェードさせてるのと、全画面になるように。デモ↓ http://2244.jp/_demo/jquery-loader/01/ JavaScript <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript"> //初期化関連。 var windowWidth = 0; var windowHeigh…

jQueryのセレクター

jQueryで使えるセレクター。全部じゃないけど、自分が使いそうなものだけ。 子要素指定や属性セレクターなど、CSSで指定するとIE6ではNGなのだけどjQuery側から指定すればOK。 CSSセレクター $("*") すべての要素 $("p") pタグ $("#id") id="#id" $(".class"…

jQueryでCSSセレクタを使う時意識すること

なんて有益なエントリーなんだ!↓ jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ セレクタの実行結果を変数にキャッシュ メソッドチェーンを使う find(),end()を利用 クラス名だけの指定ではなくタグも明示 #idでいいところは#idで 子供セレク…

特定要素をブラウザ画面全域に広げる

背景に敷きたい特定のdivなどを画面いっぱいに広げる。 一応できてるっぽいけど、これでいいのだろうか。 ※標準モードとする。 ※widthはCSSで100%でもいいのだけど、高さはJSでやるしかないのか。 var windowWidth = 0; var windowHeight = 0; function resi…

jQueryを使った画像切り替え

本当に今更だけどjQueryなどのライブラリって便利だなー。 ちょっとしたときに使う、画像切り替え(入れ替え)。※jQueryは、Google AJAX Libraries APIから。 画像切り替え デモ Javascript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" ></script> <script> $(document).ready(function(){ //ナビゲーションのmouseover。…

Google AJAX Libraries APIからライブラリを読み込む。

GoogleのAJAX Libraries APIを使って、 jQueryやprototypeなどメジャーなライブラリを読み込む。 Google は各ライブラリに取り組んでいる主要な関係者と直接連携をとって、リリースごとに最新の安定したバージョンを受け取っています。 取得したライブラリの…

jquery.prettyPhoto.js > 表示画像をクリックしてもCLOSE

jQueryでの画像拡大のライブラリはたくさんあるけど、prettyPhotoが見栄えいい感じ。 prettyPhotoではoverlay部分をクリックしたら閉じられるんだけど、 Next、Prevが不要で、CLOSEもイラネって場合に、拡大されている画像自体もクリックで閉じれるようする…