指定の要素以外の場所をクリック（タップ）したら閉じるjQuery - crosawassant's blog
とても参考になったのでメモ。 キモは $.contains( container, contained )です。 $(document).click(function(event) { // (1) if (!$.contains($("#popup")[0], event.target)) { // (2) $("#popup").hide(); } }); [参考] ポップアップの外側をクリックしたら閉じるためのjQuery Tips | milestoner 引用元サイトにとてもわかりやすい解説がついていますので、なぜそうなるの？という方はぜひ元サイトで確認を。 私はiPadにも対応させたかったので、 $(document).click(function(event) { // (1) この部分を $(document).on('click touchend', function(e
jQuery PowerTip
PowerTip is a jQuery tooltip plugin with a smooth user experience that features a very flexible design which is easy to customize, gives you a variety of different ways to create tooltips, supports adding complex data to tooltips, and has a robust API for developers seeking greater integration with their web applications. Download v1.3.2 Zip file with examples, CSS, and script. For older versions,
[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。 非常に便利なカスタマイズでしたのでシェアさせていただきました。 jQuery ファイルと一緒にjavascript のコードを設置 かちびと.net 様で公開されているソースコードを、jquery ファイルと一緒に設置します。 <script src="./jquery.min.js"></script> <script> jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind
![[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/64e41bdd2e4e1b0eb8bb15c0b4e33588681cc523/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F05%2Ftrdatahref.png)
JavaScript・jQueryの関数について - Qiita
jQuery 最高の教科書を読んで、 javascript・jQueryを改めて勉強・まとめていこうと思いました。 よく使う「関数」についてまとめてみた。 関数とは 「何らかの一連の処理を行う、複数の命令の集まり（命令群）」 関数は、同一コード内は元より、他のコードからも呼び出すことができる。 繰り返し実行する処理 何度も利用する処理 また、一連の処理をまとめることによって、処理内容を変更する際の手間を大幅に軽減することができる。（保守性） 関数を使用しない場合 $(function(){ $('#typo') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('header') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('footer') .on('mous
フォームをぐっと使いやすくする！ウィザード型jQueryプラグイン6選【2017年版】
Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。 ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割できます。これならユーザーが長い入力フォームにうんざりすることもなくなり、進行状況も示しせます。 この記事ではおすすめjQueryフォームウィザードを6つ、それぞれの特徴を踏まえて紹介します。有料版や自作する方法も少し触れます。jQueryのフォームウィザードを求めている人の助けになれば幸いです。 1．jQuery steps jQuery Stepsはウィザード型のインターフェイスを簡単に作れる気の
jQuery の $().each() で個別処理(ループ) | バシャログ。
こんにちは、やっと地上デジタル放送がうちのテレビに映るようになりました。tanakaです。液晶テレビはもう1年前に買っていたので、ついにフルパワーを発揮しているんですが、新品みたいです。 今日はjQuery の each の使い方についてとりあげます。 jQuery はループ処理を意識しなくても使える jQuery がよく使われるJavaScriptライブラリである理由のひとつに、CSSライクに、宣言的な記述ができる、ということをあげることができます。複数の要素に同じスタイルを適用したいとき、CSSではループ処理を書く必要がありませんが、jQuery も基礎的な使い方ではループを意識しなくても書くことができます。 $('p').css('background-color', 'yellow'); // すべての p 要素の背景色を黄色にする $('p').prepend('Oh! ');
jQuery 複数の要素をまとめてeachで繰り返し処理 | テクニカルノート
jQueryで複数要素をループで処理したいときに使えるeachがあります。 下の例ではアンケートフォームで、チェックボックスの入力漏れがないかチェックしています。 テーブル内にチェックボックスを複数配置しているので、各行をeachで回して、 行にあるチェックボックスのいずれもチェックされなければalertするようにしています。 <form action="./"> <table class="check-lists"> <tr> <th></th> <th>おいしい</th> <th>ふつう</th> <th>まずい</th> </tr> <tr> <td>きなこもちラーメン</td> <td><input type="checkbox" name="chk1" value="1"></td> <td><input type="checkbox" name="chk1" value="2"
jQuery 便利なonを使おう（on click) - Qiita
対象者 click()とon('click', function())の違いが分からない人。 click()しか使ったことのない人。 何も考えずにon('click', function())を使っている人。 onの有用性 クリックイベントを書くとき
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES
HTMLで特定の要素を全て取得して回したい場合はJavaScriptなどで繰り返し処理をしますが、jQueryを使った場合の方法をまとめます。 対象としてはこのようなHTMLの場合です。 <div class="comment">コメント1</div> <div class="comment">コメント2</div> <div class="comment">コメント3</div> ... .each()メソッド jQueryで繰り返しといえばeach()メソッドです。基本的な構文は以下の通り。 $('セレクタ').each(function(index, element){ 〜 }); 第1引数には各要素のインデックス番号が、第2引数には繰り返し処理中の要素が参照されます。2つの引数はどちらも省略可能です。このメソッドを使えば要素数分、繰り返して指定した関数を実行してくれるわけですね。簡
jQueryで領域外をクリックで要素を閉じたりさせる方法2個 | ITハット
1つ目 $('.elm').on('click', function(e) { e.stopPropagation(); }); $(document).on('click', function() { $('.elm').fadeOut(); }); この方法は、e.stopPropagation(); により全てのイベントの伝播を止めてしまうので、あまりいい方法とは言えないようです。ポップアップが開いているとき、別のボタンをクリックしてもイベントが取得できなくなってしまいます。 2つ目 $(document).on('click', function(e) { if (!$(e.target).closest('.elm').length) { $('.elm').fadeOut(); } }); e.target でイベントが発生したDOM要素を取得し、その最も近い親要素に .elm
ツールチップデモページ
ツールチップデモページ必須名前 名前はフルネームで入力してください。任意ユーザー名 すでに登録されているユーザー名は使用できません。必須メールアドレス（半角英数字） 携帯電話のメールアドレスをご登録の場合は、ドメイン受信設定をお願いします。必須電話番号 半角数字で入力してください。必須備考・お問い合わせ できるだけ詳しいお問い合わせ内容を入力してください。
jQueryの基本 - $(document).ready - Qiita
これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。 jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行すると大抵正しく動作しません。なのでこのreadyを使うことになります。 $(function(){ //なにかしらの処理 }); jQuery(document).ready(function() { //なにかしらの処理 }); jQuery(function(){ //なにかしらの処理 });
jQuery .not()と:not()の色々な使い方 | Stronghold Archive
どうもこんばんは！ jQueryの中でも結構便利なのが 特定の要素以外を操作できる.notや:notです。 今回はそのマトメとして基本的な使い方~便利な使い方までを記しておきます。 指定した最初の要素以外 $(‘#ex1 ul li:not(:first)’).css({‘opacity’:’0.2′}); $(‘#ex4 ul li’).not(‘:first’).css({‘opacity’:’0.2′}); 兄弟関係にある指定した最初の要素以外 $(‘#ex2 ul li:not(:nth-child(3n-2))’).css({‘opacity’:’0.2′}); [/html] <h4 class="hand3">特定のclassを含んだもの以外</h4> <img src="https://zxcvbnmnbvcxz.com/wp/wp-content/uploads/2012
ページの途中から固定ナビゲーションへ切り替えた時にページ内リンクがずれる問題を解決した話
レスポンシブウェブデザインでのサイト作成中に、今回僕がハマったことの備忘録です。 「position:fixedでアンカーリンクがずれる」といった似たような問題と解決策の記事はたくさんあったのですが、僕のケースではそれだけでは解決しなかったので、同じような問題でハマって困ってる方の参考になれればいいなと思います。 ▼とっととデモ見せやがれっていう方はこちら ページの途中から固定ナビゲーションへ切り替えた時にページ内リンクがずれる問題を解決したデモ やりたかったこと 1ページ完結のサイト構成PC、タブレット、スマホでヘッダー(ロゴ)の高さが変わる指定した距離をスクロールすると、上部に固定するナビゲーションを表示(ロゴは消える)ナビゲーションをクリック(タップ)すると、同じページ内の指定した場所へアンカーリンクぶつかった問題点 スクロールする前（サイトが表示されたばかりの状態）でのアンカーリン
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
WordPressで自作のjQueryスクリプトを実行する方法
Posted: 2010.07.30 / Category: WordPress / Tag: jQuery, テンプレートカスタマイズ ただいま大人気のjQueryですが、Wordpressで使用する場合いろいろお決まりごとがあるようです。 なので今回はWordpressでjQueryスクリプトを書くときの注意事項をメモっておきます。 通常のHTMLでのjQueryの使用 Wordpressを使用していない静的HTMLでのjQueryの使用方法から見ていきましょう。 例えば、h2を消したいなんて場合こんな感じになりますよね。 JavaScript <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function ()
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
