- ベストアンサー
特定のDOM読込時のload()処理について
- 特定のDOM読込時に発生するload()処理について、問題が生じています。
- HTMLのbody終了タグ前に記述されたdiv#tooltipが読み込まれず、意味のない状態になっています。load()処理が機能しない原因を解決する方法をご教示ください。
- jQueryを使用しているため、ボタンクリック時にツールチップの内容が読み込まれ、fadeInのアニメーションが起こるような仕組みとなっています。しかし、loadingのアイコンが表示されたままの状態が続いています。
- webama_fk
- お礼率91% (117/128)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問文の例示だけではよくわかりませんが・・・ 「ボタンエリア」は変数名？、 「loadimg」、「ttip」にはjQueryオブジェクトが代入されている？ とりあえず、そのように仮定して、 ＞$("div#tooltip").load(function(){～～ で、何をしたいのか不明です。 ajaxで外部からデータを読込むのであれば、同じload()でも構文が違うでしょうし、loadイベントを設定したいのであれば、divが対象とはならないでしょう。 http://api.jquery.com/load-event/ http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents ajaxを行なうつもりでないのでしたら、その構文はイベントを設定しているだけなので、仮に正しく動作していたとしてもloadイベントが発生しない限り何も起きません。 また、クリックする毎にloadイベントを設定してしまうので、想定とは違うことになるのではないでしょうか。（イベントがダブって設定される）
お礼
ご返信ありがとうございます。 わかりづらい記述で大変申し訳ありません。 仮定されている箇所は、その認識で間違いございません。 ＞＞$("div#tooltip").load(function(){～～ ＞で、何をしたいのか不明です。 実現したいことは、ボタンをクリックして浮き出るツールチップ上に テキストや画像などが入ってきますので、画像サイズが大きい場合に ”読み込んでいます”ということが判るようにローディング画像を 表示するということです。 ＞loadイベントを設定したいのであれば、divが対象とはならないでしょう。 あ、やはりこういう使い方ができないんですね。 ご丁寧にありがとうございます。
関連するQ&A
- jqueryでhtmlを読み込んだ後に処理をさせる
お世話になっております。 javascript初心者で最近、JQueryを使い始めた者です。 lightboxのようなモーダルウインドを作りたく、各ボタンのリンク先のファイルを読み込ませた後に フェードインで読み込ませた要素を表示させたいのですが 以下のソースでは #overLayerにaタグのリンク先のhtmlファイルを読み込ませた後にフェードインさせる処理がうまくいきません。 読み込ませるload1.htmlに画像を入れていると、フェードインしながら画像が読み込まれてしまいます。 画像付きhtmlファイルを画像データも含め完全に読みこみ終わった後に処理をするにはどのようにすればいいでしょうか？ ご回答宜しくお願いいたします。 //*****javascriptコード**** <script type="text/javascript"> $(function(){ //bodyに背景レイヤーとボックス表示用のレイヤーを追加 $("body").prepend("<div id='glayLayer'></div><div id='overLayer'></div>"); //$("#overLayer").hide(); //ローディング画像のプリロード $("<img>").attr("src","images/loading.gif"); //背景レイヤークリック時の処理 $("#glayLayer").click(function(){ $(this).hide(); $("#overLayer").fadeOut("slow",function(){ $("#overLayer").html(""); }); }); //リンクボタンクリック時の処理 $("a.modal").click(function(){ $("#glayLayer").show(); $("#overLayer").show(); $("#overLayer").html("<img src='images/loading.gif'>"); $("#overLayer").data("file",$(this).attr("href")); $("#overLayer").load($("#overLayer").data("file"),function(){ //alert("complete"); $("#overLayer").hide(); $("#overLayer").fadeIn(1000); }); return false; }); }); </script> //****htmlソース**** <body> <ul> <li><a href="load1.html" class="modal">テスト1</a></li> </ul> </body>
- ベストアンサー
- JavaScript
- 特定の要素を表示後に次の処理を実施する方法について
初期表示で、ローディング画像を表示し、div#mainの中にあるすべての画像群が読み込まれてから表示するために、<head>タグ内に以下の処理を入れています。 <script type="text/javascript"> $(function(){ $('#main').css('display', 'none'); //全てのページコンテンツを読み込んだ後に、function内の処理を実行 $(window).load(function(){ $('#loading').remove(); $('#main').fadeIn(700); }); }); </script> 上記処理後、div#mainが表示されたというのを検知してから、次の処理（具体的にはテキスト画像をフェードインさせる）をしたいのですが、方法はありますでしょうか。
- 締切済み
- JavaScript
- jqueryで以下のようにして読み込みをさせて
jqueryで以下のようにして読み込みをさせて ボタンをクリックするとプラスして表示する形にしているのですが $(document).ready(function(){ window.scrollTo(0,1); $('#river').load('/test.php', null, function(){ }); var pageset=1; $('#loadmore').click(function(){ var a = $(this); var b = $(this).html(); $.get('/test.php?page='+pageset, function (data){ $("#river").append(data); pageset = pageset + 1; a.html(b); }); return false; }); }); ＜ボタン、表示部分のソース＞ <div id="river" rel=""> <p id="loading">loading</p> </div> <a href="#" class="action more" id="loadmore">ボタン</a> pagesetの値が一定の数に達した際（たとえば5など）に ボタンをクリックすると別ページを別窓で開かせるようにしたいのですが （http://www.yahoo.co.jp/が別窓で開くなど） どのような記述を追加すればよいのでしょうか。 また、pagesetの値が一定の数に達した（たとえば5など）際に 「ボタン」とかかれた部分を別の名前に変更させる場合や非表示にする場合は どのような記述をすれば可能になりますでしょうか。 調べながら色々やってみたのですが、どうしても上手くいきません。 聞いてばかりで申し訳ありませんが ご教授いただけますと幸いですm(__)m
- ベストアンサー
- JavaScript
- jQuery ツールチップの中のリンク
ツールチップの中にリンクを置きたいと考えています。 以下HTMLとscriptご参照ください。 テキスト「hoge」をマウスオーバーすると、その下のp.tooltipが表示されるイメージです。 ですが、「hoge」からマウスが離れると、tooltipが消えてしまい、 中のリンクを触ることができません。 （当然ながら…なのですが） 何か良い方法で、ツールチップの中のリンクをクリックする方法はありますでしょうか？ tooltipにマウスがある時はmouseoutイベントが起動しない…みたいな。 そもそも無理なのでしょうか？ 詳しい方、ご教授いただけたら大変、助かります。 どうぞ宜しくお願いいたします。 ■HTML <p class="link">hoge</p> <p class="tooltip"> ダミーダミーダミー <a href="#test">testへ</a> </p> ■script $('p.tooltip').hide(); $('p.link').mouseover(function(){ $('+ p.tooltip',this).slideDown(); }).mouseout(function(){ $('+ p.tooltip',this).slideUp(); });
- ベストアンサー
- JavaScript
- jQueryの否定疑似クラスが効かない
いつも、こちらでお世話になっているものです。 日々、jQueryと格闘中でして、 またまたjQuery関連で分からないところが出てきてしまいました。 ボタンを配置していて、そのボタンをクリックしたら lightbox風にコンテンツが表示されるようにしています。 (表示コンテンツは以下スクリプトで言うとdiv.overLayerContents) 表示は問題なくできるのですが、 そのあとに、コンテンツ部分以外をクリックしたら hide()させるように以下のように設定してみました。 ですが、コンテンツ部分をクリックしてもhide()が実行されるのです。 例えば、pとかliとかをクリックしても、hide()が実行され、閉じてしまうのです。 否定疑似クラスをつけず、 #overLayerだけにすると、一応、hide()は機能するので 多分、否定疑似クラス:not～がうまく機能していないみたいなんです。 以下、スクリプトを書きましたので、 詳しい方、ご教授下さい。 どうぞ宜しくお願いいたします。 ▼スクリプト ---------------------- $(function(){ $("#glayLayer , #overLayer:not(.overLayerContents)").click(function(){ $("#glayLayer").hide(); $("#overLayer").hide(); }); $("#btn").click(function(){ $("#glayLayer").show(); $("#overLayer").show().css("marginTop","5px"); return false; }); }); ▼html ---------------------- <div id="glayLayer"></div> <div id="overLayer"> <div class="overLayerContents"> <p>タイトル</p> <ul> <li>コンテンツ1</li> <li>コンテンツ2</li> <li>コンテンツ3</li> </ul> </div> </div> <div id="btn">ボタン</div> ---------------------- ※#glayLayer , #overLayerとも、 最初にcssでdisplay:noneにしています。
- ベストアンサー
- JavaScript
- 【jQuery】複数の画像の読み込み完了感知方法
やりたいこと。 すでに表示しているHTML画面上にさらにHTMLタグ（画像を含む）を表示したい。 そのタグにて表示されるべきものがすべて表示されたら、新たに別の関数を実行したい。 ■画像がひとつの場合はこんな感じ？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj.load(function(){ jqObj.prepend(imgObj); $("body").prepend(jqObj); //このへんに描画は終わった状態での処理 }); } ); ■画像が複数ある場合はどう書けばよいでしょうか？ 以下のような書き方であってるのでしょうか？ $("#hoge").click( function(){ var jqObj = $("<div />"); var imgObj = $("<img />"); var imgObj2 = $("<img />"); imgObj.attr({ "src":"./g.bmp"}); imgObj2.attr({ "src":"./f.bmp"}); imgObj.load(function(){ imgObj2.load(function(){ jqObj.prepend(imgObj); jqObj.prepend(imgObj2); $("body").prepend(jqObj); //このへんに描画は終わった状態での処理 }); }); } ); PS そもそもどの時点でブラウザは画像をWEBサーバに要求するのでしょうか？ imgObj.attr({ "src":"./g.bmp"}); の時点でgetの要求出すのでしょうか？
- ベストアンサー
- JavaScript
- 条件式にcssの値を使う方法。
条件式にcssの値を使う方法。 下記の部分が謎なのですが、プロパティ ＝＝ 値という形でなぜプロパティの値がnoneだった時となるのでしょうか？ if( toolTip.css("display") == "none" ) $(function() { $(".tooltip").each(function(){ var toolTip = $('<div class="tooltip-body">'); var toolTipText = $(this).attr("data-tooltip"); toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide(); $("body").append(toolTip); $(this).hover(function(){ if( toolTip.css("display") == "none" ){ var targetPostion = $(this).offset(); var toolTipHeight = toolTip.height(); toolTip.css({ "position": "absolute", "top": targetPostion.top - toolTipHeight -3 + "px", "left": targetPostion.left + "px", "display":"block", "opacity": "0", "z-index": "9999" }) .stop().animate({ "top" : "-=10px", "opacity": "1" }, 250); } }); }); });
- ベストアンサー
- JavaScript
- ajax を使って，ｈｔｍｌを読み込み表示する方法
webページのfaqを作成しています。 目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問２</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問３</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問２</h3> <div.class="a-2"></div> <h3>質問３</h3> <div.class="a-3"></div> </div> これを実行すると，文字の場所がずれて表示されてしまいます。 （今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います） その他，細々と不具合があります。 また，質問の数は５０以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptの動的読み込みについて教えてください
javascriptの動的読み込みについて教えてください いつもお世話になります。 jqueryを勉強中のものです。 少しややこしいのですが、 以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？ よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- function test(){ jQuery.get("./load.html",function(data){ alert(data); $("#target_id",window.parent.MainPanel.document).html(data); }); } // --></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"><!-- function hello(){ alert("こんにちわ"); } // --></script> <button onClick="hello();">hello</button> -----------------------------------------------------------
- ベストアンサー
- JavaScript
- jQueryで親カテゴリーが違う場合値を変えたい
http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly こちらのソースをいじってます。 [rel~=tooltip]に当てはまる要素で現在選択してる物の親要素が.webなら～と条件分岐したいのですが、実行しても、[rel~=tooltip]が含まれる要素の中に.webがあるならみたいなニュアンスになってるようです。どうやればここに条件分岐できるのでしょうか？ HTML↓ <html> <head>~</head> <body> <div class="web"><a href="" rel="tooltip">abc</a></div> <div class="none"><a href="" rel="tooltip">abc</a></div> </body> </html> jQuery↓ $( document ).ready( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); if(target.parent('.web')) { tooltip = $( '<div id="tooltip" class="web"></div>' ); }; if(target.parent('.none')) { tooltip = $( '<div id="tooltip" class="none"></div>' ); }; if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); }
- ベストアンサー
- JavaScript
お礼
ご丁寧にサンプルまでご提示頂きありがとうございます！ 大変勉強になりました！！！