javascriptで文字を移動後、プルダウン表示させたい
- javascriptを使用して、文字を移動させた後にプルダウン表示させたいです
- 現在、移動させた後にプルダウン表示させる処理が動作しない状況です
- 原因を特定して修正する方法を教えていただけませんか
- ベストアンサー
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>
- mabuo
- お礼率38% (12/31)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No2です とりあえず、似たものを作ってみました。 prototypeなどを利用すれば簡単だと思いますが、中身を良く知らないのでライブラリは利用していません。（その代わりといってはなんですが、クロスブラウザの検証はあまりおこなっていません） ご参考まで。 <html> <head> <style type="text/css"> #movilisez { position:absolute; overflow:hidden; border:0; } </style> <script type="text/javascript"> var e,p,q,x,y,mstp,h,bstp,bs; function test() { var id='movilisez'; //対象オブジェクトのid x=400; //移動後のleft値 y=300; //移動後のtop値 mstp=20; //移動ステップ数（整数：大きいほど滑かだが遅い） ms=15; //移動の速度（整数：小さいほど速い） bstp=20; //ブラインドステップ数（整数：大きいほど滑かで遅い） bs=20; //ブラインドの速度（整数：小さいほど速い） if (!e) { p=0; q=0; e=document.getElementById(id); while(e){p+=e.offsetLeft; q+=e.offsetTop; e=e.offsetParent;} e=document.getElementById(id); h=e.offsetHeight; Mtime = setTimeout("move()", ms); };} function move(){ if (mstp>0) { p +=(x-p)/mstp; q +=(y-q)/mstp--; e.style.left=Math.round(p); e.style.top=Math.round(q); Mtime = setTimeout("move()", ms); } else { clearTimeout(Mtime); p=bstp; Btime = setTimeout("blind()", bs); };} function blind(){ if (bstp>0) { e.style.height=Math.round((1-bstp/p)*h); bstp--; Btime = setTimeout("blind()", bs); } else { clearTimeout(Btime); e.style.height=h; };} </script> </head> <body> 下の画像をクリックすると移動 + ブラインド <p> <div id="movilisez" onclick="test()"> <img src="A.jpg"> </div> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 まずは、（1）でご提示のサイトのサンプル（Web上のものは動作しますよね？）そのままを、コピーしてHTMLを作成し実行してみてください。（多分、動作すると思います） 次に、ご提示のHTMLで、 <script type="text/javascript" src="scripts/BlindDown.js"></script> を除き、さらに、スクリプトの toPoint()内のexecEffect();をコメントアウトして実行してみてください。 （これで移動しない場合は、設置の仕方がどこかおかしいです。） 上記で問題なく動作する場合は、BlindDown.jsとrico.jsがバッティングしている可能性が高いです。 はずすには、スクリプトの中身をみて（もちろん理解して）修正しないとなりません。 とりあえずありそうなのは、onload時の設定がダブっていたり、あるいは初期設定の内容を控える変数がバッティングしていたり… かな？ でも、解析しているよりも、どちらか片方の機能をprototypeを利用して自作してしまうほうがはるかに簡単かも。（使用内容が決まっていれば、一般化して作成する必要がないので、比較的簡単。）
- fujillin
- ベストアンサー率61% (1594/2576)
そもそもtableの中の要素を移動する意味がわかりませんが… それは置いといて。 ご質問文にないので不明ですが、移動対象をposition:absoluteにしてないだけでは？
補足
fujillinさま： 回答ありがとうございます。 今回この移動の機能ははじめて使うものでしたので、 実際動くかどうかを見てから、やりたいことに移ろうと思ったのです。 通常はこういう使い方をしてはいけないのですね。 肝に銘じておきます。 本題ですが、今回の移動対象のmovilisezにposition:absolute; 設定してみましたが、動いてくれませんでした。 ほかに方法などはご存知でしょうか？
関連するQ&A
- 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が動くようになる良い方法はありませんか？ 必要であれば補足します。どうか宜しくお願いします。
- ベストアンサー
- JavaScript
- このHTMLの意味はなんでしょうか？
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.queryloader2.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.scrollorama.js"></script> <script type="text/javascript" src="scripts/jquery.scrolldeck.js"></script> <script type="text/javascript" src="scripts/jquery-contained-sticky-scroll.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="scripts/parallax01.js"></script> <script type="text/javascript" src="scripts/yazirusi01.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script> <script type="text/javascript" src="scripts/jquery.easie.js"></script> <script type="text/javascript" src="scripts/jquery.smoothScroll.js"></script> <script type="text/javascript" src="scripts/php_date.js"></script> <script type="text/javascript" src="scripts/script.js"></script> とあるサイトのソースの一部に、このような文章が書かれていました。 一体これはどういう意味なんでしょうか？ どなたか解説お願いします
- ベストアンサー
- HTML
- [javascript] Dexagogoが動きません・・・。
こんにちわ。 このたび、下記URLにあるjavascriptを作動させようと悪戦苦闘しております・・・。 Really easy field validation * Dexagogo http://tetlaw.id.au/view/javascript/really-easy-field-validation 入力確認を行なうスクリプトで具体的には以下のURLのような動作を致します。 http://tetlaw.id.au/upload/dev/validation/ が、しかし全く動いてくれません・・・。 原因特定のため、無駄なタグをどんどん削っていきましたが、依然動作せず・・。 参考までにソースを添付致します。 <html><title>入力チェック</title> <head> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/effects.js" type="text/javascript"></script> <script type="text/javascript" src="fabtabulous.js"></script> <script type="text/javascript" src="validation.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="#" method="get" id="test"> <br> <label for="field1">Name</label>:<input name="field1" id="field1" class="required" title="Enter your name" /> <br> <input type="submit"> </form> </body> </html> ご存知の方、お助けいただけると幸いです。
- 締切済み
- JavaScript
- Flashの表示について
FlashをSWFオブジェクトで表示しています。 回線が遅い場合、Flashが読み込まれる前に一瞬、Flashの表示領域の高さ(CSS)が反映されていない?のか、Flashの下に表示すべき領域がFlashの部分に表示されレイアウトが崩れます。 下記にFlashを表示させる部分に関係のあるHTMLとCSSを記載いたします。 ---------- HTML ---------- ・・・・・・・・・・・・・ <head> <script type='text/javascript' src='js/jquery-1.2.6.min.js'></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ <div id="top">・・・・・</div> <div id="flash"></div> <script type="text/javascript"> var flashvars = null; var params = { bgcolor: "#●●●"}; swfobject.embedSWF("movie.swf", "movie", "840", "250", "9.0.0","expressInstall.swf", flashvars, params); </script> <div id="buttom">・・・・</div> ---------- CSS ---------- #flash { width: 840px; height: 250px; } CSSの250pxが効いていないのかFlash領域の高さがない状態で、上のコンテンツ(div id="top">・・・・</div>)のすぐ下にコンテンツ(<div id="buttom">・・・・</div>)が表示されてしまいます。 解決策に関してどのようなことでも良いので教えてください。 よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- 複数のjavascriptが作動しない
http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか？ ご教授お願いいたします！
- ベストアンサー
- JavaScript
- 【javascript】２つ同時に上手く動かない
javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptファイルは１つに統合できますか
javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 ＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？ （単純に1箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。
- ベストアンサー
- 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
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- Camera slideshowの使い方について
jQueryプラグイン"Camera slideshow"を試しに使ってみたのですが、まったく動きません。 どこが間違っているのか見当もつかなく困っています。 【head内】 <head> <!--省略--> <link rel="stylesheet" id="camera-css" href="/camera.css" type="text/css" media="all"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile.customized.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/camera.js"></script> <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery(function(){ jQuery('#camera').camera(); }); }); </script> </head> 【HTML部】 <div class="camera_wrap camera_blue_skin" id="camera"> <div data-src="../images/slides/bridge.jpg"></div> <div data-src="../images/slides/leaf.jpg"></div> <div data-src="../images/slides/road.jpg"></div> </div> この情報だけで質問をするのが失礼だったらすいません。 初心者なもので誠に申し訳ございませんが、改善方法をどなたかご教授いただければ大変助かります。 よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
補足
返事遅れてすみません！ 回答ありがとうございます。 確かにサンプルから動作させたほうがいいですよね！ ちょっとコピーしてやってみたんですけど、動きませんでした。 CSSの設定が出来ていないんですかね？ まだまだ勉強が足りないようです。