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ファイルの生存は確認できており、
その系統のミスではないと思うのですが。。。

どなたかアドバイスをお願いします！

回答No.3

yuu_x · ベストアンサー

あ～そうか。

jQuery と、prototype.js を同時に使ってることが原因です。
提示ページの場合、jQuery の後で、prototype.js を読み込んでいるので、
$ 関数は prototype.js で定義されたものになります。

$('#test') : prototype.js の書式じゃないので null
同じく
$('test').scrollFollow : scrollFollow は prototype.js の関数ではない。

浮気せずに一方だけ使用するか、どちらかの $ 関数を書き換えるか。
どうしたものでしょう。

-----------------
予断ですが、XHTML で書く場合、整形式になってないと、パースエラー & DOM が正常に動作しなくなりますよ。（今件とは直接関係はないですが）

<br> → <br />

><fieldset>
><h3>商品検索</h3>
><form action="index.html" method="GET">
><input type="text" name="word" size="15"><input type="hidden" name="action" value="search"><p>
><div align="right"><input type="submit" name="search" value="検索"></div>
></form>
></fieldset>
↓
<form action="index.html" method="GET">
<fieldset>
<h3>商品検索</h3>
<p><input type="text" name="word" size="15" /><input type="hidden" name="action" value="search" /></p>
<div align="right"><input type="submit" name="search" value="検索" /></div>
</form>
</fieldset>

他多数。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

安定してる HTML4.01 のが良くないですか？（個人的意見）4.01 でも修正はしたほうがいいと思いますが。

お礼

まずは返信が遅くなったことお詫びします。

そして、すべてが解決しました！
やはり、Prototypeとjqueryの併用が原因でした。
結局、どちらにも依存しないwrapScrollを使用しました。

ありがとうございました！

回答No.4

yuu_x

あ～いかん。訂正です。
<form action="index.html" method="GET">
<fieldset>
<h3>商品検索</h3>
<p><input type="text" name="word" size="15" /><input type="hidden" name="action" value="search" /></p>
<div align="right"><input type="submit" name="search" value="検索" /></div>
</fieldset>
</form>

-------------------------------------------
同時に使う方法もあるみたいですね。
http://semooh.jp/jquery/ref/cont/with_prototype/

回答No.2

yuu_x

$('test').scrollFollow({
});
↓
$('#test').scrollFollow({
});

# のつけ忘れでないですか？

お礼

ありがとうございます！
しかし、#を付けた場合is nullのエラー、
付けなかった場合はnot functionのエラーが出てしまうのです。

なぜでしょうか…

回答No.1

yuu_x

>エラー: jQuery is not defined
>ソースファイル: （省略）update/jslib/ui.core.js

<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-1.2.6.js"></script>
<script type="text/javascript" src="./jslib/ui.core.js"></script>

お礼

ありがとうございます。
なんとかdefinedのエラーを消すことが出来ました。

しかし、
エラー: $("#test") is null
ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/
行: 13

エラーまたは、
エラー: $("test").scrollfollow is not a function
ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/
行: 13
が発生してしまいます。

なぜでしょうか？
よろしくおねがいします！