複数のjQueryを設置する方法
- 複数のjQueryを効果的に設置する方法を知りたいです。
- 特定のサイトに複数のjQueryを設置すると表示がうまくいかない問題があります。
- 質問内容がわかりにくいかもしれませんが、回答をお願いします。
- ベストアンサー
複数のjQueryを設置する方法
前回に質問をさせて頂いたのですが、質問内容がわかりにくいかと思い改めて質問をさせて頂きます。 jQueryもjavascriptも素人ですので、タグでの回答をして頂けるとありがたいです。 下記の２つを設置したいのですが、Ａしか表示せずに困っています。 （Ａ）http://www.css-lecture.com/log/javascript/037.html （Ｂ）http://weboook.blog22.fc2.com/blog-entry-101.html （Bottom Styleを使用） それぞれは単体で設置した場合には表示はするのですが、ＡとＢの２つを設置した場合 ＡＢと設置するとＢは正しく表示せず ＢＡと設置すると両方とも正しく表示しない という感じになってしまいます。 今回もまた質問の内容がわかりにくいようでしたら補足させて頂きますので、回答を宜しくお願いします。
- muuu2525
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
それぞれのデモサイトのソースをコピペでつなげただけですが、一応、以下で動作しているみたいですけれど…?（スクリプト、CSSのuriは調整してください） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="css/lavalamp_test.css" type="text/css" media="screen"> <style type="text/css"> <!-- #commentForm { padding:0 10px 30px; } #commentForm dt { font-weight: bold; margin-bottom: 5px; } #commentForm dd { margin-bottom: 10px; } #commentForm input { width: 250px; border: 1px solid #CCC; padding: 2px; } #commentForm textarea { border: 1px solid #CCC; padding: 2px; overflow:auto; } .updnWatermark { color: #999; padding: 2px; } //--> </style> <script type="text/javascript" src='js/jquery-1.5.2.min.js'></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> <script type="text/javascript" src="js/jquery.updnWatermark.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($) { $("#navi").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); $.updnWatermark.attachAll(); }); //--> </script> </head> <body> <div> <strong>Bottom Style</strong> <ul class="lavaLampBottomStyle" id="navi"> <li><a href="#">ホーム</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">javascript</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-category-2.html">Google API</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-category-7.html">カスタマイズ</a></li> </ul> </div> <form action="#"> <h3>post your comment</h3> <dl id="commentForm"> <dt><label for="author">name</label></dt> <dd><input type="text" id="author" name="author" title="name (required)"></dd> <dt><label for="email">mail address</label></dt> <dd><input type="text" id="email" name="email" title="mail address (required)"></dd> <dt><label for="url">URL</label></dt> <dd><input type="text" id="url" name="url" title="url"></dd> <dt><label for="text">comment※</label></dt> <dd><textarea rows="12" cols="60" id="text" name="text" title="message"></textarea></dd> </dl> </form> </body> </html>
関連するQ&A
- 同HTML内で複数のjQueryを設置する方法
Movable Type５で作製しています。 複数のjQueryを使用し、（Ａ）はヘッダーにメニュー、（Ｂ）はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。 それぞれ単品では問題なく作動するのですが、下記のように記述するとＢのみが作動する状態です。 jQueryもｊｓもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript"> var $ = jQuery = jQuery.noConflict().extend(true, $); … </script> <script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $.updnWatermark.attachAll(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> http://okwave.jp/qa/q6602248.html ↑に質問をされた方のは見たのですが、それでもわかりません（同様の質問なのかも不明ですが・・・） 本当にわからないので、宜しくお願いします。
- ベストアンサー
- JavaScript
- jQuery prettyPhoto 設置について
jQuery prettyPhoto 設置についてド初級の質問ですが、よろしくお願いします。 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ を設置するのに、ヘッダーに <script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> と記述すると別サイトで見ましたが、文字コードshift_jis で作られたサイトでは正しく作動しないのでしょうか？ （実際設置しましたがダメでした。） お分かりの方いましたら、ご回答ください！
- ベストアンサー
- JavaScript
- 複数のjqueryを入れると動かなくなる
今サイトを作っているのですが、スライダーと違うjqueryの相性が悪い（？）か自分の記載漏れで、埋め込みをした新しいjqueryは動きますが、スライダーが動かなくなってしまいました。 サイトです：http://blackartcard.com/ ヘッダー内は下記です。 <!--Scroll to Top--> <script src="http://blackartcard.com/backtop/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://blackartcard.com/backtop/scrolltopcontrol.js" type="text/javascript"></script> <!-- ======================================= スライダー ======================================= --> <link rel="stylesheet" href="http://blackartcard.com/slider/panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://blackartcard.com/slider/jquery.easing.1.3.js"></script> <script src="http://blackartcard.com/slider/jquery.timer.js"></script> <script src="http://blackartcard.com/slider/image-rotator.js"></script> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript"> $(document).ready(function(){ //マスオーバー時にキャンプション表示 $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'135px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); }); }); </script> </head> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。
- ベストアンサー
- JavaScript
- 複数のjQueryを使用するときの記述の仕方
今、こちらのjQueryと http://jsajax.com/Articles/jQueryLavaLamp3/1083 こちらのjQueryを http://www.css-lecture.com/log/javascript/039.html 同じページ内で使用しようとしています。 記述は以下の通りです。 ---------------------------------------------------- <!-- ▼前者のjs --> <script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script src="js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/jquery.lavalamp.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#lavaLamp").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> <!-- ▼後者のjs --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript" src="js/main/jquery.cycle.js"></script> <script type="text/javascript" src="js/main/slideshow.js"></script> このように記述しても後者のものしか動きません。 前後逆にすると前者が動きます。 以前の質問でjQueryのファイルには記述する順番があるとお答えを頂いたのですが、 調べても初心者の私には理解できず・・・。 こちらのファイルを同時に使用するにはどのような順番で記述したら宜しいのでしょうか？ 大変困っております、どうか宜しくお願い致します。
- 締切済み
- JavaScript
- 同HTML内で複数のjQueryを設置する方法
複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。
- ベストアンサー
- 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を複数設置した場合の優先順位について
同一ページ内に複数のjQueryを用いた場合の優先順位について質問させていただきます。 A：jQueryによるドロップダウンメニュー B：jQueryによるスライダー ※位置関係はAのすぐ下にBがあるとします。 この場合に、AがBの画像の下に潜り込んでしまいます。 Aを前面に出したいのですが、どういった対処をすれば良いのでしょうか？ とても困っています。 どうかお助け下さい。
- ベストアンサー
- JavaScript
- MTでjQuery、プルダウンメニューを表示させたい。
超初心者的な質問なのですがアドバイスを頂きたく書き込みさせて頂きます。 MovableTypeにjQueryを設置して プルダウンメニューを表示させようと考えております。 jQueryの設置でつまづいてます。 http://allabout.co.jp/internet/javascript/closeup/CU20071020A/index2.htm ここで言う自分のコードとは何でしょうか？ 検索しましたが解決しませんでした。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryアコーディオンについて
どなたかご教授頂けると嬉しいです。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-easy-accordion.html 上記のjQueryがクロスブラウザ対応と書いてありましたので使用したのですが、設置後にOperaやIE8（9？）で表示がおかしくなることに気づき困っています。 画像と文字が横にならない＋リンクに触れるようにする方法はありませんでしょうか… 宜しくお願いします、
- ベストアンサー
- JavaScript
- JQueryでのAJAXで困ってます
最近AJAXを勉強しようと思い、JQueryに手を出しました。 JQueryで画面遷移無しでdivで作ったメニューを選択して内容を指定したdivに表示させようと思っているのですが、 JQueryでのloadの動作がブラウザの違いで異なる動きをするので困ってます。 IEでは内容が表示されて、新しく表示した部分のJavaScriptが正しく動くのでいいのですが、 Firefox、Operaでは新しく表示した部分のJavaScriptが動作しません。 Chromeでは新しく表示した部分のCSSでさえ適用されません。 IE以外でも正しく動作させるにはどうしたらいいでしょうか？ ご回答、よろしくお願いします。
- ベストアンサー
- AJAX
お礼
ありがとうございます。 fujillinさんのお教え頂いた通りで一部を修正することで動作しました。 本来はfujillinさんのお教え頂いた通りで動作するのでしょうが、これはMovable Typeの何かが邪魔をしていたのでは？と思っています・・・。 下記のようにすることで偶然動作するようになりましたが本当に謎です。笑 jQuery(document).ready(function($) { $("#navi").lavaLamp({ ←#naviを#1, #2, #3に修正 fx: "backout", speed: 700, click: function(event, menuItem) { return false; ←falseをtrueに修正 } });