クリックするとフォーム内の字が消えるJavascript * Devotion Time
検索やメールアドレス記入のための入力フォームに、あらかじめ「検索キーワードの挿入」といった薄い文字が記されていて、クリックすると消える。しかもフォームの外をクリックすると字が復活する、そういう入力フォームをhtmlとjavascriptで簡単に実装しましょう。 フォーム内のvalueの値はjavascriptと関係なく自由に変えることができます。 <form> <input type="text" value="ご記入下さい" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"> </form> <script type="text/javascript"><!-- function cText(obj){ if(obj.value==obj.defaultValue){ obj.value=""; obj.style
jQueryでページ内スムーズスクロール | 1：n – DETELU Blog
jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ
Facebox 1.2 - LightBox風に角丸で画像をポップアップ | JavaScript | かたつむりくんのWWW
Facebox 1.2を導入してみました。 これまで、画像のポップアップ表示には yuga.js で使われていた「ThickBox 3.1」を使用していました。ThickBox 3.1 は非常に軽い動作で良いのですが、ブラウザの表示領域より大きい画像を表示させると、自動的に縮小されてしまいます。この自動縮小は基本的には便利なんだけど、画像に書かれている文字も読ませたいときなどはちょっと不便になってしまう諸刃の剣でした。 この自動縮小機能を無効化する方法もあるようですが（fixture.jp/blog - thickbox.jsの画像リサイズ機能をオフにする）、それだとブラウザをスクロールしても、オーバーレイされた画像はスクロールできず、結局表示領域からはみ出した部分は見られないという、こちらも諸刃の剣でした。 そこで、今回、動作の軽さという点や、使用できるリンクの種類が ThickBox
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
とっても使いやすそうなツールチップ実装jQueryプラグイン・jQuery Bubble Popup - かちびと.net
使いやすい感じでしたので備忘録。 ツールチップを実装するjQueryの プラグインです。多数存在しますが、 選択肢が増えて困ることも無いので 覚えておいて損しませんね。汎用的 で個人的には好みのプラグインです。 対応ブラウザはIE6以上, Firefox 3.5以上, Opera 9以上, Chrome 6以上, Safariとの事です。ライセンスはMITになります。 基本的にはシンプルですが、出す方向や、デザインの変更など、自由度もなかなか高いです。エフェクトも可愛いですね。 こんな事もできちゃう。 基本的には噴出し内に呼び出すテキストはjs内に書くみたいです。 $('#hotspot1').SetBubblePopupInnerHtml('Wall!'); $('#hotspot2').SetBubblePopupInnerHtml('Angelina Jolie!'); $('#ho
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://solidstate.jp/ImageDisplay/slideshow/script_141.html
https://w3avenue.com/