- ベストアンサー
jqueryでcluetipを使ったツールチップ表示について
fujillinの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No2です。 実際のソースを見てないので、No2の回答は想像で書いてます。 『ローカルで問題なくて、サーバーでうまくいかない』ということからタイミングの問題かなと… jquery自体をよく知らないのですが、loadは多分非同期だと思われるので、 $('.title').cluetip({splitTitle: '|'}); を実行した時にまだ、フォームのloadが終了していなければ、（当然ながら）それらの要素には設定されないことになります。 なので、確実を期すならloadが終了してから実行するのがよろしいかと… loadは load( url, data, callback )みたいな構文らしいので、callbackで実行すればよいのでは？ http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/ と思ったけれど、No3様の回答を見ると、loadが何種類かあるみたい… 対象がその中の一つなら、そのcallbackでもよいけれど、複数あるのなら、それぞれの終了を見て一番最後に（対象を全部ロードし終わって）実行するような関数を作っておいて、それをセットしてあげる必要がありそう。 あるいは、設定するほうの範囲を限定して（loadした範囲にして）、それぞれに設定するのでもいけるのかも。
関連するQ&A
- 再び、jqueryのloadについて質問させてください。
再び、jqueryのloadについて質問させてください。 http://www.g-land.net/search02/database.cgi?equal2=123x701&tid=list12&did=data2 上記ページの <div id="selectcol"></div> の部分に、loadで $("#selectcol").load("../item-cat01/gift00102921.html #color");とし、 http://www.g-land.net/item-cat01/gift00102921.html のページ内にある <div id="color"><span class="title" title="色について|商品のお色をお選びください。商品お１つの価格になります。">色：<select name="sp13"><option value="Ａ／レッド">Ａ／レッド</option><option value="Ｂ／グレー">Ｂ／グレー</option><option value="Ｃ／ブラック">Ｃ／ブラック</option></select></span></div> を呼び出したいのですが、呼び出し元となるページの文字コードがshift_jisなのでなのか、呼び出す事が出来ません。(ダミーでutf-8で作ったページからは現状の記述で呼び出す事は出来ました。) これは、回避できない事なのでしょうか。 何卒、ご助言くださいませ。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery読み込めない
アコーディオンメニューを導入しようと思い、こちらのサイトの https://b-risk.jp/blog/2021/11/accordion/#1 1つ開くと他の項目が閉じるアコーディオンのコードをコピペしましたが、表示はされますが動きません。 コードはコピペしただけなので、まったく変更していません。 たぶん、jQueryを読み込んでいないのだと思います。 Chromeのデベロッパーツールを開きConsoleタブが開いたら Failed to load resource: the server responded with a status of 404 (Not Found) Failed to load resource: the server responded with a status of 400 (Bad Request) というメッセージが出ます。 jQuery自体は</head>の上に <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script> と記載し動作は確認済みです。 アコーディオンメニューのjQueryコードは</body>の上に記載しています。 コードは次のとおりです。 ■HTML <div class="qa"> <div class="q">Q1.○○？</div> <div class="a">A1.✕✕！</div> </div> <div class="qa"> <div class="q">Q2.○○？</div> <div class="a">A2.✕✕！</div> </div> <div class="qa"> <div class="q">Q3.○○？</div> <div class="a">A3.✕✕！</div> </div> <div class="qa"> <div class="q">Q4.○○？</div> <div class="a">A4.✕✕！</div> </div> <div class="qa"> <div class="q">Q5.○○？</div> <div class="a">A5.✕✕！</div> </div> ■CSS .qa { font-size: 20px; .q { background-color: mediumseagreen; height: 60px; padding: 15px 40px 15px 15px; position: relative; cursor: pointer; &:before { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%); } &:after { position: absolute; content: ""; display: block; width: 10px; height: 2px; background-color: #fff; right: 15px; top: 50%; transform: translate(0, -50%) rotate(90deg); } } .q.active { &:after { display: none; } } .a { background-color: greenyellow; height: 60px; display: none; padding: 15px; } } ■jQuery $('.q').click(function(){ $(this).siblings('.a').stop().slideToggle(); $('.q').not($(this)).siblings('.a').slideUp(); $(this).toggleClass('active'); $('.q').not($(this)).removeClass('active'); }); 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryとjavascriptの競合？
どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> <div class="header"></div> <div class="main">**フロートで左に配置 <iframe></iframe> </div> //１． //jqueryの「iframe-auto-height」プラグインを使って、 //読み込まれた内容に応じてiframeの高さを変えるようにしたい。 <div class="menu">**フロートで右に配置</div> //２． //jqueryの「portamento」プラグインを使って、 //画面が縦長になりスクロールしてもこの「メニュー」が //画面に追従してフロートするように（常に画面上に現れている様に）したい。 //３． //このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■ 「１．」「２．」のjqueryは、同時にちゃんと動作しました。 が、「３．」を加えると「１．」が動きません。 「２．」は常に正常に動作します。 「１．」と「３．」が競合しているようなのですが、 私はみなさんが提供してくださっているスクリプトを“切り貼り”して 使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 ★「３．フロートするメニューボックスの中のリンクから、 表示する内容に応じて高さが可変するiframeの内容を切り替える」 にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> /// １．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> ///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> /// 『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 /// フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 /// は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> /// 『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> /// 『フロートボックス』用読み込み＆スクリプト </body> 内容は以上となります。 何卒よろしくお願いいたします。
- 締切済み
- JavaScript
- jQueryで文字数カウンタ（複数対応）
jQueryのプラグインを作成中です。 指定したテキストフォーム、テキストエリア内の文字数をカウントして、 指定場所に文字数を表示させるというものです。 下記のように記述し、 (function(jQuery) { jQuery.fn.textCount = function(options) { //キーボードが押された時にカウント jQuery(this).live("change keyup",function(){ var count = jQuery(this).val().length; var disp_area = jQuery(this).attr("id"); jQuery("."+disp_area).html(count+"文字"); }); return this; }; })(jQuery); jQuery(".counter").txtCount(); とHTML内で宣言しました。 <textarea id="sample">ここの文字数が</textarea> <div class="sample">ここに表示</div> と、ここまではうまくいきました。 が、テキストエリアの数が複数個あり、数が変動するため、IDを配列にしたいと思っています。 そこで、 <textarea id="sample[1]">個々の文字が</textarea> <div class="sample[1]">ここに表示されない</div> のように記述しました。 すると文字数が表示されなくなってしまいました。 classやidに配列指定はできないのでしょうか。 また、この場合はどのように宣言するのが正しいのでしょうか。
- ベストアンサー
- JavaScript
- jqueryプラグインの設置方法
すみません、超初心者です。 コチラのサイト（http://laquu.com/plugin/innerslide/demo）の「インナースライド」プラグインを導入したいのですが、カーソルを載せてもピクリとも反応しません。 自分で書いたソースはこんな感じです.↓ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.laquu.custom-65049.js"></script> <script> jQuery(function(){ laquu("#innerslide1").innerSlide(); }); </script> <body> <div class="innerslide-panel"> <div id="innerslide1"> <p>カーソル載せる</p> <div class="laquu-innerslide"> スライドする内容 <!-- End laquu innerslide --></div> <!-- End innerslide1 --></div> <!-- End innerslide panel --></div> </body> ちなみに今はサーバーにはアップロードしておらず、完全にローカルでプレビューしています。 もしかして.jsファイルをサーバーにアップロードしなくては動かないのでしょうか？？？ 無知で申し訳ありません、ご回答宜しくお願い致します。
- 締切済み
- JavaScript
- jQuery・Ajaxについて教えて下さい。
jQueryを使用した「Tipped」というツールチップ作成フレームワークを使用しています。 「ツールチップの上にさらにツールチップを表示する」ということが出来ず困っております。 ドキュメント http://projects.nickstakenburg.com/tipped/documentation 特定のクラス名の文字にカーソルを当てると、Ajaxにより外部HTML(PHP)の内容が小窓で表示されるというものです。 これを使って外部HTMLの表示をすることはできたのですが、 ツールチップ内に表示されるHTMLの中にさらに同名のクラス名を埋め込み、 そこにカーソルを当てたとき二重（入れ子）でツールチップを表示するということをしたいのですが、 最初の１つしか表示されません。 ■読み込む側(A.php) ～ 必要なファイルの読み込み ～ <span class='tipped' data-tipped='B.php'>カーソルを当てると「B.php」の内容を表示</span> <script type="text/javascript"> jQuery(document).ready(function() { Tipped.create(".tipped", { ajax: true }); }); </script> ～ ■読み込まれる側（B.php) <span class='tipped' data-tipped='C.php'>ここにカーソルを当てて「C.php」の内容を表示させたい</span> A.phpからB.phpのツールチップを表示することはできました。 B.phpからC.phpのツールチップを表示することもできますが、 A.phpに表示したB.phpからはC.phpのツールチップが表示できません。 Ajaxを使わず、B.phpに静的なツールチップを埋め込んだ場合も表示できませんでした。 wordpressの記事ページで動作させています。 必要なjsファイルは読み込んでおり、ファイルはそれぞれ同じ階層にあります。 何が問題で表示できないのでしょうか。どうかご教示をお願いします。
- ベストアンサー
- JavaScript
- jQueryの多重読込
2つのHTMLがあり、両方ともjQueryプラグインを使っています。 今回、a.html側に、jQuery loadで、b.htmlを読込みました。 ■a.html jQuery 本体 jQueryUI jQueryForm jQuery.HashChanged など基本js（多数） ■b.html jQuery.Gallerific jQuery.Fancybox jQuery.fixPing などメディア系統js（多数） ■困っていること 両方とも、$(function(){ ... }) 構文を使って、DOMの展開完了を待っているのですが、「読込まれる側=b,html」の、$(function(){ ... }) がうまく働いていないようなのです。 b.html 単体では何の問題もないのですが、a.htmlにloadされると、遅延読み込みがききません。 元である a.html で全部のjQuery プラグインを読むのは重すぎるため、各々で必要なプラグインを都度、読むようにしたいのですが、その場合、読み込まれる側の実行遅延（DOM展待ち）はどのようにしたらいいでしょうか？
- ベストアンサー
- JavaScript
- jQueryで別のhtmlから情報取得
現在レンタルのショッピングカートにてウェブサイトを立ち上げているところです。 こちらのショッピングカートの会社ではjQueryを採用しています。 質問ですが、 こちらではカートに入っている金額情報を自働生成されるページのみでしか表示させる事ができない仕様です。 この金額情報をhtmlから取り出し、同ドメインの別のページへと表示させたいのですが 方法をお教えいただけますでしょうか、よろしくお願いします。 金額情報price.htmlのソースを見ますと <body> //間に色々と <div class="cart"> <div class="cartBody"> <div class="cartCommodity> 商品名 </div> <p class="price">金額情報</p> </div> </div> //色々と </body> となっています。 cartCommodityの<div>～</div>がカートに入ってる商品の種類だけ増えます。 この件も含め必要があってjavascriptを勉強し始めたのですが、 まだ未熟すぎ、こちらがどうしても上手くいきません。 どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript
- jQueryについて
ど素人の質問で申し訳ありません。 jQueryを使うにはどうすればよいのでしょうか？ jQuery公式サイトでダウンロードすると、ものすごいコードが書かれたページにいきます。 jQueryの読み込みとはどういうことでしょうか？ どなた様かど素人でも分かるように一から教えてください！ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryでの文字置換について
jqueryを使った文字の置換を行いたいのですがうまくいきません。 どなたかお詳しい方、ご教授いただけますでしょうか。 よろしくお願いします。 ■行いたいこと <div class="bbb"><img src="0123.jpg"></div> をwindow読み込み時に <div class="bbb"><img src="0123s.jpg"></div> と置き換えしたい。 javascriptのソースは以下の通りです。 <script src="jquery-min.js"></script> <script type="text/javascript"> <!-- $(function(){ var aaa = $('.bbb'); aaa.html().replace(/.jpg/ig, "s.jpg"); }); // --> </script>
- ベストアンサー
- JavaScript
お礼
fujillin様の 『対象がその中の一つなら、そのcallbackでもよいけれど』という言葉がヒントとなり、 yyr446様にアドバイスいただいた記述をもとに、 $('span.title').cluetip({splitTitle: '/'}; をコールバックで $("#gift_01_02").load("../jitem/parts02.html #gift_01_02"); の中で呼び出し、 $("#gift_01_02").load("../jitem/parts02.html #gift_01_02",function(){ $('span.title').cluetip({splitTitle: '|'}); とする事で、解決いたしました。 本当にありがとうございました。