[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
『jQueryを使って、外部サイトへのリンクだけ別ウィンドウで開く方法』
以前、静岡の住宅建設会社さんのサイトをYahoo!カテゴリへの登録申請をした際に、外部サイトへのリンクが別ウインドウで 開いていない、という指摘を受けました。 対処方法は、外部サイトへのリンクは別ウインドウで開くようにAタグを書き直せば良いのですが、この静岡の住宅建設会社さんはページが多めなこともあり、今回はjQueryを使って、外部リンクの場合だけ別ウィンドウで開くように設定をしました。 （僕じゃなくてシステムの人がやってくれた。） 以下その方法 1.jQueryのサイトからjquery.jsをダウンロードしてくる。 2.ページのヘッダにjquery.jsを読み込む。 <head> <script type="text/javascript" src="jquery.js"></script> </head> 3.ページソース内(ヘッダとか)に下記スクリプトを書く。 <head> <sc
FormヘルパーとjQuery UIのdatepickterを連動させる
日付選択のプルダウンに対してjQuery Uに含まれるdatepickerを使う方法をメモついでに紹介。 CakePHP 1.2.6 + jQuery 1.3.2 + jQuery UI 1.7.2で確認。 Formヘルパーでは、タイムスタンプ系のフィールドを持つカラムに対してinput()を使ったり、date()やdateTime()といったメソッドでプルダウンによる日付選択を表示させるのはごく一般的だと思いますが、これを発展させてカレンダーから日付を選択することもできるように簡単に機能を追加する方法をご紹介します。 jQueryに含まれるdatepickerは便利な機能でして、オプション次第でいろいろな表示ができます。しかし、このカレンダーはinputに対してしか発動させられません。よって今回のようなプルダウン（selectタグ）には直接結びつけることはできないのです。そこで下記のよう
Javascript ライブラリー - HTML5.JP
HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。 <meter> polyfill (jQuery プラグイン) <meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。 html5detector (Google Chrome Extentions) html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバ
[JS]jQueryのプラグイン33+1選 -2009年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Organic Tabs アニメーションで収縮するタブコンテンツ。 flips パネルを多彩なアニメーションでスライド。 bxSli
形態素解析で『ボジョレー・キャッチコピーメーカー』作ってみた - 5.1さらうどん
ボジョレー・ヌーヴォー 毎年「今年は最高！」の怪 - Ameba News求むボージョレ・ヌーヴォーのはずれ年 - タケルンバ卿日記ボジョレーの評価が毎年、少年漫画並にパワーインフレを起こしているよねー、というお話を聞いてしこたま笑ってた。 95年「ここ数年で一番出来が良い」96年「10年に1度の逸品」97年「1976年以来の品質」98年「10年に1度の当たり年」99年「品質は昨年より良い」00年「出来は上々で申し分の無い仕上がり」01年「ここ10年で最高」02年「過去10年で最高と言われた01年を上回る出来栄え」「1995年以来の出来」03年「100年に1度の出来」「近年にない良い出来」04年「香りが強く中々の出来栄え」05年「ここ数年で最高」06年「昨年同様良い出来栄え」07年「柔らかく果実味が豊かで上質な味わい」08年「豊かな果実味と程よい酸味が調和した味」09年「50年に1度の出来
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
twitter facebook hatena google pocket 画像の切り替えを行うことで閲覧者の興味をひきつけることができます。 現状、多くがFLASHを使用していたりしますが、敷居が高いのが難点でしょう。 今回紹介する「Start/Stop Slider」を使用することで、わりと簡単に導入が可能です。 sponsors 使用方法 Start/Stop Sliderからstartstop-slider.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="startstop-slider.js"></script> 次に表示する画像などを以下のように指定します。 <
角丸javascriptライブラリ『curvyCorners』を使ってみる
角丸javascriptライブラリ『curvyCorners』を使ってみる 角丸javascriptライブラリ『curvyCorners』を使ってみました。 配布サイトからダウンロードしてきてrounded_corners_lite.inc.jsファイルをheadで読み込んでください。 <script type="text/javascript" src="rounded_corners_lite.inc.js"></script> 次にbodyに角丸にしたいblock要素をclass属性を付けて配置します。 <div class="myBox"> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> </div> これで準備はO
IE PNG FIX 2 (iFFALSE.log | takuyaな日々 ver.2)
なんかここにWEB関係のこと書くのは久々な気がするんですが、 これは忘れぬうちに書いておかねば！と思ったので、メモメモ。 IE6で透過PNGを表示するライブラリ IE PNG FIX 2 これ、超イイ！！ ＊この記事、数日前に書いて後日公開しようと思ってたんですが、 今日本屋で「Web Designing ９月号」を立ち読みしたら、 ”透過PNG+CSSデザインがやってきた！”という特集が組まれていて、 しかもIE PNG FIXもことも掲載されていて。 「なに？！おれのギャリック砲にそっくりだ！」ばりに衝撃で、 なんかこの記事見て書いたって思われるのもしゃくなので、 公開は見送ろうかと思ったんですが、IE PNG FIXに関しては 紹介だけで使い方は書いてなかったのでやっぱり公開することに。 なんか後出しで寂しい感じですが、自分のやってることも 割とタイムリーだったってことにちょっ
Ajax » jQuery plugin » 角丸ライブラリ | PHP & JavaScript Room
アンチエイリアスのかかった角丸を生成するjQueryプラグイン。 画像も角丸にできます。 設置イメージ HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.curvycorners.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('.c').corner(); $('.inner').corner({tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6}}); $('.
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
jQuery逆引きリファレンス - jQuery 日本語リファレンス
jQuery日本語リファレンス jQuery does not mean Japanese Query... ヌー jQuery逆引きサンプル集 基本 jQueryを使い始めるには prototype.jsと同時に使うには セレクターで要素を選択する インターフェース 開閉式のメニューを作る 現在のページへのリンクをハイライトする フォーカス時に全選択状態になるテキストエリアを作る 非フォーカス時にヒントの表示されるテキストボックス デザイン 一行おきにテーブル行の色を変える iframeの高さをコンテンツにあわせる 全てのスタイルを無効にする プラグイン スピンボタンを作る © Copyright 2009 by semooh.jp | Design by Free CSS Templates - Thanks to Dubai Apartments
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.oasob.com/blog/detail/15/
http://www.pixastic.com/
株式会社ALBERT（レコメンドエンジン）
Site Under Maintenance
Web Application Development
