- ベストアンサー
jQueryで特定の要素の表示を知りたい
iQuery 1.11.1で特定の要素が表示されたかどうかを検出したいと思います。 正確には、最初画面外にある要素が画面に入った時に処理をしたいです。 <div class="a"> 注意 </div> ブラウザをスクロールさせ、上のdivが画面内に入った時、数回点滅させすぐ止めるという処理を考えています。 画面に表示されたかどうかを知る方法を教えてください。
- astra2000t
- お礼率57% (12/21)
- JavaScript
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- balloon23
- ベストアンサー率69% (16/23)
たぶんここらへん。 http://semooh.jp/jquery/api/css/offset/_/ 上を使ってこんな感じ。 var target_displayview = $('#displayview').offset(); if( $(window).scrollTop() > target_displayview.top ) { alert('hoge'); } これにディスプレイのサイズ(高さ)を取得して、 その分だけif文に付け加えたらいけるんじゃないかなーと思います。 あと、単純に要素の有り無しならlengthが便利。 $('#displayview').length ;
お礼
スクロールを追う形ですね。 これでも実現できそうです。 ありがとうございました。
関連するQ&A
- jQuery 1つの要素を複数箇所に表示したい
いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか？ ▼HTML ------------------- <div class="hoge"></div> ～別要素(省略)～ <div class="info"> <ul> <li>項目1</li> <li>項目2</li> </ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- AJAX
- 特定の条件のHTML要素を一括で表示・非表示
お世話になっております。 javascript、または何らかの方法で、特定の条件にあうHTML要素のCSSプロパティを一括で書き換える方法を探しております。 Dreamweaverを使っているのでビヘイビアでできないか試してみましたが、ID単位で要素を扱うので複数のレイヤーを同時に表示・非表示することはできないようでした。 以下、やりたいことの一例です。下記のように、ボタンを押すとその条件に合わないclassの要素を「display:none」状態したいと考えています。 ------------------------------------------------------------------ [イヌ表示ボタン] [ネコ表示ボタン] [両方表示ボタン] <div class="dog">ダルメシアン</div> <div class="cat">ロシアンブルー</div> <div class="dog">柴犬</div> <div class="dog">チワワ</div> <div class="cat">シャム</div> <div class="cat">ヒマラヤン</div> <div class="cat"アビシニアン</div> <div class="dog">ゴールデンレトリーバー</dog> イヌ表示ボタンを押したときは、class="cat"がdisplay:noneになり、 のブラウザ上では犬だけがピックアップ表示される。 ↓ <div class="dog">ダルメシアン</div> <div class="dog">柴犬</div> <div class="dog">チワワ</div> <div class="dog">ゴールデンレトリーバー</dog> ------------------------------------------------------------------ 実際にはボタンで操作するだけではなく、たとえば犬ページ、ネコページを同じコンテンツに更新し、ロードイベントだけ異なった記述をするだけで、それぞれのページに適切なコンテンツのみ表示をさせたりしたいと考えております。 恐れ入りますが、何卒、よろしくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptで要素が画面からはみ出していることを検出したい
<div id="text">文章</div> JavaScriptで上記のような<div>要素にinnerTextを設定して 文章を切り替えて表示させています。 設定する文章の長さによっては、<div>要素が画面からはみ出して 表示されてしまいます。 そのようなときは<div>要素の位置をずらすなりの処理をしようと 思っているのですが、<div>要素が画面からはみ出しているという ことはどのようにして検出するのでしょうか？ お願いいたします。
- ベストアンサー
- JavaScript
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- jqueryで要素を別要素に表示したいが重なる
jqueryには詳しくないのですが、必要に迫られて下記のようなページを制作しています。 構造 1）menu画像をクリックすれば gazouboxでその画像が大きく表示され、（A,B) 2）別のmenu画像をクリックすれば contentの画像が変わり、（a1,a2,a3 → b1,b2,b3) 3)contentの画像をクリックすれば itemshowのDiv内に画像名と同じｓｒｃ．htmlが表示され、 4）それとともに そのcartの内容がcartpanelに表示されます。 実際のページではcartの内容は ショッピングカートのscriptタグを記載します。 ネットで調べて悪戦苦闘しながら上記の構造で動作するところまで漕ぎつけたのですが、 このHTMLでは 「・・のカートタグ」という文字が順に表示されますが 私の製作中のページでは積み重なります。 cartpanelにショッピングカートが表示されて、同一場所に重なって表示されていくので、 クリックした分だけ商品価格の部分が重なって行って 価格が読み取れなくなります。 恐らく、非表示にしているcartを画像クリックでcartpanelに表示するとき、 画像のclassに設定したsrcを cartの処理に同じように使えていないのが問題だろうとは思うのですが、 何日もネット検索しながらいろいろ調べては試してみたものの 基礎知識がないため解決できませんでした。 ページの必要最低限を書き出してみました。 contents画像（．switchButton）をクリックしたら、 そのクリックした画像用の cart だけが cartpanel に表示され 別の画像をクリックしたら 次の画像用のカートに切り替わってくれるようにするには プログラムをどのように修正すればよいでしょうか？ お手数かけますがご指導よろしくお願いいたします。 ---------------------------------------------------------------- <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <title>無題ドキュメント</title> <style type="text/css"> .full_content { position: relative; float: left;} .switchButton {list-style-type: none;} .menu{ width: 120px; height: 120px; list-style: none; text-align: center; display: block !important; cursor: pointer; border: 1px solid #F66; margin-top: 3px;} .menu:first-child {margin-left:0;} .hover { font-weight: bold; display: block !important;} .content { width: 100px; height: 200px; position: absolute; top: 250px;} .cartpanel { height: 200px; width: 150px;} .menu img { height: 120px; width: 120px;} #gazoubox { height: 200px; width: 200px; float: left; border: 1px solid #6F6; margin-bottom: 100px;} </style> <script type="text/javascript"> $(function () { $('#big').attr('src', $('.menu img:first').attr('src')); $('.menu img').click(function () { $('#big').attr('src', $(this).attr('src')); }); }); $ (function(){ $ (".content:not('.hover + .content')").hide(); $ (".menu").click(function(){ $(".menu").removeClass("hover"); $(this).addClass("hover"); $(".content:not('.hover + .content')").fadeOut(); $(".hover + .content").fadeIn(); }); }); $(document).ready(function(){ $('.itemshow').load('A.html'); $(".cart").css("visibility", "hidden"); $('.switchButton').click(function(){ var loadContents = $(this).attr('src'); $('.itemshow').load(loadContents+'.html'); ($(this).find(".cart").css("visibility", "visible")).appendTo('.cartpanel'); }); }); </script> <div id="gazoubox"><img id="big" /></div> <div class="itemshow"></div> <div class="cartpanel"></div> <div class="full_content"> <div class="menu hover"><img src="img/A.jpg" /></div> <div class="content"> <ul id="ilist"> <li class="switchButton" src="a1"><img src="img/a1.jpg" /> <div class="cart" src="a1">a1のカートタグ</div> </li> <li class="switchButton" src="a2"><img src="img/a2.jpg" /> <div class="cart" src="gk-pch-kuro">a2のカートタグ</div> </li> <li class="switchButton" src="a3"><img src="img/a3.jpg" /> <div class="cart" src="gk-pch-kuro">a3のカートタグ</div> </li> </ul></div> <div class="menu"><img src="img/B.jpg" /></div> <div class="content"> <ul id="ilist"> <li class="switchButton" src="b1"><img src="img/b1.jpg" /> <div class="cart" src="a1">b1のカートタグ</div> </li> <li class="switchButton" src="b2"><img src="img/b2.jpg" /> <div class="cart" src="b2">b2のカートタグ</div> </li> <li class="switchButton" src="b3"><img src="img/b3.jpg" /> <div class="cart" src="b3">b3のカートタグ</div> </li> </ul></div> </div> </body>
- ベストアンサー
- JavaScript
- jQueryで表示と非表示の切り替えについて
趣味の写真ギャラリーサイトの制作を行っており、トップページには以下のようにサムネイルを配置しております。 <nav> <div id="haru">春の画像の表示</div> <div id="natsu">夏の画像の表示</div> <div id="aki">秋の画像の表示</div> <div id="fuyu">冬の画像の表示</div> <div id="jitensya">自転車の画像の表示</div> <div id="umi">海の画像の表示</div> <div id="koibito">恋人の画像の表示</div> <div id="yuki">雪の画像の表示</div> </nav> <div id="content"> <div class="thumb haru"><a href="#"><img src="img/haru.png" alt="春の画像"></a></div> <div class="thumb natsu"><a href="#"><img src="img/natsu.png" alt="夏の画像"></a></div> <div class="thumb aki"><a href="#"><img src="img/aki.png" alt="秋の画像"></a></div> <div class="thumb fuyu"><a href="#"><img src="img/fuyu.png" alt="冬の画像"></a></div> <div class="thumb haru jitensya"><a href="#"><img src="img/haru.png" alt="春と自転車の画像"></a></div> <div class="thumb natsu umi"><a href="#"><img src="img/natsu.png" alt="夏と海の画像"></a></div> <div class="thumb aki koibito"><a href="#"><img src="img/aki.png" alt="秋と恋人の画像"></a></div> <div class="thumb fuyu yuki"><a href="#"><img src="img/fuyu.png" alt="冬と雪の画像"></a></div> </div> とりあえずid="content"内に全画像（サムネイル）を配置（表示）しておき、以下のようなことを行いたいのですが… id="haru" クリック時、class="haru"以外の要素に"display:none;"を追加… id="natsu" クリック時、class"natsu"以外の要素に"display:none;"を追加… id="aki" クリック時、class="aki"以外の要素に"display:none;"を追加… id="fuyu" クリック時、class="fuyu"以外の要素に"display:none;"を追加… id="jitensya"… id="umi"… id="koibito"… id="yuki"… classをタグのように使い、画像の表示と非表示を切り替える上手い手を探しております。jQueryでdisplay:noneを追加したり、toggleを使って元の状態に戻したりすることは可能でしたが、haruクリック後にnatsuをクリックすると期待通りに動きが得られなかったりと、60のおじいちゃんにはお手上げです。 解決法をjQueryの達人にご教授頂ければ幸いです。if文と呼ばれる、showの時にhide、hideの時はshowなど、そういったことが必要な気がしております。どうぞ宜しくお願いいたします。
- 締切済み
- JavaScript
- 重なった要素上でのイベントで下層要素を特定したい
例えば２つ以上のonclickが設定されたDIV要素が重なっている場合、 その上でクリックをするとz-index的に上にある要素しか反応しませんが、 その下にある要素も処理したい場合には、どのように特定すればいいでしょうか。 下層要素のonclick等の処理が走る必要は無く、あくまで対象要素の特定、取得ができればOKです。 各要素の座標とサイズ、及びマウス座標から算出すれば一応可能ですが、 もっとスマートな方法を探しています。
- ベストアンサー
- JavaScript
- CSS 段組で要素が表示されません
いつもお世話になります。 今CSSで段組をしています。 #content{ width:910px; height:auto; } #content{ float:left; width:440px; padding-left:10px; padding-right:10px; } #menu{ float:right; width:440px; padding-right:10px; } で左右のボックスを作り、 それぞれににsubを作ってテキストや画像などの子要素を入れていきます。 htmlは <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </body> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんと表示されているのですが、 IE（６，７とも）右の2番目(sub4)の要素を表示せず、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 全体の高さとしては右側の段組の方が高さがあります。 実際にはそれぞれのsubにテーブルやテキスト、画像などが入っています。 何が原因でしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- 締切済み
- HTML
- スタイルシートで特定IDかつ特定クラスの要素のスタイルを設定するには？
<div id="hoge" class="piyo">～</div> 上記のように特定IDかつ特定クラスの要素にのみスタイルを適用させるには CSSにどのように記述すればよいでしょうか？ div#hoge.piyo、div.piyo#hogeいずれも試してみましたがうまく動きませんでした。
- 締切済み
- HTML
お礼
こんなプラグインがあるんですね！ 簡単に実現できました。 ありがとうございました。