겉보기 문제 : ie7에서 마우스를 따라 움직이는 툴팁(with javascript)을 작성했으나 scroll 했을 경우 바르게 표시되지 않음.
웹 문서를 아래로 스크롤 했을 경우, 툴팁은 출력은 되나 보이지 않는다. 툴팁이 출력 되는 곳은 스크롤 하기 전 화면이다.
기존 코드
mozilla firefox + firebug way:
document.body.scrollLeft, document.body.scrollTop 값이 항상 0. 스크롤한 값(스크롤해서 내려간 문서 길이)을 받아오지 못함.
해결
검색 키워드 :
document.body.scrollTop 대체를 보고
결과
파이어폭스에서 제대로 표시되지 않음.
원인(짐작)
해결
파이어폭스에서 정상으로 작동.
ie7에서 정상으로 작동.
ie6에서 정상으로 작동.
ie8에서 정상으로 작동하지 않음.
삽질 감상평
firefox + firebug + console.debug 유용하다.
검색하기 전에 원인부터 찾자. console.debug까지 찍어본 다음에 검색하자.
빌어먹을 ie. (
참고 링크
http://www.webuit.com/160 - document.body.scrollTop 값이 항상 0인 것에 대해 정리가 잘 되어있다. 한국어.
http://jmvidal.cse.sc.edu/talks/javascriptinbrowser/windowgeometry.html - 여러 브라우저를 고려한 좌표 얻어내기 javascript 모듈. 영어. (상위 메뉴는 http://jmvidal.cse.sc.edu/talks/javascriptinbrowser/)
http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx - enhanced support for the Cascading Style Sheets (CSS) specification provided by Microsoft Internet Explorer 6 or later.(!DOCTYPE을 어떻게 선언하면 MSIE에서 표준 모드로 작동하는지에 대한 정보)영어. 출처 : http://forums.mozilla.or.kr/viewtopic.php?f=9&t=2382
다 하고 나니 날이 밝는다.
기존 코드
debug toolfunction hidebox(){
var objLayer =document.getElementById('altlayer');
objLayer.style.display='none';
objLayer.style.top = '-100px';
objLayer.style.left= '-100px';
}
var w = 400;
var msgtext;
function showbox(e,obj) {
object = document.getElementById(obj);
if ( !object ) { return; }
msgtext = object.innerHTML;
if ( msgtext == '' ) { return; }
if ( msgtext.length > 40 ) {
var tablewidth='width=' + w;
} else {
var tablewidth = '';
}
var div_string = ''; // 툴팁 모양,내용. 스타일 포함
objLayer = document.getElementById('altlayer');
var BodyWidth = document.body.scrollWidth - 200;
var BodyLeft = document.body.scrollLeft;
var BodyHeight = document.body.clientHeight;
var BodyTop = document.body.scrollTop;
var DivWidth = objLayer.scrollWidth;
var DivHeight = objLayer.scrollHeight;
xpos = e.clientX + BodyLeft + 11;
ypos = e.clientY + BodyTop + 20;
//limit right edge
if ( xpos + DivWidth > BodyWidth ) xpos = BodyWidth - DivWidth;
//limit left edge
if (BodyLeft > xpos) xpos = BodyLeft + 10;
//limit bottom edge
if (ypos + DivHeight > BodyTop + BodyHeight) ypos = ypos - DivHeight - 30;
//limit top edge
if ( ypos < BodyTop ) ypos = BodyTop + 30;
objLayer.innerHTML = div_string;
objLayer.style.top = ypos;
objLayer.style.left = xpos;
objLayer.style.display = 'block';
}
mozilla firefox + firebug way:
console.debug("BodyLeft = document.body.scrollLeft : " + document.body.scrollLeft)
원인
document.body.scrollLeft, document.body.scrollTop 값이 항상 0. 스크롤한 값(스크롤해서 내려간 문서 길이)을 받아오지 못함.
해결
검색 키워드 :
document.body.scrollTop 대체를 보고
document.documentElement.scrollTop으로 바꿈.
결과
파이어폭스에서 제대로 표시되지 않음.
원인(짐작)
objLayer.style.top = ypos;에 단위(px)가 없음.
objLayer.style.left = xpos;
해결
objLayer.style.top = ypos + "px";결과
objLayer.style.left = xpos + "px";
파이어폭스에서 정상으로 작동.
ie7에서 정상으로 작동.
ie6에서 정상으로 작동.
ie8에서 정상으로 작동하지 않음.
삽질 감상평
firefox + firebug + console.debug 유용하다.
검색하기 전에 원인부터 찾자. console.debug까지 찍어본 다음에 검색하자.
빌어먹을 ie. (
참고 링크
http://www.webuit.com/160 - document.body.scrollTop 값이 항상 0인 것에 대해 정리가 잘 되어있다. 한국어.
http://jmvidal.cse.sc.edu/talks/javascriptinbrowser/windowgeometry.html - 여러 브라우저를 고려한 좌표 얻어내기 javascript 모듈. 영어. (상위 메뉴는 http://jmvidal.cse.sc.edu/talks/javascriptinbrowser/)
http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx - enhanced support for the Cascading Style Sheets (CSS) specification provided by Microsoft Internet Explorer 6 or later.(!DOCTYPE을 어떻게 선언하면 MSIE에서 표준 모드로 작동하는지에 대한 정보)영어. 출처 : http://forums.mozilla.or.kr/viewtopic.php?f=9&t=2382
다 하고 나니 날이 밝는다.
'연습일기' 카테고리의 다른 글
| [mysql] INSERT ... ON DUPLICATE KEY UPDATE Syntax(added in MySQL 4.1.0) (0) | 2009/08/17 |
|---|---|
| [javascript] 세로 스크롤한 값 document.body.scrollTop 쓸 때 주의 (0) | 2009/08/16 |
TRACKBACK 0 AND
COMMENT 0
PREV
