マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかも | 日刊ウェブログ式
jQueryとCSSで、ボタンがゆっくりと切り替わるチュートリアルです。とても簡単にできる上に、実用面での使い勝手も良いかもしれません。 まずは、こちらのデモをご覧ください Demo マウスオーバーでゆっくり画像が切り替わるのがお分かり頂けると思います。jQueryでシンプルに動かしています。 使用するには、以下のサイトからスクリプトやコードをダウンロードしてください。 Link もうそこにやり方が書いてありますが、一応チュートリアルです。 既存のブログなどに使用する場合は、 以下のコードを「head」内に書き込みます。 <link href="style.css" rel="stylesheet" type="text/css" /> CSSに以下の記述を追加 .button2{ background:url("images/download.png") 0 -45px; height:
そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め） | tech.kayac.com - KAYAC engineers' blog
弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイドの分業が進んだことや表示速度の兼ね合いもあり、単一ファイルに全体を記述しサーバサイドでは全ページでその一ファイルのみを読み込むような形になることが多いです。 単一ファイルの利点としてはサーバサイドの実装に依存せずに任意の機能を追加できることがありますが、欠点として機能毎の切り分けが難しくなると言う点があります。 jQueryを使用して$('.selector')で切り出す方法もありますが、マークアップの全体像を正確に把握できていないと不要なページで間違って実行されてしまう危険性もあります。 そこで、以下のようなJSを先に読み込み、各URL
jQueryによってカスタマイズされたCSSボタン２０:phpspot開発日誌
20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine jQueryによってカスタマイズされたCSSボタン２０としてエントリがあがっていたのでご紹介。 ボタンデザインのサンプル集として覚えておけばかなり使えそうなサンプル集になってます。 ボタンでクリック率は大きく変るということもあるので、クリック率を高めたい場合はこだわってみるとよいかも。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 綺麗にデザインされたCSS3ボタンのまとめ PhotoShopで美しいボタンを作るチュートリアル39個 CSS3なボタンをWEB上で作れる「Button Maker」
Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。 若干怪しいですけどIEでも動きました。懲りすぎてない、汎用的なギャラリーです。
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」:phpspot開発日誌
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」 2010年05月27日- Plugins | jQuery Plugins 指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」。 $(element).footer() みたいにするだけで、element に指定した要素をページのフッターに吸い付くように配置することが出来る便利なプラグインです。 ブラウザの高さを変更してもJavaScript側で調整してくれます。 通常の例。div#footerブロックは最初の要素の直下に来てます。 フッター設定した例。ブラウザの下部に常に配置されます。 色々方法はあると思いますが、実装が簡単なので便利かもしれませんね。 関連エントリ HTMLで雑誌のような美しい段組みレイアウト
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」:phpspot開発日誌
IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」 2010年05月25日- jStorage - simple JavaScript plugin to store data locally IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」。 基本はHTML5のストレージを使いますが、対応していないブラウザは、例えばIEではuserDataを使ってデータを格納します。 ライブラリ内でクロスブラウザ対応はしてくれるので、利用者はただ jStorageのメソッドを呼び出すだけでストレージを利用できます。 ブラウザごとのサポートと、ストレージサイズは以下。IE6,7 が 128KBと、比較的小さいですが、それなりに大きなデータを保持できることが分かります。 基本とするフレームワークライブラ
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定
jQuery 642 プラグイン：skuare.net
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
jquery [DokuWiki]
jQueryは軽量のAjaxフレームワークです。JavaScriptの標準的なコーディングとは異なりますが、非常に短いコードで大きな効果があるスクリプトを記述できるようになります。prototype.jsがRuby風に記述できるライブラリだとすればjQueryはCSS風にJavaScriptを記述できるライブラリといえるでしょう。 主な特徴としては以下のとおりです。
今時のテレクラ事情
当サイトでは20年前に世のおじ様達を席巻したテレクラについて熱く語ります。 テレクラの誕生の歴史から現在に至るまでの経緯や、今テレクラを利用する人の心情について詳しく記載しております。 テレクラとは、すなわちテレフォンクラブの略称です。1985年に生まれたサービスであり、出会い系サイトの前身といっても過言ではありません。 現在ではスマートフォンで相手女性とインターネットを介しコミュニケーションを取ることができますが、当時は携帯電話も無く、個室形式の店舗にまで行って利用しなくてはなりませんでした。 当時は突如現れた新アダルトサービスに法整備が追いつかなく、駅前のティッシュ配りなどで未成年がサービスを知り、援助交際という俗語が誕生するなど、凄い盛り上がりをみせました。 その後、1995年にこういった状況を野放しにはできないと法整備がされ、利用者に年齢確認を求めるなどされ利用者やテレクラ事業者も
JavaScript例文辞典
■基本 ［０１］JavaScriptを定義する ［０２］外部JavaScriptファイルを読み込む ［０３］スタイルシートを定義する ［０４］NN3、NN4、NN6、IE4.x、IE5.xで動作するように記述する ［０５］NN4でのみ動作するように記述する ［０６］NN6でのみ動作するように記述する ［０７］IE4.x以上で動作するように記述する ［０８］IE5.x以上で動作するように記述する ［０９］IE5.5以上で動作するように記述する ［１０］ビヘイビアファイルを読み込む ［１１］IEとNN両方で動くように記述する ［１２］連続して関数を呼び出す ［１３］MacOS Xかどうか判別する ［１４］Safariのみ動作するように記述する ［１５］Safariのバージョンを返す ［１６］Operaのみ動作するように記述する ■構文 ［０１］変数に文字や数値を入れる ［０２］四則演算を行う
neue cc - JavaScriptエディタとしてのVisual Studioの使い方入門
linq.jsってデバッグしにくいかも……。いや、やり方が分かればむしろやりやすいぐらい。という解説を動画で。HDなので文字が見えない場合はフルスクリーンなどなどでどうぞ。中身の見えないEnumerableは、デバッガで止めてウォッチウィンドウでToArrayすれば見えます。ウォッチウィンドウ内でメソッドチェーンを繋げて表示出来るというのは、ループが抽象化されているLinqならではの利点。sortしようが何しようが、immutableなので元シーケンスに影響を与えません。ラムダ式もどきでインタラクティブに条件を変えて確認出来たりするのも楽ちん。 ところで、JavaScript開発でもIDE無しは考えられません。デバッグというだけならFirebugもアリではありますが、入力補完や整形が可能な高機能エディタと密接に結びついている、という点でIDEに軍配があがるんじゃないかと私は思っています。動
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」:phpspot開発日誌
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 2010年05月24日- Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 デスクトップアプリケーションなんかでよくある、使うリスト＆使わないリストを表示する際に便利なUIを実装出来ます。 select ボックス内のアイテムを複数選択して、移動することも出来ます。 ボックスの中身をソートすることも出来ます。 ボタン部分のUIが独特ですが、CSSでリデザインできるようなので安心です。 このUIで、例えば、利用者がWEBサイト
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]
Web 開発や拡張機能開発で JavaScript のコードを書いていると、誰もが一度は次のようなことで悩むかと思います。 ブロックスコープと名前空間 (グローバル変数汚染の回避) 読み書きしやすくデバッグしやすいコードスタイル コールバック関数と this オブジェクトの取り扱い デバッグ方法とデバッグ支援モジュール 非同期処理の書き方 いずれも解決方法は人によって様々で、これが常にベストと言えるものがなさそうですが、私なりにそれぞれ検討したことなどを書いてみようかと思います。もっと良い方法があるとか色々皆さんのご意見やツッコミをいただければ幸いです。 JavaScript では名前空間は言語仕様でサポートされておらず、ライブラリや拡張機能などのコードを書くときにはグローバル変数の使用を最小限に抑える必要があります。先日の Mozilla 勉強会＠東京 3rd でも佐藤さんと守山さんの発
![JavaScript のブロックスコープと名前空間 « Mozilla Developer Street (modest)]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8eebd75773eb0321573d9040b42d88f184780c77/height=288;version=1;width=512/https%3A%2F%2Fdev.mozilla.jp%2Fwp-content%2Fthemes%2Fmodest%2Fimages%2Fpage-image.png)
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。
あなたのサイトで音声認識が使えるようになるAPI『SpeechAPI』 | 100SHIKI
試してみたところ、ちと微妙だったが、可能性を感じたのでご紹介。 SpeechAPIは、JavaScriptだけで音声認識をしてくれるAPIだ。 これを使えばあなたのサイトに音声コマンドなんかを仕込んだり、しゃべった言葉をフォームに埋め込むなんてこともできる。 また音声からテキストのみでなく、テキストから音声、といったことも可能なようだ。 FLASH経由でマイクを使うため毎回許可を求められるのが微妙だが、アクセシビリティ的に必要なシーンでは重宝するのではないだろうか。 日本語で使うことができないのが残念だが、覚えておいても良いですな。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
