function setCenter(t, o) {
var target=document.getElementById(t);
var img=document.getElementById(o);
var imageObj = new Image();
imageObj.src = img.src;
if (target) {
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;
var objHeight = imageObj.height || parseInt(imageObj.style.height) || imageObj.offsetHeight;
var objWidth = imageObj.width || parseInt(imageObj.style.width) || imageObj.offsetWidth;
var t = (document.documentElement.scrollTop + ((h-objHeight)/2));
var l = (document.documentElement.scrollLeft + ((w-objWidth)/2));
if( objWidth >= w) l = 0;
if( objHeight >= h) t = document.body.scrollTop;
target.style.cssText = "height:"+h+";overflow-y:auto;z-index:99999;position:absolute;top:"+t+"px;"+"left:"+l+"px";
}
자바스크립트로 사용자의 브라우져 크기를 계산하여 화면 정중앙에 정렬해주는 소스
innerHTML로 div안에 img를 넣어버리면 imageObj.width 계산시 0 이 나오는 경우가 있다.
두번 누르면 정상인데 꼭 첫번째는 0이 나오는.. IE6 IE7 에서 그렇게 동작한다. FF에서는 문제가 없는데 그래서 방안으로 생각 해낸 방법이 img를 다시 객체화 하면..? ㅋㅋ 된다 !!
지금의 경우 이미 로딩된 이미지를 사이즈를 줄여 보여주다가 클릭하면 원래 크기로 보여주는 과정에서 발생한 문제라서 클릭시 새로운( 로딩이 안된 ) 이미지를 innerHTML에 넣으면 위 문제는 발생하지 않을것 같다.
document.getElementById('enLargePic').onload=function(){setCenter(t, 'enLargePic')}
= 위 소스가 적용 되는 부분..
onload 이벤트는 감지 하면서.. complete이 true가 안되는것 왜 그런걸가... @_@.
근데 여기서 또 IE의 버그하나 img 객체의 complete 속성은 왜 false 나오는 걸까 ?! FF는 잘만나오는데 그리고 IE에서 readyState 속성은 width, height가 0이 나오든 정상이든 항상 complete이었다.
FF에서는 undefined .. 이 망할 웹 브라우져들... 통합시켜줘 ㅡㅜ
'web programming' 카테고리의 다른 글
테스트 템플릿 (0) | 2022.12.22 |
---|---|
[JSON] 테스트 데이터 (0) | 2022.12.22 |
Cross Browsing for IE & FF ( CSS ) (0) | 2009.04.21 |
IE 6.0 에서 input type="file" 의 경로가 submit시에 초기화 되는 버그.. (0) | 2009.03.28 |