Rico.Effect.FadeToエラー：対処方法とは？
- Ajax用ライブラリRicoを使用して特殊効果をかける際にRico.Effect.FadeToエラーが発生しています。
- ソースコードと環境に問題がないことを確認しましたが、原因が特定できません。
- Ricoの動作確認方法や対処方法を教えてください。
- ベストアンサー
Rico.Effect.FadeTo is null or not a
Rico.Effect.FadeTo is null or not an object Ajax用ライブラリRicoで簡単なフェードイン／アウトなどの特殊効果をかけようとしていますが 上記タイトル通りのエラーが出て動きません。もちろん、Sizeも動きません(note.jpgはちゃんと表示されますが)。 以下がソースです: ### sample256.html ### <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <title>sample256</title> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/rico.js"></script> </head> <body> <form> <input type="button" onclick="new Rico.Effect.FadeTo('img1',0.1,1000,20);" value="消す"> <input type="button" onclick="new Rico.Effect.FadeTo('img1',1.0,1000,20);" value="表示"> <input type="button" onclick="new Rico.Effect.Size('img1',30,30,1000,20);" value="縮小"> <input type="button" onclick="new Rico.Effect.Size('img1',270,230,1000,20);" value="拡大"> </form> <p/> <img id="img1" src="images/note.jpg"/> </body> </html> …OSはWindows Vista (64-bit)で、ブラウザーはIE8です。 もちろん、Eclipseを介してTomcatは動いています。 Ricoは最新版でRico21.zipです。prototype.jsもそのzipの中のものを使いました。 展開したzipファイルのsrcにあったすべてのファイルを./scripts/の下にコピペしています (Google Chromeでソースファイルにあるリンクをクリックすれば、二つの.jsのソースコードが表示されるので、ちゃんと認識されていると思います)。 検索すると、ブラウザーのヴァージョンが問題のこともあるらしいですが、今回の場合はお互い最新のヴァージョンなので、それ以外に原因があるような気がしてなりません。 別の例で、prototype.jsを使って「文字の上にマウスをのせると別の文字が表示される」というのは成功しました。 ですから、Ricoのみが動いていないんだと思いますけど、確認の仕方が分かりません。 Ricoが動くようになる良い方法はありませんか？ 必要であれば補足します。どうか宜しくお願いします。
- futureworld
- お礼率91% (326/357)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので… Ricoって全然知らないけれど、 「Rico.Effect.FadeTo is null or not an object」ということは、呼出されて探しても見つからないということで、Effect.jsが読込まれていないのだと想像されます。 多分、その状態で alert(Rico)とかやってみればObjectを返すけれど、alert(Rico.Effect)だとundefinedなどになると思う。 検索してdemoページを見てみると、 http://dowdybrown.com/dbprod/rico2/examples/ ↑のAnimationのページ http://dowdybrown.com/dbprod/rico2/examples/client/effect_animation.html まず、必要なモジュールを読込まなければならないみたい。 Effectを使うのであれば、 Rico.loadModule('Effect'); みたいな感じ。 ＞確認の仕方が分かりません。 これを実行すれば、alert(Rico.Effect)、alert(Rico.Effect.FadeTo)などとしてもObjectが返ってくるので、必要なものが読込まれているらしいことが分かると思います。 文法が書いてあるところが見つからないけれど、Effectを見ると引数の数が違うようですね。 こんなサイトがみつかりましたけれど、解説がほとんどないので良く分からない。 http://dowdybrown.com/dbprod/ricodocs/javascript/ まぁ、少なくともFadeToは FadeTo(element, value) でelementは対象要素、valueはopcityの数値みたい。 ご提示のサンプルで、(↑)のdemoページの方法をそのまま真似して、 new Rico.Effect.Animator().play( new Rico.Effect.FadeTo($('img1'), 0), {steps:30, duration:1000}); みたいにすれば、一応、画像がフェードアウトしますけれど、これが正しい使い方なのかどうかは不明。 step、durationはアニメーションの時間と分割数らしく、数値を変えれば動作もそのように変わるみたい。 どこかに、ドキュメンテーションがあると思うのだけれど…
関連するQ&A
- javascriptで文字を移動後、プルダウン表示させたい。
(1)移動処理 http://www.openspc2.org/JavaScript/Ajax/Effect/Rico/002/index.html (2)上から内容を表示 http://www.openspc2.org/JavaScript/Ajax/Effect/script.aculo.us/004/index.html (1)→(2)の処理の順番動かそうと思い、javascriptを組んでみたのですが、動きません。 new Rico.Effect.Position("movilisez", 400,300, 100, 20);を コメントアウトすると、(2)の処理は動いてくれますが、 コメントを外すと動きません。 原因を教えていただけますでしょうか？ 環境は以下です。 OS:VISTAHomepremium ブラウザ:IE7 --------------------- function toPoint() { new Rico.Effect.Position("movilisez", 400,300, 100, 20); execEffect(); } function execEffect() { document.getElementById("contents").style.visibility = "visible" new Effect.BlindDown($("contents")); } --------------------- --------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="Style_Index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="scripts/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="scripts/rico.js"></script> <script type="text/javascript" src="scripts/BlindDown.js"></script> <title>TestPage</title> </head> <body> <div align="center"> <p></p><div id="Hedder" align="center"><table width="800px" cellspacing="0"> <tr> <td colspan="2" rowspan="2" align="left"><img src="" alt="" name="movilisez" width="200" height="80" id="movilisez" onclick="toPoint()" /></td> </tr> </table></div> <div id="contents"> <div id="menu" align="center"> メニュー </div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- AjaxでのHTML呼び出しでjavascriptが読み込まれません。
自分のホームページにprototype.jsを使用してボタンクリックでのHTML呼び出しをやっているのですが、<script>は無視されてしまいます。 ちなみにコードは、 <input type="button" value="GoogleNews" onclick="new Ajax.Updater('blk','page/sample1.html',{method: 'get'});"/> <input type="button" value="GoogleSearch" onclick="new Ajax.Updater('blk','page/sample2.html',{method: 'get'});"/> <input type="button" value="GoogleMaps" onclick="new Ajax.Updater('blk','page/sample3.html',{method: 'get'});"/> <div id="blk"></div> といったようなカタチです。もちろんprototypeは読み込んでいます。 呼び出すHTMLに<head>をつけてjavascriptだと定義してもダメでした。 ネットでも調べてみましたが、できないようなことがチラっとだけ書かれていました。 私がやりたいのは、ページを移動せずにボタン切替でGoogleSearchAPIやGoogleGadgetを表示させるというものです。 何かいい方法はないでしょうか？
- ベストアンサー
- JavaScript
- 親フレームの変数にアクセス(JavaScript）
[index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- <input> のbuttonで関数を実行したい
<input> 要素のbuttonを押すと※の処理が実行されるようにするには、どの部分を直すべきかご指摘いただけませんか。 よろしくお願いします。 -aaa.html <html> <!DOCTYPE> <body> <input id="ccc" type="button" value="スタート"> <script src="bbb.js"></script> </body> </html> -bbb.js document.getElementById("ccc").onclick = function buttonClick(){※}
- ベストアンサー
- JavaScript
- Prototypeを使っていて困ったことがあります。
Prototypeを使っていて困ったことがあります。 以下のようなソースでprototypeでtest.htmlを読み込みました。 そしたら困った事が2点出てきました。 (1)test.html内のjavascriptが動かない test.html内で使用しているprototypeやjquery等が全く動きません。 何か解決策はあるのでしょうか？ (2)test.htmlからtest1.htmlのdiv idに対して更新が行えない 読み込んだ先でも読み込み元のdiv idにファイルで更新が出来ると思い込んでおり これが出来ない為、かなり致命的な事になってしまいました。。 何とかできないでしょうか？ [test1.html] <html> <head> <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript"> function test() { new Ajax.Updater('title','test.html',{method: 'get'}); } </script> </head> <body> <div id="title"> ここにファイルを読み込む。 </div> <input type="button" value="操作" onclick="test()"/> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- 複数の.jsファイルって実行できますか？
初心者：Ajax勉強中です。 prototype Rico batefx を一つの画面で使用したいと思っています。 読み込み順はこんな感じになっています －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <script src="prototype.js" type="text/javascript"></script> <script src="rico.js" type="text/javascript"></script> <script src="bytefx_OS.js" type="text/javascript"></script> <script src="index.js" type="text/javascript"></script> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ index.jsは －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ function k(){ dndMgr.registerDraggable( new Rico.Draggable("sample","box") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox") ); dndMgr.registerDropZone( new Rico.Dropzone("dropbox1") ); } function start(){ bytefx.size(document.getElementById("txt_box"), {width:600, height:0}, 100); } function n(name,objW,objH){ bytefx.size(document.getElementById(name), {width:objW, height:objH}, 10); } －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 最初に表示される画面ではbatefxのリサイズ処理は正常に動作します。 その後のRicoによる、Draggable、Dropzoneを実行します。 そうすると最初に動作していたbatefxのリサイズ処理が動作しなくなってしまいます。 原因を調べていてもいまいちよくわかりません。 解かる方おりましたら、是非ご教授のほどをおねがいいたします。
- 締切済み
- JavaScript
- JavaScriptがFirefoxで動かない・・・
よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみると ボタンを押しても何の反応もありません。 どのように変更すればFirefoxで動作するのでしょうか？ よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- function warning(){ alert("テストです。"); } //--> </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・ 【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・ 改行の扱いは「HTMLタグのみ」に設定しています。 ご回答、よろしくお願いいたします。
- 締切済み
- JavaScript
- スロットが変な動きをします
JavaScriptで子供用にPCで遊べるようにスロットを作りました。 ここで疑問なのですが、最初にスタートとストップボタンを画像分だけ作りましたが、 スタートを同時にしてストップだけを個別にするためにスタートボタンを１個にしたら 変な動きになりました。 色々とやってみましたが以外に苦心しています。誰か宜しくお願いします。 スタートを３個にすれば簡単なことは十分わかってはいるのですが。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <html><head><title></title> <script type="text/javascript"> var picture = new Array(3); picture[1] = new Image(); picture[2] = new Image(); picture[3] = new Image(); picture[1].src = "img/data1.jpg"; picture[2].src = "img/data2.jpg"; picture[3].src = "img/data3.jpg"; function autoChange() { function autoChange1(); function autoChange2(); function autoChange3(); } function autoChange1() { var kaiten1 = Math.round(9*Math.random()); document.initial1.src = picture[kaiten1].src; timer1 = setTimeout("autoChange1()", 100); } function autoChange2() var kaiten2 = Math.round(9*Math.random()); document.initial2.src = picture[kaiten2].src; timer2 = setTimeout("autoChange2()", 100); } function autoChange3() { var kaiten3 = Math.round(9*Math.random()); document.initial3.src = picture[kaiten3].src; timer3 = setTimeout("autoChange3()", 100); } function stop1(){ clearTimeout(timer1); } function stop2() { clearTimeout(timer2); } function stop3() { clearTimeout(timer3); } </script> </head> <form> <input type="button" value="START" onclick="autoChange()"> <img src="img/data1.jpg" name="initial1"> <img src="img/data1.jpg" name="initial2"> <img src="img/data1.jpg" name="initial3"> <br><br> <input type="button" value="STOP" onclick="stop1()"> <input type="button" value="STOP" onclick="stop2()"> <input type="button" value="STOP" onclick="stop3()"> </form> </body></html>
- ベストアンサー
- JavaScript
- prototype.jp 動作しない
prototype.jsをダウンロードしてきて、 index.phpと同じディレクトリに置いています。 初めてなのでバージョン情報を表示させようと思っています。 下記設定で実行しても最初のアラートaaaaaまでしか表示されません。 $("xxxx").innerHTML = Prototype.Version;の部分をコメントアウトするとbbbbbまで表示されます。 環境----------------------------- CentOS５ PHP5 prototype.js 1.6 index.php----------------------------- <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function n(){ alert("aaaaa"); $("xxxx").innerHTML = Prototype.Version; alert("bbbbb"); } // --></script> </head> <body> <input type="button" value="Click" onClick="n()"> <div id="xxxx"></div> </body> </html> ------------------------------------------ 今日始めたばかりなので、なにがなんだかさっぱりわかりません。 よろしくお願いします。
- 締切済み
- JavaScript
- cgiへのパラメータについて
htmlのformで入力した名前をcgiで受け取ると"encstr"となります。 エンコードした文字列を受け取るにはどのようにすれば良いか教えてください。 <form name="js"> お名前：<input type="text" name="txtb" value=""><br> <input type="button" value="送信" onclick="gogo()"><br> </form> <script type="text/javascript" language="javascript"> <!-- function gogo() { var str1=document.js.txtb.value; var encstr = encodeURI(str1); document.write('<img src="/cgi-bin/gogo.cgi?namae=encstr">'); } // --> </script>
- ベストアンサー
- JavaScript
お礼
するどいです。 実は質問をした後にいろんな手を尽くしたのですが解決しなかったので 三年前くらいのRico.jsを読み込んでやっと解決しました。 最新版ではいけなかったようです。 三年前くらいに書かれた本だったので、もしやと思ったら正解でした。 プログラミングってこの辺がややこしいですね。 >alert(Rico.Effect)、alert(Rico.Effect.FadeTo) 勉強になります。 >new Rico.Effect.Animator().play( new Rico.Effect.FadeTo($('img1'), 0), {steps:30, duration:1000}); すみません、これはまだ試していません。 いろいろ試していただいて本当にありがとうございました！