SQLの窓

2010年01月28日


JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く

もともと、parentNode でやってた処理なのですが、Google Chrome だけが offsetParent でしか動かないのでテストしてみると、皆一様に offsetParent で動いたのでコードを整理しました

Window 用の DIV の位置は、BODY の直後が望ましいです。

<script type="text/javascript">
function setWin(target,x,y,w,h) {
	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName == 'BODY' ) {
			break;
		}
	}
	document.getElementById("win_base").style.top = (numY+y) + "px";
	document.getElementById("win_base").style.left = (numX+x) + "px";
	document.getElementById("win_base").style.width = w + "px";
	document.getElementById("win_base").style.height = h + "px";
	document.getElementById("win_base").style.display = "";
}
</script>
<div
	id="win_base"
	style='
		position: absolute;
		display: none;
		color: black;
		background-color: #E0E0E0;
		border-style: solid;
		border-color: #303030;
		border-width:1px;
		width:0px;
		height:0px;
		z-index:100;
	'>
	<input
		type="image"
		src="http://winofsql.jp/image/mcancel.png"
		style='float:right'
		onClick='this.parentNode.style.display = "none";'
	>
	<div id=win_box style='padding:2px;'></div>
</div>
<pre>

ウインドウを重ねて <input type="button" value="開く" onClick='setWin(this,50,-15,200,50)' style='width:200px;'>


</pre>

ウインドウを重ねて 



関連する記事

IFRAME ウインドウを非表示から開く時の位置調整



posted by lightbox at 2010-01-28 15:49 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり