セレクトメニューの設置 値の取得 onchangeイベント
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 セレクトメニュー 選択リストの一覧が下に展開して表示されます。ドロップダウンメニュー、プルダウンメニュー、オプションメニューとか呼ばれています。 リストを選択してください。 サンプルソース <HTML> <HEAD> <TITLE>プルダウンメニューの設置 値の取得</TITLE> <SCRIPT language="JavaScript"> <!-- function Selc(Obj){ index_nub = Obj.selectedIndex; //選択された項目番号を取得する msg="項目番号は " +"<SPAN style='color : red;'>"+index_nub+"</SPAN><br>"; O_value=Obj
軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」:phpspot開発日誌
CLEditor - WYSIWYG HTML Editor 軽量でデザインが良いWYSIWYGエディタ実装jQueryプラグイン「CLEditor」。 次のようなすっきりしたデザインのWYSIWYGエディタを実装出来ます。ボタンはデフォルトで多数ありますが、カスタマイズ可能です。 全てダウンロードしても10KB以内という軽量なものになっています。 内容に応じてサイズを自動で変えたりすることも出来るようです。 IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+で動作確認しているそうです。 jQueryプラグインというのもいいですね。 これは覚えておいてよさそう。 関連エントリ WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」 まだまだあったJavaScript製のWYSIWYGエディタコンプリート
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
『Tooltipいろいろ』
Mi*i*DesignMi*i*Design イラストレーターMi＊イラストレーション＊ デザイン＊アート＊グラフィック＊web＊ノート I love web,graphic,art,design and illustration! かわいいorかっこいい形のツールチップ、 イメージマップから画像表示できるツールチップetc探していて、 いろいろ見つけたので、メモしておきます。 Easy Tooltip E-riverstyle Vangaurd 様より 使い方 イメージマップでTooltip表示するサンプル TOOLTIP うきあがってくる感じで、かっこいいです。フォーム入力のとかもあります。html表示できたりもします。 Using any HTML inside the tooltip Bubble Tooltips シンプルなふきだしです。 Build a Better Toolt
透過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名等を指定
[JS]jQueryのプラグイン33+1選 -2010年7・8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hove
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
HugeDomains.com
Captcha security check suzken.com is for sale Please prove you're not a robot View Price Processing
デザインから選ぶjQueryツールチップ5つ
ちょっとした解説や情報を表示したい時、あらかじめデザインに当てはめておくよりも 必要な時だけに表示させる方が より目を引く場合があります。 そんな時に利用できそうなツールチップの中から使ってみたいデザインのものをピックアップしてみました :)
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル:phpspot開発日誌
Circular Content Carousel with jQuery | Codrops ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル。 そもそものデザインもいいのですが、次のようなコンテンツを左右にスライドできる（ホイールでもOK)UIを作ることが可能です。 「more」をクリックすればそのまま詳細がアニメーションで広がります サンプルプログラムのダウンロードが可能なので、ダウンロードしてカスタマイズして使うだけでも有用です。 関連エントリ IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」
画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
jQuery ギャラリープラグインGalleria [Javascript] All About
写真などをスライドショーなどのように展示するライブラリは、Lightboxをはじめいくつかありますが、 今回は、jQuery プラグインからGalleriaを紹介します。 手軽にイメージギャラリーを作成することのできる美しいプラグインです。 jQuery jquey.jsのダウンロード Galleria デモ1 デモ2 Galleria ダウンロード jQueryのダウンロードと設置 Galleria Galleriaを使うためには、上記のGalleria ダウンロードのサイトでサイトでgalleria-1.0b.zipなどの最新版の圧縮ファイルを入手します。 解凍すると、(galleria-1.0b.zipの場合は)demoとtrunkの二つのフォルダがあり、demoにはjquery.js(圧縮版のjquery.min.js)とサンプルHTMLとサンプル画像が入っており、 trunkには
![jQuery ギャラリープラグインGalleria [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a713ecab6d4800da05c4504abbf5718b1613b04/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
魔法のようなリスト要素で作られた無限に続くメニューを開閉できるようにする jQuery
物凄いたくさんのカテゴリがある時に開閉するようにした方が便利です。そのため開閉できるようにするシンプルなコードを作りました。 jQuery のコード jQuery を読み込んでから、このコードを適用に読み込むと自動的に開閉機能が付きます。id などは適宜書き換えてください。 jQuery(function(j$) { j$('#menu ul > li ul').hide(); j$('#menu ul > li a').click(function() { j$(this).siblings('ul').toggle(); }); }); HTML のコード 以下の HTML に反応します。#menu 内のリストに反応するように作っていますが、時と場合によってここは書き換えると良いと思います。id がついてるので開くとその場所まで行く仕様ですが、嫌なら id を無くす手もあります。 <d
画像スライドショーのjQueryプラグイン-Slides : mignon-arrows
シンプルに画像をスライドショーさせるjqueryのプラグインです。 画像を切り替える時間やフェードアウトさせる時間も指定できます。 配布先 → Slides head内に下記を記述します <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.slides.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slideshow').Slides({ images : [ 'images/photo1.jpg', //スライドさせる画像 'images/photo2.jpg', 'images/photo3.jpg', '
Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要があり ましたが、ppGalleryは一回開けばあとはサムネイルで 好きな画像に飛べるのでLightboxスクリプトの中でも イメージギャラリーに向いてそうです。 さて、今日は8月6日「ヒロシマ」の日ですね。1945年の今日の8時15分に原爆が投下されました。不幸にしてお亡くなりになられた方々のご冥福をお祈りすると共に、ご遺族の方々に対して心よりお悔やみを申し上げます。 現在、上記のようにGoogleストリートビューで原爆ドームの外と内
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する - かちびと.net
http://miracle-ysdesign.com/blog/javascript/409.html