jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 投稿日2015年10月28日 更新日2015年10月28日 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a
jQuery:ボタンの有効・無効設定 - クウネル戦隊ガキュオーン備忘録
ボタンをクリック時にボタンを無効にする必要があったので ついでにメモ〆('-'*) attr()でdisabledを設定することで ボタンの有効・無効を切り替えることができます。 2012.01.25 修正 /* jquery1.7.1 で確認 */ /* ボタンの無効化 */ $('#input_button').attr('disabled', true); /* ボタンの有効化 */ $('#input_button').attr('disabled', false); $('#input_button').removeAttr('disabled'); ↑まちゃ様よりご指摘頂きました。 ありがとうございます。 以前の情報（バージョンが不明です。。。） /* ボタンの無効化 */ $('#input_button').attr('disabled', 'disabled'); /*
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
jQuery の each() の continue / break は・・・ : 地潜の日記
2009年03月14日 18:41 カテゴリプログラム・スクリプト jQuery の each() の continue / break は・・・ No Comments No Trackbacks 忘れそうなので覚書〜 JavaScript で配列なんかをイテレーション処理する時は、for を使うのが一般的。 ● JavaScript の書き方 for (var i=0, numArity=arrHOGE.length; i<numArity; i++) { (なんか処理); } jQuery を使ったときは、イテレーションのために each を利用できる。 ● jQuery の書き方 $(arrHOGE).each( function(i) { (なんか処理); } ); 便利だねー。 ■ continue / break のやり方 さて、for でグルグル回している処理を 「その時だ
jQueryで合計を出す方法とは？ - OKWAVE
同一nameの input type="text" の合計を計算したい 初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/j
change(fn) - jQuery 日本語リファレンス
各要素のchangeイベントに関数をbindします。 changeイベントは通常、フォーカスを失った状態のinput要素がフォーカスを得て、値の変更を完了した時に実行されます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <select name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <
Javascript/jQuery/イベント - 俺の基地
イベント一覧 bind 結合 focus フォーカスイン blur フォーカスアウト change セレクトとかで変化させたら click クリック dblclick ダブルクリック error エラーが出たとき hover 上にのっかったら keydown キーダウン keypress キープレス keyup キーアップ load ロード ajax mousedown マウスダウン mousemove マウス動いたら mouseout マウスアウト mouseover マウスオーバー hoverと何が違う？ mouseup マウスアップ。 one 一回だけ実行されるイベント ready 過去の互換性のため今は $(fun(){}) 使うっぽ resize リサイズ scroll スクロール select セレクト submit 送信したとき toggle トグル trigger トリガー
javascript 初心者が CakePHP2系 の更新処理を Ajax でやってみた | X->A->O
目次 はじめに 必要となる情報・知識 サンプルコード まとめ はじめに 今回、データの更新処理をAjaxを使って実装してみたのですが、結構覚えることが多く大変だったので実際にやったことをメモ。 次同じことをするときにさらっと思い出せるように。 プログラムに限らない一般的な話ですが、一見複雑なものも細分化していくと単純なものになりますね。まぁ、その単純なものをいかに有機的に組み合わせていくのかっていうのが、何においてもカギを握るわけでもありますが。なお jQuery を使用しています。そして、スクリプト系のヘルパーは今回勉強不足なこともあって一切使用していません。いずれ機会があれば Cake の機能をフル活用した書き方も実践したいところです。CakePHP のバージョンは 2.2.1 ちなみに私は CakePHP の処理の流れは一通りわかっているけど、jQuery はDOMをIDで指定して、
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） jQueryUIのdialogは結構お世話になっているのですが、たまに欲しい機能がなかったり、あっても説明されてなかったりするのでここにDialogカスタマイズTipsをしたためておきます。 この記事の内容は既に古くなっています。現在最新バージョンのjQueryUIでは挙動が改善されていたり、渡せるオプションが変わっていたりします。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーションにパラメータを渡す 閉じるついでにデストロイする 1. Modalしたダイアログをオーバーレイクリックで閉じる escキー押下で閉じるオプションはあるのですが、このオプションはない様子。 そこで
Dialog - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
解説 高機能なダイアログウィジェットです。 dialog は、タイトルバーとコンテンツエリアを持つ、フローティングウィンドウです。 デフォルトでは、移動、リサイズすることができ、右上の "x" ボタンでウィンドウを閉じることができます。 コンテンツの大きさが最大値を超えた場合は、スクロールバーが自動的に表示されます。 書式 依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.position.js jquery.ui.draggable.jsオプション jquery.ui.resizable.jsオプション 引数 optionsオプション 関数 String: "destroy"、 "disable"、"enable"、"option"、"widget"、"close", "isOpen", "
シンプルなモーダルウィンドウ
Result jQuery//クリックイベント $("#showoverlay").click(function() { //オーバーレイ用のボックスを作成 $("body").append("<div id='overlay'></div>"); //フェードエフェクト $("#overlay").fadeTo(500, 0.7); $("#modalbox").fadeIn(500); }); //閉じる際のクリックイベント $("#close").click(function() { $("#modalbox, #overlay").fadeOut(500, function() { $("#overlay").remove(); }); }); $(window).resize(function() { //ボックスサイズ $("#modalbox").css({ top: ($(
ウィンドウ、モーダル｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3〔CSS3を使用した角丸レイアウトのダイアログボックス〕 jGrowl〔Mac OS XのGrowl風にメッセージ表示〕 jQDialog plugin for jQuery〔軽量のダイアログプラグイン〕 jqModal〔通知ウィンドウ、ダイアログ、モーダルウィンドウを表示〕 jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) 〔アラート、確認ダイアログ、入力プロンプトの作成〕 jQuery BlockUI Plugin〔ページや要素のブロック、モーダルダイアログ表示〕 jQuery Tools〔HTMLをオーバーレイ〕 LeaveNotice jQuery Plugin〔リンク先遷移時に通知
Datepicker | jQuery UI
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
Javascript/jQuery/input要素のvalueを操作する - 俺の基地
prototype.js感覚で使ってたら嵌ったｗ 実は結構迷ったのでメモ <input type="text" value="" id="hoge" /> こうやってもだめ $('#hoge').value = 'aaa'; こうじゃないとダメ $('#hoge').val('aaa'); タグ Tag: Javascript jQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ノンプログラマーのためのjQuery生成ツール
Twitter Bootstrap使い方-javascript-v2.0.4
IDEA * IDEA
how to access iFrame parent page using jquery?
いろ on Twitter: "GreyBoxがjQueryと競合するのを追っかけてて、今やっと解消できた。GreyBoxが依存する(?)AJS.jsの AJS.exportToGlobalScope() がwindowオブジェクトを汚すので、最後にある呼び出し箇所を削除すればOK"