プログラムメモ

JavaScript

トップに戻る

新規投稿
JavaScriptプログラムに関する各種メモ書き：タグ「YUI」での検索

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。 

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

htmlページ内のdiv のX,Y座標位置を取得する

■ ライブラリ bytefx を使用する

http://www.devpro.it/bytefx/

<script type="text/javascript" src="../js/lib/bytefx.js"></script>
objX = bytefx.$position(document.getElementById('ID名')).x;
objY = bytefx.$position(document.getElementById('ID名')).y;

で取得できます。便利。

■ prototype.js を使う。

1.6系
var offset = $('elementID').positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

1.5系
var off set = Position.positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

■ yui（Yahoo! User Interface Library）を使用する方法はこちら

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter81/013/index.html

yui を使うとかなり簡単に座標位置を取得できます。

<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>

でyuiライブラリを読み込んでおいて

position = YAHOO.util.Dom.getXY("myBox");
alert( position );

で取得できます。

ただし Windows版IE は top,left 共に2pxずつ多めに取得されてしまいますので、

ブラウザ判別をして 2px 引いてあげる必要があります。

また座標位置が正確に取得できないことも多々ありますので注意

参考：ghostbass1.4β - 要素の位置を取得する(正解？)


No.424
03/16 14:04

edit

prototype.js
YUI