オブジェクトがありませんとエラーが出る！IEで動きません
- オブジェクトがありませんとエラーが出てしまいます。
- operaやNetscapeは動くようなのですがIEは動きません。
- document.getElementById(target).style.top = y-offx+'px';の部分でエラーがでるようなのですが。出さないためにどうすれば良いかが、分かりません。
- ベストアンサー
オブジェクトがありません
オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。 出さないためにどうすれば良いかが、分かりません。 よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- if(window.addEventListener)window.addEventListener("load",loadScript,false); if(window.attachEvent)window.attachEvent("onload",loadScript); //関数ロード function loadScript(){ ///ドラッグ用ロード flag=false; Menu=new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ XMenu=window.document.getElementById(Menu[i]) if(XMenu.addEventListener)XMenu.addEventListener("mousedown",dragOn,false); if(XMenu.attachEvent)XMenu.attachEvent("onmousedown",dragOn); } } //ドラッグ関数 function dragOn(){ flag=true; target=this.id; ///移動 if(window.document.addEventListener)window.document.addEventListener("mousemove",dragMove,false); if(window.document.attachEvent)window.document.attachEvent("onmousemove",dragMove); ///終了 if(window.document.addEventListener)window.document.addEventListener("mouseup",dragOff,false); if(window.document.attachEvent)window.document.attachEvent("onmouseup",dragOff); } function dragMove(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx+"px"; document.getElementById(target).style.left = x-offy+"px"; return false; } function dragOff(){flag=false;} // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ふと気づいたので。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- function addMyEvent(obj,type,func){ if(window.addEventListener){ obj.addEventListener(type, func, false) } else{ if(window.attachEvent) obj.attachEvent("on"+type, func) } } addMyEvent(window,'load',function(){ var T = null, oW, oH; addMyEvent(document,'mousedown',function(e){ if((o = e.target || e.srcElement).className == 'move') T=o; oW = o.offsetWidth/2; oH = o.offsetHeight/2; }); addMyEvent(document,'mouseup', function(){ T = null }); addMyEvent(document,'mousemove',function(e){ if(!T) return; T.style.top = pos('scrollTop', e.clientY, oH), T.style.left = pos('scrollLeft', e.clientX, oW); }); function pos(a,b,c){ return b - c + (document.body[a] || document.documentElement[a]) +"px" } }); // --></script></head> <body> <div id="menu1" class="move" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" class="move" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" class="move" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html> #4で書いた事と、可動メニューにクラス名をつけてマウスダウン監視をdocumnetに変更。 クラス名チェックで一致したら起動。 これでfor文が消せたので見方によってはすこしすっきりですかね？
その他の回答 (4)
- arexis
- ベストアンサー率66% (66/99)
いえいえ、いつも何か抜けてるので恥ずかしい限りです^^; 私が普段書く感じだと#3でもう最終です。 1年経ってすっかり忘れてから見直しても楽に流れを追える程度で止めていますから。 これ以上無理も含めてやるとしたら、 ■変数X,Yは整理用の不要な変数ですから target.style.top = e.clientY - oH + (document.body.scrollTop || document.documentElement.scrollTop) + "px"; としてしまう。 ■配列がソート処理や順番が関係ないケースなので for文は for(var i in Menu) でもOKです。 ■関数名などを簡略化して文字数を減らす エディタなどを使ってるならaddMyEventの様に意味まで含めた長い名前にしなくても追いやすいですからね。 他にスクリプトやライブラリがあるならグローバル変数・関数は短い名前だと干渉する確率が高くなるので逆に良くないですけど。 documentと言うのも良く出てくるので、ローカルでvar D = documentにして短くしちゃう事もあります。 ■document.body.scrollTop || document.documentElement.scrollTop のどちらか理解できる方と言う記述 DOCTYPEをつけない(必ずつけるべき といわれていますけどｗ)とか、特定のブラウザ専用なら どちらか片方だけにできるかもしれないので、テストして可能ならそうします。 DOCTYPEがない場合は document.body.scrollTop だけでIE、Firefox、Netscape、Safari、Operaでもきちんと動きます。 DOCTYPEをつけると「NetscapeやSafari」と「IEやFirefox」とで方法が分かれてくるので変更はしない方が良いと思います。Operaは両方理解できます。 また長い記述が気持ち悪い場合は、好みによって addMyEvent(document,'mousemove',function(e){ if(!target) return; var t=target.style; t.top = pos('scrollTop', e.clientY, oH); t.left = pos('scrollLeft', e.clientX, oW); }); function pos(a,b,c){ return b - c + (document.body[a] || document.documentElement[a]) +"px" } とかですかね。 ただ、これらは処理が短くなるとか速くなるとかではなく記述上の好み？みたいなレベルだと思います。これらをやる事で何か得した気分になる時くらいしかやらないです。^^; 最後のposの様に関数化すると返って処理が遅くなる(といっても人が感じるレベルではない)場合があるので、 mousemoveのような連続して処理が発生し続ける場合は関数化しない事も１つの選択方法です。 他の人なら、もっとこうすれば簡単になるってのをすぐ見つけられるかもしれないですよ。 その時々で脳が一方向だけ向いてしまうので時間が経つと「この処理無駄だな」とか出てくる時もありますし。 と、こんな感じです^^;
- arexis
- ベストアンサー率66% (66/99)
<html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- /* add event 共用関数 */ function addMyEvent(obj,type,func){ if(window.addEventListener){ obj.addEventListener(type, func, false) } else{ if(window.attachEvent) obj.attachEvent("on"+type, func) } } /* windowにonloadイベントをaddして、関数は全部その中に */ addMyEvent(window,'load',function(){ var target = null; //操作対象の有無をフラグ代わり var oW, oH; //可動メニューの幅と高さを入れる変数 var Menu = ["menu1","menu2","menu3"]; //new Array(A,B,C)と同じ※空要素は禁止 for(var i=0; i<Menu.length; i++){ var XMenu = document.getElementById(Menu[i]); addMyEvent(XMenu,'mousedown',function(o){ return function(){ target=o; oW = o.offsetWidth/2; oH = o.offsetHeight/2; }}(XMenu)); } addMyEvent(document,'mouseup', function(){ target = null }); addMyEvent(document,'mousemove',function(e){ if(!target) return; var Y = e.clientY - oH + (document.body.scrollTop || document.documentElement.scrollTop); var X = e.clientX - oW + (document.body.scrollLeft || document.documentElement.scrollLeft); target.style.top = Y + "px"; target.style.left = X + "px"; }); }); // --></script></head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html> スクロールがある場合の処理も入れておかねばいけなかったですね。 ある程度まとめても理解しづらくない？と思うのでまた少し丸めました。 インデントつけないと見辛いかも^^;
お礼
何回も書き込んでくださり、ありがとうございました。 段階的に書いてくださったおかげで違いがわかりやすかったです。 みごとに動きました。 おかげさまで解決しました。 質問外の質問になるかもしれないのですが、 「ある程度まとめても理解しづらくない」 「もう少し丸め込む事できますが」 とありますが、これ以上まとめることなどできるものなのでしょうか。
- arexis
- ベストアンサー率66% (66/99)
さっそく訂正^^; マウスアップ、マウスムーブのイベント付加はオンロード関数の中に入れるべきですね。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- /* 何度も使うので関数化 */ function addMyEvent(obj,type,func){ if(window.addEventListener){ obj.addEventListener(type, func, false) } else{ if(window.attachEvent) obj.attachEvent("on"+type, func); } } /* windowにonloadイベント付加 */ addMyEvent(window,'load',loadScript); /* 呼ばれる関数 */ function loadScript(){ flag=false; var Menu = new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ var XMenu = document.getElementById(Menu[i]); /* 各menuにマウスダウンイベント付加と、thisにあたるオブジェクト渡し */ addMyEvent(XMenu,'mousedown',function(o){ return function(){ dragOn(o) } }(XMenu) ); } /* マウスアップ、マウスムーブは 何度もイベントを作るのは変なので dragOn関数にいれずにドキュメントへのイベント付加を1度だけ実行 */ addMyEvent(document,'mouseup',function(){ flag=false; }); addMyEvent(document,'mousemove',dragMove); } //ドラッグ関数 function dragOn(el){ flag=true; target=el; } function dragMove(evt){ if (!flag) return; x = evt.clientX - 60; y = evt.clientY -75; target.style.top = y+"px"; target.style.left = x +"px"; } // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>
- arexis
- ベストアンサー率66% (66/99)
前にサンプルで貰った物からイベントの付加をメソッドを使った方法に変えたようですね。 メソッドを使う方法にすると、呼ばれた関数内のでのthis の意味がIEの場合は変ってしまうのでオブジェクト不明になってるんだと思います。 ちょっと重複する指示などもあったので、もう少しスクリプトを丸めておきました。 もう少し丸め込む事できますが、この状態なら理解もしやすいかと。 (ミスもあるかもしれません) <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- /* 何度も使うので関数化 */ function addMyEvent(obj,type,func){ if(window.addEventListener){ obj.addEventListener(type, func, false) } else{ if(window.attachEvent) obj.attachEvent("on"+type, func); } } /* windowにonloadイベント付加 */ addMyEvent(window,'load',loadScript); /* 呼ばれる関数 */ function loadScript(){ flag=false; var Menu = new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ var XMenu = document.getElementById(Menu[i]); /* 各menuにマウスダウンイベント付加と、thisにあたるオブジェクト渡し */ addMyEvent(XMenu,'mousedown',function(o){ return function(){ dragOn(o) } }(XMenu) ); } } /* マウスアップ、マウスムーブは 何度もイベントを作るのは変なので dragOn関数にいれずにドキュメントへのイベント付加を1度だけ実行 */ addMyEvent(document,'mouseup',function(){ flag=false; }); addMyEvent(document,'mousemove',dragMove); //ドラッグ関数 function dragOn(el){ flag=true; target=el; } function dragMove(evt){ if (!flag) return; x = evt.clientX - 60; y = evt.clientY -75; target.style.top = y+"px"; target.style.left = x +"px"; } // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html> これで希望通り動きますか？
関連するQ&A
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- Firefoxで表示できないのは何故でしょう？
お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜） 何か見落としがあるのでしょうか？ <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・
- ベストアンサー
- JavaScript
- input要素の入力制限について
<div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500" />px</label></li> <li><label>横<input type="text" name="width" value="500" />px</label></li> </ul> </form> このような入力欄で、0～9以外の文字が入力された場合と、801以上の数字が入力された場合に、入力欄の後ろに「800以下の数字を入力してください」という文表示させ、800以下の数値が入力されたらこの文を消すようにしたいです。 function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("f1").height.onblur = function(){ if(this.value.match(/[^0-9]+/)||this.value>800){ $("elementSize").getElementsByTagName("li")[0].appendChild(heightStr); }else{ if($("elementSize").getElementsByTagName("li")[0].lastChild==heightStr){ $("elementSize").getElementsByTagName("li")[0].removeChild(heightStr); } $("pict").style.height = this.value + "px"; } } } if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }} if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); } 今、上記のようなJavaScriptを書いて、実装は出来ているのですが、 もっとコードを短く出来ないかと思い質問させていただきました。 よろしくお願いします。
- ベストアンサー
- JavaScript
- クリックしたリンクの色を保持して、<object>にそのリンクを表示させる
下記のプログラムは、クリックしたリンクの色を保持して、<object>にそのリンクを表示させるようになっています。 プログラムの流れは、 （１）test1のリンクをクリックする （２）test1の背景を黄色/文字を太文字に変更 （３）<div id="objarea">にtest1のリンクを表示 （４）次のリンク（test2）がクリックされるまで（２）を保持。クリックされたらtest2のリンクの背景を黄色/文字を太文字に変更。 （５）（１）～（４）の繰り返し。 をすると言う、感じです。ですが、「（３）の<div id="objarea">にtest1のリンクを表示」と言う動作ができなく、リンクの色の保持しか動作しません。 どこがいけないのか分からなくて困っています。どうぞよろしくお願いします。 [サンプルプログラム] <style type="text/css"> <!-- .object { width: 400px; height: 400px; border: 1px solid #000000; } #menu a{ color:#0000ff; text-decoration:none; } #menu .hoge{ color:#ff0000; background-Color:#ffff00; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- function changeObj(url){ document.getElementById('objarea').innerHTML = '<object data="' + url + '" type="text/html"><\/object>'; } //--> </script> <script type="text/javascript"> <!-- window.onload=function(){ setColor(); } function setColor(){ var menu=document.getElementById("menu"); var tags=menu.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var pp=this.parentNode.parentNode; var tags=pp.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].className=""; } this.className="hoge"; } } } if (window.attachEvent){ window.attachEvent('onclick', setColor); window.attachEvent('onclick', changeObj); } else { window.addEventListener('onclick', setColor, false); window.addEventListener('onclick', changeObj, false); } //--> </script> </head> <body> <div id="objarea"> <object data="http://yahoo.co.jp" type="text/html"></object> </div> <ul id="menu"> <li><a href="#" onclick="changeObj('http://yahoo.co.jp'); return false;">test1</a></li> <li><a href="#" onclick="changeObj('http://www.google.co.jp/'); return false;">test2</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- アドバイスお願いします
今 ビルダー１１で １．メインメニューをワンクリックでサブメニューが表示／非表示に切り替り ２．メインメニューをクリックすると他のサブメニューが自動的に閉じる この機能を製作していますが、なかなか上手く出来ません アドバイスお願いします JavaScriptソースは、まったくのシロートでがお願いします <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ background-color : olive; width : 100px; } .sub{ display : none } --> </style> HTMLソース <div>Menu_Ａ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul> <div>Menu_Ｂ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul> <div>Menu_Ｃ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul>
- 締切済み
- JavaScript
- オブジェクトがぶつかった時の処理
<script type="text/javascript"> <!-- var imgStar ,imgMoon, timer; var dx = 6, dy = 4, x = 40, y = 160; function startMove(){ if (document.getElementById){ imgStar = document.getElementById("star"); imgMoon = document.getElementById("moon"); timer = setInterval("moveImg()",50); } } function moveImg(){ imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; imgMoon.style.left = (440-x) + "px"; imgMoon.style.top = (320-y) + "px"; x = x + dx; y = y + dy; if (x<=40 || x >= 400) dx = -dx; if (y<=40 || y >= 280) dy = -dy; } function stopTimer() { if (window.clearInterval) clearInterval(timer); } //--> </script> 星と月がぶつかると、お互い逆方向にはね返るようにしたいのですが、この場合どうすれば良いでしょうか？
- 締切済み
- JavaScript
- BOXがロールオーバーで開閉するインターフェース
よろしくお願いします。 javascript初心者です。 今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて 本を買って勉強しているのですがうまく動作しません。。 HTMLは ーーーーーーーーーーーーーーーーーーーーーーーーー <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type"content="text/css"/> <meta http-equiv="Content-Script-Type"content="text/javascript"/> <title>テスト</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
お礼
御丁寧にありがとうございました。 とてつもなく勉強になりました。 質問外の質問にも解説付きで書いていただき、 勉強になります。 すごいです。目からウロコです。 質問して良かったです。 回答していただけたことに、 感謝致します。 ありがとうございました。