objectの座標が取れない。JavaScriptを利用して、画面に仕込んだタグをポップアップのように呼び出したいと思っています。
- 画面に仕込んだタグをポップアップのように呼び出したい際、objectの座標が取れないという問題が発生しています。
- JavaScriptを利用して、画面中央にテストタグを表示するために、座標の取得を試みています。
- しかし、使用しているgetLocation関数がうまく座標を取得できず、困っています。
- ベストアンサー
objectの座標が取れない。
JavaScriptを利用して、画面に仕込んだタグをポップアップのように 呼び出したいと思っています。 以下、概略ですが <div id ="test1" style="display:none;">テスト</div> <a href="javascript:balOpen(this,number)">呼び出し</a> 以下js function balOpen(obj,number) { document.getElementById('test' + number).style.display = 'block'; var positionX; var positionY; positionX = getLocation(obj, 'X'); positionY = getLocation(obj, 'Y'); } 画面をスクロールした際でも、画面中央に出したいので、座標を見て tes1のleftとtopを調整したいと思っています。 しかし、上記のような書き方をしても、X、Yの座標が取れず困っています。 何か良いやり方があれば教えていただけないでしょうか。 宜しくお願いします。
- ginfix
- お礼率34% (330/962)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞やりたいのは、常にブラウザの中央に出す、です。 でしたら、#1の最後に書きましたが、スクロールの量とブラウザ画面のサイズ、及び対象要素のサイズから位置を計算することになるでしょう。 個々の値の取得についてはこのあたりをご参考に。 http://archiva.jp/web/javascript/get_page-size.html ブラウザ間の差異を吸収するのが面倒な時は、jQueryなどのライブラリを利用するという方法もあります。 いずれにしろ、検索すればいろいろ情報が見つかることと思います。 ちゃんと動くか確認していませんが、ご参考までに。（ちょっと怪しいかも） http://www.mwsoft.jp/programming/javascript/center_dialogue.html http://d.hatena.ne.jp/d4-1977/20080303/1204537035
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
省略されているところがわからないので、なんともいえませんが… 呼び出し元が balOpen(this,number) となっていますが、numberの内容（値）はいつ定義されているのだろうか？ getLocation()関数の内容はどのように定義されているのだろうか？ よくわかっていませんが… ＞X、Yの座標が取れず困っています 要素のleft、topがCSSで指定されていて、その値を取得したいのであればこのあたり（↓）を、 http://kurusugawa.jp/2008/03/03/javascript%e3%81%a7css%e3%81%ae%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e5%80%a4%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ http://blog.37to.net/2009/04/javascriptcss_from_k/ 要素のドキュメント内の位置（座標）を取得したいのであれば、このあたり（↓）を、 http://n-yagi.0r2.net/script/2009/06/post_12.html http://hkom.blog1.fc2.com/blog-entry-220.html ヒントにして検索してゆけば、なさりたいことの解説に行き着くのではないかと思います。 ＞画面中央に出したいので というところから想像すると、座標ではなく、スクロールの量とウィンドウのサイズを取得したいのかも…？ その場合は、そのあたりをキーにぐぐってみてください。
関連するQ&A
- オブジェクトの座標位置の取得
お世話になります。 苦労されている方が多いの検索をすると多くかかりますが、やはりわかりません。 それで、質問させてもらいました。 何とかよろしくお願いいたします。 <body> あああああああああああ <div id="2"> いいいいいいいいいい <div id="3"> ううううううううううううう </div> いいいいいいいい </div> </body> の様な場合、内側の<div>のy座標、x座標の絶対座標－<body>からの座標 を取得することがどうもできません。 Div3Obj=document.getElementById('3'); alert('Div3Obj.offsetTop='+Div3Obj.offsetTop); とすると、id='2'の<div>からの相対位置を取得してしまいます。 <body>からの位置を取得できないものでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptでオブジェクトのメソッドを使う
JavaScriptでnewでオブジェクト化したクラス（?）のメソッド、フィールドを利用する方法を教えて下さい。 javascriptにもオブジェクト化という考え方があると聞いたのですが、 例えば、Javaでいうsetter getterのようなメソッドを作り、使用することはできるのでしょうか？ 下記のようなコードを実行したところ Uncaught TypeError: Object #<mousePosi> has no method 'setPara' というエラーが出てしまい、setParaというメソッドはない。と言われてしまいます。 しかし、mousePosi()をオブジェクト化することはできているようなので、 setParaとgetParaを使えるのではないかとおもいました。 どなたかアドバイス下さい。お願いします。 ------------------------------------------------------------------------------------------------- (function LineMain() { console.log("マウスの位置座標を表示"); // console.log("X座標=" + mymouse.x + ",Y座標=" + mymouse.y); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var event = event; var myMousePosi = new mousePosi(); myMousePosi.setPara(event); // console.log("X座標=" + obj.getMouse().x + ",Y座標=" + obj.getMouse().y); } function mousePosi() { var paraMouse = { x : 0, y : 0 }; function setPara(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } function getPara() { return this.paraMouse; } } })();
- ベストアンサー
- JavaScript
- attachMovieしたmovieClipを動かすには？
attachMovieで作ったmovieClipを動かすためには、どうすればよいのでしょうか？ 下にあるスクリプトは変数var objに代入していますが、このobjを動かすための var obj=attachMovie("chugoku","ball1","0"); obj._x = 200; obj._y = 150; onClipEvent(load){ var div:Number = 0.3; var move_to:Number = 200; } onClipEvent(enterFrame){ move_to = 500; obj._x += (move_to-obj._x)*div; } loadとenterFrameはどのように記述すれば動かせるのでしょうか？
- ベストアンサー
- Flash
- 複製したMCを指定した座標へ配置したいのですが
こんにちは。 初歩的な質問で申し訳ないのですがよろしくお願いします。 attachMoiveでライブラリ内のMCを数十個複製しそれらをステージ内に 配置する際、4x4、6x6といったように均等に数十個配置する事は 出来るのですが均等に配置するのではなく自分の指定した座標に １つ１つ配置したいのです。 色々調べましたら、自分の配置したい各場所の各座標(x,y)を 配列を使い変数にするのだと思い、自分なりに作ってみましたところ １つは指定した座標に配置出来たのですが2つ目以降が上手く 配置出来ません。 var i; var num=50; //複製するmcの数 var pos = {x:50, y:100}; //1つ目の指定座標。 //ここで残り49個のmcの座標も指定。 for (i=0; i<num; i++) { _root.attachMovie("mc", "mc"+i, i); var mc_obj = eval("_root.mc"+i); mc_obj._x = pos._x; mc_obj._y = pos._y; } 一応頭の中ではこういうスクリプトを考えてますが多分間違いが あり何かが足りないのだと思います。 var posのところで2つ目以降の座標の指定の仕方と forの中でmc_obj._xとmc_obj._yにどのように50個分指定した 座標へ配置設定をしてやるのかお分かりくださる方がいらっしゃれば ご教授くださいますようよろしくお願いします。
- ベストアンサー
- Flash
- ページ内オブジェクトを左上から順に並び替える
座標の並べ替えの計算について質問させて頂きます。 javascriptで、以下のような座標（左上基点）のリストを、左上から右下の順に並べ替えるためにはどのような関数を作成すれば良いか分からずにこまっています。 var list = [ { id : 0, x :138.313077609396, y :183.402580877775 }, { id : 1, x :15.0606060605741, y :138.374 }, { id : 2, x :15.0606060605741, y :228.41 }, { id : 3, x :138.312606060574, y :228.41 }, { id : 4, x :76.6868418349849, y :228.41 }, { id : 5, x :76.6868418349849, y :183.392 }, { id : 6, x :15.0860776093956, y :183.367 }, { id : 7, x :138.312606060574, y :138.374 }, { id : 8, x :76.6868418349849, y :138.374 }, { id : 9, x :15.0303030302711, y :15.030303030303 }, { id : 10, x :138.373999999968, y :53.2886884952961 } ]; □1□ | □2□ | □3□ | □4□ □5□ | □6□ | □7□ | □8□ □9□ | □10□ | □11□ | □12□ … といった順に並べ替えたいのです。 詳しい方、いらっしゃいましたら、ご教示のほど、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jsで次のELEMENT_NODEを見つけたい
しごく単純な質問かもしれませんが、検索エンジン等で捜しても見つからなかったのでご教授頂けないでしょうか？（検索の仕方が悪いかもしれません。。。） たとえば以下の簡単なjavascriptがあるとします。 <body> <div id="test1">hogehogehoge</div> <div>fugafugafuga</div> <script type="text/javascript"> var obj = document.getElementById('test1'); console.log(obj.nextSibling); </script> </body> この場合、nextSiblingで取得した値は次のテキストノードになってしまいます。 決めうちであれば以下のようにやってみたらうまくいきましたが、 なんだかなぁ～って感じです。 <script type="text/javascript"> var obj = document.getElementById('test1'); console.log(obj.nextSibling.nextSibling); </script> jQueryで言うところのsiblings()のような使い方、またはソースをご教授いただけないでしょうか？（できれば説明文も添えて頂ければ助かります） 一応jQueryのソースを読もうとしましたが、まことに恥ずかしいのですが力不足でまるで読むことができませんでした。 以上よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascript初心者です。javascriptでクラスのようなものを扱えると知り、いろいろ調べながら取り組んでいます。 html <div id="a"></div> css #a{ width:100px; height:100px; background-color:#0F0; } javascriptでクラスを作って function Character(x,y){ this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 100; this.y += 100; this.ele.style.left = this.x; this.ele.style.top = this.y; } } var cha = new Character(10,10); cha.move(); としたら、緑の正方形が座標(100,100)あるのかと思っていたのですが、うまくいきませんでした。 javascriptのクラスとhtmlの要素を紐づけるにはどうしたらいいのでしょうか？教えてください。
- ベストアンサー
- JavaScript
- IE6.0でのオブジェクト座標の動的取得
ホームページを作る際にJavaScriptでIE6.0でオブジェクトの座標を取得したいと思っています。以下のようにしてstyleでtop、leftを指定していない場合でも座標取得は可能でしょうか。センタリングを有効にしたいので、スタイル指定が出来ないのですが…。 例）以下のIMGタグの座標を取得したい <CENTER> <A href="www.aaa.com" onMouseOver="zahyou()"> <IMG src="aaa.gif" id="IMG1"> </A> </CENTER>
- ベストアンサー
- JavaScript
- CSSのID名に配列を使えませんか？
以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>
- ベストアンサー
- JavaScript
- Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
補足
getLocationはユーザ定義の関数だったみたいです。 標準のものと勘違いしておりました。 numberは、実際にはASPのループ内で呼び出されて おり、その時に番号が入ります。 実際にはtest1、test2…と、ループの数ぶん出来る予定です。 やりたいのは、常にブラウザの中央に出す、です。 画面中央に出すサンプルは見つかるのですが…。