レスポンシブデザインでホームページを制作しています。
解決できない問題に直面してしまいました。
どなたか詳しい方がいらっしゃいましたらアドバイスをお願い致します。
同一ページ内に
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>
力不足で本当にお恥ずかしいのですが、よろしくお願い致します。
お礼
なるほど！ 記述の順序の問題だと思っていたのですが … 問題は全然別のところにあったのですね！ 無事、全て作動させる事ができました。 何日も悩んでいたので、本当に助かりました！ ありがとうございましたm(_ _)m