- 締切済み
jqueryを２つ設置した事で片方が動かなくなる
お世話になります かなり困っていますのでわかる方いらっしゃれば宜しくお願い致します 現在サイト内にjqueryを２つ設置しました ・一つは左グローバルメニューに伸縮するタイプのメニュー ・もう一つは画像をクリックするとポップアップの様になるスライドショー 少し自分で調べてみた所<script type=～></script> の書く順序によって片方が効いたり効かなかったりという所まではわかりました しかし、順序を変えても２つが共存する所まで行けません そもそも順序だけでは無いのでしょうか？ 以下を見てわかる方いらっしゃれば 是非お意見頂ければと思います 宜しくお願い致します 以下<head>内タグになります 今の状況だと左伸縮メニューは機能せず ポップアップスライドショーが機能しています <head> <!--左側伸縮メニュー--> <script type="text/javascript" src="./js/mootools-core.js"></script> <script type="text/javascript" src="./js/byslidemenu.js"></script> <script type="text/javascript"> window.onload = function(){ new BySlideMenu('verticalmenu', {vertical: true}); } </script> <!--//左側伸縮メニュー--> <!--ポップアップスライドショー--> <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(function() { $('a.large').fancybox(); }); </script> <!--//ポップアップスライドショー--> </head> かなり困っています 是非お力添えの程よろしくお願い致します
- poiuy0501
- お礼率25% (1/4)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかってませんが… ＞・一つは左グローバルメニューに伸縮するタイプのメニュー ＞・もう一つは画像をクリックするとポップアップの様になるスライドショー これって、ご提示のコードのbyslidemenu.jsとjquery.fancybox-1.2.1.pack.jsのことでしょうか？ 表題には「jqueryを２つ」と書いてありますが、byslidemenu.jsはmootoolsベースではないでしょうか？ もし、片方ずつなら動作しているなら、jQueryとmootoolsが、単純に干渉しているだけのことではないでしょうか？ jQuery側に干渉を避けるための方法が用意されていますが、試してみましたか？ ＜以下の参考サイトはprototypeの例ですが＞ http://semooh.jp/jquery/ref/cont/with_prototype/
- utun01
- ベストアンサー率40% (110/270)
No.1さんに補足で、 onload時に実行させたい場合は jQuery.event.add(window, "load", function(){<処理>}); といった感じに書きます。 $(document).ready(function[]); は、読み込まれた順に処理がスタックし、順次実行される形になります。 特別にonload時に瞬時に実行する必要がないのであれば $(document).ready(function[]);での記述をお勧めします。 ちなみに蛇足ですが、 $(document).ready(function[]);と $(function(){});は同じ処理になります。 使い分けは趣味ですかね。 コンパイルすれば結局同じですし。
- t_ohta
- ベストアンサー率38% (5080/13275)
window.onload = function(){ new BySlideMenu('verticalmenu', {vertical: true}); } を $(function() { new BySlideMenu('verticalmenu', {vertical: true}); }); としたら動きませんか。
お礼
ご回答ありがとうございます 変更したのですが 未だ動きません
関連するQ&A
- 複数jQueryの配置で干渉 設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- 締切済み
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
- 同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にて
こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！
- ベストアンサー
- JavaScript
- JQUERYをはじめて導入したのですが、
JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。
- ベストアンサー
- JavaScript
- jQueryについて質問です。
jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。
- ベストアンサー
- JavaScript
- 一部のjQueryとmootoolsが競合します
dropdownメニューのdroppy(jquery)とmootoolsを使用したカレンダーが競合してしまいます。 mootoolsのカレンダーhttp://www.electricprism.com/aeron/calendar/ とメールフォームプロ http://www.synck.com/contents/download/cgi-perl/mailformpro.html のjqueryの組み合わせは問題ありませんでした。そこにdroppy http://onehackoranother.com/projects/jquery/droppy/ が入ると動かなくなります。 助けて頂ければ嬉しいです。よろしくお願いいたします。 jQuery.noConflict();やDollar Safe Modeなどもやってみましたが、うまくいきません。どこが間違っているのでしょうか？ <script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery("#nav").droppy(); }); </script> ----------------------------- <script type="text/javascript"> $(function() { $("#nav").droppy(); }); (function($) { window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); }(document.id)); </script> ---元はこちら↓-------------- <script type="text/javascript" src="commons/jquery.js"></script> <script type="text/javascript" src="js/jquery.droppy.js"></script> <script type="text/javascript"> $(function() { $("#nav").droppy(); }); </script> メールフォームプロ↓ <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> カレンダー↓ <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/calendar.rc4.js"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); //]]> </script>
- ベストアンサー
- JavaScript
- このjqueryが稀に動かない
画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });
- 締切済み
- JavaScript
- Jqueryの干渉について
Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
補足
ご協力ありがとうございます しかし未だ動きません