Dragdealer JSのScroll-barを二つ設置したいのですが、うまく動作しません・・
http://code.ovidiu.ch/dragdealer/を利用して、iframeがわりに(iphone,ipad対策)スクロールバーを設置したいと思っています。
一つは問題なく設置できたのですが、二つ以上の設置が上手くいかず困ってます。

http://code.ovidiu.ch/dragdealer/のソースを利用しています。

(例)
<div class="top-spaced right-float">
<div id="scroll-bar" class="dragdealer rounded-cornered">
<div class="red-bar handle"></div>
</div>
</div>
<div id="scroll-mask" class="top-spaced rounded-cornered">
<div id="scroll-content">
<iframe src="http://www.XXX.net/XX/XX_p.php" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" width="370" height="600"></iframe>
</div>
</div>

<br>
<div class="top-spaced right-float">
<div id="scroll-bar" class="dragdealer rounded-cornered">
<div class="red-bar handle"></div>
</div>
</div>
<div id="scroll-mask" class="top-spaced rounded-cornered">
<div id="scroll-content">
<iframe src="http://www.XXX.net/XX/XX_p.php" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" width="370" height="600"></iframe>
</div>
</div>

上のように2つ設置すると、動作がうまくいきません・・・一つだったら問題なかったのですが、どこをどう変更・修正すれば良いか、もしご存知の方がいらっしゃいましたら、回答宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

2つのid(scroll-bar、scroll-mask、scroll-content)が重複しているからだと思います。


1つ目と2つ目のidを変更し、Javascriptコードの
new Dragdealer('scroll-bar',{
・・・
});
をそれぞれのidに対応した2つを書いてあげれば大丈夫だと思います。
    • good
    • 0
この回答へのお礼

回答ありがとうございました。
dragdealer-main.jsファイルにて

var mask = document.getElementById('scroll-mask');
var content = document.getElementById('scroll-content');
var mask1 = document.getElementById('scroll-mask1');
var content1 = document.getElementById('scroll-content1');

new Dragdealer('scroll-bar',
{ ・・・・

new Dragdealer('scroll-bar1',
{・・・・
としてcss,ID等もあわせたところ、二つ動作するようになりました。


お手数おかけしました。

お礼日時:2011/04/28 16:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング