こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jsファイルの記述順について

レスポンシブデザインでホームページを制作しています。
解決できない問題に直面してしまいました。
どなたか詳しい方がいらっしゃいましたらアドバイスをお願い致します。

同一ページ内に
qTip … ttp://craigsworks.com/projects/qtip/demos/content/loading と
Naver … ttp://formstone.it/components/Naver/demo/index.html を使用したいと考えています。

しかし、色々と試してはいるのですが片方しか作動しません。
どちらも単体ではきちんと作動していますので、記述の順序の問題なのでしょうか。
該当部分は以下の通りです。

<head>
<link type="text/css" rel="stylesheet" href="css/jquery.fs.naver.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/smart-crossfade.js"></script>
<script type="text/javascript" src="js/jquery.smoothScroll.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- qTip -->
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
// Use the each() method to gain access to each elements attributes
$('.col-lg-12 a[rel]').each(function()
{
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="http://craigsworks.com/projects/qtip/images/throbber.gif" alt="Loading..." />',
url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
title: {
text: 'WORKS' + $(this).text(), // Give the tooltip a title using each elements text
button: '×' // Show a close link in the title
}
},
position: {
corner: {
target: 'bottomMiddle', // Position the tooltip above the link
tooltip: 'topMiddle'
},
adjust: {
screen: true // Keep the tooltip on-screen at all times
}
},
show: {
when: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus',
style: {
tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light', // Use the default light style
width: 280 // Set the tooltip width
}
})
});
});
</script>
<!-- Naver -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fs.naver.js"></script>
<script type="text/javascript">
$(function(){
$("nav").naver({
animated: true,
labelClosed: "",
labelOpen: ""
});
});
</script>
</head>

<body>直前に …
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.js"></script>
</body>


力不足で本当にお恥ずかしいのですが、よろしくお願い致します。

投稿日時 - 2014-06-21 02:09:44

QNo.8646797

困ってます

質問者が選んだベストアンサー

1. jQuery のライブラリの記述が重複している場合は、問題があります。
一番最後の、1.9.2のライブラリがすべてに適用されているかもしれません。
1.6.2 1.8.3 1.3.2 1.9.1が重複しています。

1.9からは大幅にjQueryは変わっていますので、使えなくなった命令もありますので
注意してください。
jQuery 1.9 でgoogle検索すれば変更点が検索できます。

重複については下記を参照
http://okwave.jp/qa/q5347698.html

尚、重複していても、最後のjQueryライブラリでないものを使う指定の方法もあります。
https://www.google.co.jp/#q=%28function%28j%29{j%28function%28%29{$%3DjQuery%3Djs}%29}%29%28$%29&spell=1

3.ローディング画像( http://craigsworks.com/projects/qtip/images/throbber.gif )は
自分のホームページにアップロードして、その画像を使うようにしてください。

投稿日時 - 2014-06-22 05:40:51

お礼

なるほど!
記述の順序の問題だと思っていたのですが …
問題は全然別のところにあったのですね!

無事、全て作動させる事ができました。
何日も悩んでいたので、本当に助かりました!
ありがとうございましたm(_ _)m

投稿日時 - 2014-06-22 18:12:33

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問