jQueryで作るAjaxな検索フォーム（テスト）
技術的にはだいぶ今さら感ある話題ですが作業のまとめとして。
サンプル
表題のフォームというのはこんな感じのです。 #sampleSearchResult a { border: none !important }仕様
- 検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する
- 「クリア」を押すと検索語句と検索結果を削除する
- 検索語句入力欄でリターンキーを押しても検索を開始する
タグ: javascript
【メモ】 imgを子要素に持つアンカーにクラス名を付与する 【jQuery】
(function() {
$('#main').find('a').each(function(){
if($(this).children('img'))
$(this).css('border', 'none');
});
})();修正（2011/11/29）
上手く動いてませんでした。次のように修正。(function() {
$('#main').find('a').each(function(){
$(this).children('img')).parent().css('border', 'none');
});
})();【メモ】 AutoPagerで同じ要素が重複してロードされる場合（Tumblrで確認）
AutoPagerをFirefoxに入れて自分のTumblrを見ると、次のように繋がって見えてしまいます。
画面遷移せずにポップアップを実現できるjQueryプラグイン「prettyPopin」
jQueryさえ利用していれば非常に少ない量のコードで簡単に実装でき、 CSSによるデザインのカスタマイズも柔軟に出来るという点で非常に便利です。 （異なるドメインのページを読み込むことは出来ませんが） 導入に当たっては以下のサイトを参考にさせていただきました。prettyPopin is a jQuery plugin that serves as a modal box. It is easily customizable and proved a lightweight solution to quickly and easily display content in context. It provides a nice way to display simple content or simple forms.
prettyPopin | Stéphane Caron – No Margin For Errors参考
簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | HAPPY*TRAP なお、prettyPopin()を呼び出すときの設定については、 公式サイトのドキュメントに仕様がありますが、 prettyPopin documentation | Stéphane Caron – No Margin For Errors 合わせて姉妹プラグイン「prettyPhoto」のドキュメントを読むといろいろ捗ります。 prettyPhoto documentation | Stéphane Caron – No Margin For Errors 「prettyPopin」は「prettyPhoto」の簡易版という感じなのでしょうかね。【メモ】 画像サイズ読み込みの遅延処理
前回のエントリはこちら。 【メモ】 jQueryライブラリ読み込みの遅延処理 – nplll 前回のエントリでは、jQueryライブラリの読み込みを待って、画像の縮小表示を行うということをしたのだけど、 それでもまだ上手く縮小できないことがあって調査を進めた結果、
- 画像の読み込みが追いつかないことがある
- 画像を読み込んでいるのに画像の高さの取得に失敗することがある
- なぜか取得できる高さは「13」
【メモ】 jQueryライブラリ読み込みの遅延処理
読み込んだAmazonの商品画像のサイズを、これで調整しているのですが、 【メモ】 画像の縦横比を維持したまま、画像サイズを一定の範囲内に縮小 – nplll どうも調整に失敗することが多くて上手く行かない。 どうやら、jQueryを読み込む前に処理を行おうとして失敗してるみたい。 GoogleからjQueryライブラリを読み込んでるせいかな？ おや。 解決策： jQueryを読み込み終わるのを待って処理をするようにSetTimeoutを設定する。
参考
うのらぼ。 – 【JavaScript】jQueryの読み込み待ちとか関数の処理待ちとか遅延処理っぽいこと【メモ】 画像の縦横比を維持したまま、画像サイズを一定の範囲内に縮小
縦横共に300px以内でかつ縦横比を維持したまま画像を縮小したかったので簡単なJavaScriptを書いてみた。 画面内の画像全てに適用するとするとこんな感じ。
var maxWidth = 300;
var maxHeight = 300;
var elements = document.getElementsByTagName("img");
for(i=0;i height) {
elements[i].width = Math.min(width, maxWidth);
} else {
elements[i].height = Math.min(height, maxHeight);
}
}
onload="this.width = Math.min(this.width, 300)";Amazonアフリエイト用テスト
目的
Amazonの商品ページを開いて、そこからなるべく少ないステップでブログエントリに貼り付けるアフリエイト用パーツを取得できるようにする。やったこと
- ASINなどを与えるとその商品の情報を取得し整形して表示するプログラムを作成
- Amazonの商品ページでアフリエイト用パーツを取得するBookmarkletを作成
1. ASINなどを与えるとその商品の情報を取得し整形して表示するプログラム
大体次のような感じ。- PHPベース
- フレームワークはSymfony
- PEAR::Services_Amazonを使用
- //amazon.nplll.com/asin/[Amazon ASIN] → 特定の商品の情報を表示する
2. Amazonの商品ページでアフリエイト用パーツを取得するBookmarklet
AmazonのページからASINを抜き出して整形するBookmarkletjavascript:function%20getID(id){return%20document.getElementById(id);};var%20u=location.href,d=/(http:\/\/www\.amazon\.(com|co\.jp))/;if(u.match(d)){t=getID("btAsinTitle").innerHTML;r2=RegExp.$2;if(r2=="co.jp")l="amazon.jp/dp/";else%20if(r2=="com")l="amzn.com/";else%20exit();l='';prompt("%E3%80%8C"+t+"%E3%80%8D",l);void(0);}【小ネタ】 パスワードを保存できないサイトでパスワードを保存する 【Firefox】
ある程度どうでも良いサイトの場合、パスワードを保存するリスクより利便性の方が上回るので、 結構積極的に保存してたりするんですが、サイトによっては保存できない設定になっている場合があります。 例えば…アフリエイトのMicroAd。 BTパートナー｜行動ターゲティング,ブログ広告,リターゲティングのマイクロアド 左上にログインフォームがありますが、ここで入力したパスワードは保存されません。 （保存しますか？と聞かれない）
今さらながらjQueryを触っているなど
LightBox導入→prototype.js必須みたいな流れでprototype.jsを使っていたので、 競合するというjQueryをずっと触っていなかったのだけど（LightBoxだけなら何とかなるけど 他にもprototype依存のライブラリをいろいろ入れてしまってたし）、新しいサイトを作る中で どうせならjQueryに切り替えようぜってことで触ってみた。 テスト的な使い方として、
sampleCode$(function () {
$('.sample').each(function () {
var sampleCode = $(this).text();
$(this).html('
')
});
});
')
});
});