jQuery Square Menu by Pete R. | The Pete DesignCreate a Square-like Menu Animation for Website using jQuery and CSS3 Created by Pete R., Founder of Travelistly & BucketListly
jQueryでクリックされたテーブルの行・セルの情報を取得する | Try Lifelog
HTMLテーブルのセルがクリックされた際、クリックされた行の情報をjQueryで得る方法。 例として以下のテーブルを想定し、td要素をクリックすると起動されるイベントハンドラを定義する。 <!-- HTML --> <table id=tblPlanSpot1> <tr> <td>A</td> <td id="a">AA</td> <td>AAA</td> </tr> <tr> <td>B</td> <td>BB</td> <td>BBB</td> </tr> </table> // JavaScript // イベントハンドラ $('#tblPlanSpot1 td').live('click',function(){ var $cur_td = $(this)[0]; // (1):セルのHTML表現 [0]をつける点に留意のこと。 var $cur_tr = $(this).pare
jQueryでフォームの内容をCookieに保存する
JavascriptでCookieを扱うのはどうも敷居が若干お高めですが、jQueryプラグインのjquery.cookie.jsがあると、誰でも簡単にCookieマスターになれます！ jquery.cookie.js Download 公式jQueryからはなぜかうまくダウンロードできなかったので、こちらからどうぞ。
jQueryの.hover()メソッドを.on()で使うためには？
jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()（.bind()）で使うのはどうやるんだろう？とかわかるようでわからなかったので、ちょっと調べてみた。 .hover()を利用してみる とりあえず、.hover()の使い方からおさらいしてみたいと思います。 .hover()メソッドは、マウスを乗せた時とはずした時の２つの処理を入れておくことで、実現できます。 $('#demo1 p').hover(function(){ $(this).fadeTo('fast',.3); },function(){ $(this).fadeTo('fast',1); }); マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。 以前は乗せた時とはずした時の２つの処理を入れておかなければエラーだったのですが、現
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにする プラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://co
iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ - かちびと.net
なかなか良さ気だったので備忘録。 iPhone、AndroidやiPadなどの人気 のタッチデバイス用に作られたギャラ リー用のJSライブラリ・PhotoSwipe。 人気のプラグイン、jQueryMobileでも 利用することが出来ます。 タッチデバイス専用とあって、独自の操作でもある、ピンチイン/アウト等による拡大や回転、フリックで進むなどの操作が可能です。 PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhon
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
Tooltipster - The jQuery Tooltip Plugin
To use a theme, just include its css file (located in the dist/css/plugins/tooltipster/sideTip/themes folder) in your page and specify its name in Tooltipster's options: $('.tooltip').tooltipster({ theme: 'tooltipster-noir' }); To bring your own modifications to the style of your tooltips, a custom themes section awaits you below. Note: "sideTip" is the name of the plugin used by default by Toolti
特集：jquery.jsを読み解く｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
はてなブログ | 無料ブログを作成しよう
思いは言葉に。 はてなブログは、あなたの思いや考えを残したり、 さまざまな人が綴った多様な価値観に触れたりできる場所です。
selectのデザインをCSSとJavascriptでカスタマイズ
jQuery mobile などの大規模なプラグインを導入せずに オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。 動作サンプルはこちら。 フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。 ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。 実際のソース 大雑把に解説すると、本物のセレクトボックスは透明にしてクリック判定のためだけに配置しておいて 装飾部分は.innerのdivで代替しています。 javascriptでは、セレクトボックスで選択された値（選択された項目の表示文字列）を取得して .innerの要素に表示させています。 <div cla
IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
twitter facebook hatena google pocket 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <amp-img src="画像パス1"> </figure> <figure> <amp-img src="画像パス2"> </figure> <figure> <amp-img src="画像パス3"> </figure> </div> </div> あとはJav
レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js
Modified 2014-06-08 更新情報 記事公開時とオプションや設定方法など変わっていた点が多数あったため、現在の方法へオプションを書き換えました。 ResponsiveSlides.jsは、レスポンシブで792KBの軽量かつシンプルなスライドショーのjQueryプラグインです。Internet Explorer 6,7,8,9 にも対応していて、サポートしているブラウザも幅広いので、定番として使えそうです。 「サンプル」も作ってみましたが、設置も簡単にできました。シンプルなマークアップで使いやすいです。 デモ ResponsiveSlides.js · Responsive jQuery slideshow Slideshow 1 はシンプルに画像がフェードしながら切り替わります。 Slideshow 2 は画像の切り替えをページナビで行います。 ダウンロード viljamis
【JavaScript】$(document).ready()？ $(window).load()？ at softelメモ
問題 $(document).ready() と $(window).load() は何か違うの？ 答え 違う。 readyはDOMが構築されたら実行される。 $(document).ready(function() { // Handler for .ready() called. }); これは次のよく見かける省略形と同じ。 $(function() { // Handler for .ready() called. }); loadは、使用される画像など含めて、ページが完全に読み込まれたら関数が実行される。 $(window).load(function () { // run code }); そのため $(document).ready(function() { // 画面にある画像の大きさを取得したいよ → できません× }); $(window).load(function(
郵便番号から住所を補完するjQueryプラグインを作ってみた · けんごのお屋敷
郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。 jquery.ajaxzip2 通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。 また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。 拡張機能 次のような機能を新たに追加しています。 住所補完後の動作をコールバック関数で指定可能 郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
http://www.yuiazu.net/perfect-scrollbar/