중앙정렬만 하면 툴팁 좌표가 어긋납니다.
그누 전체를은 div wrapper로 감싼후
div.wrapper { width:800px; margin:0 auto;}으로 처리하여 가운데 정렬해서 사용중입니다.
아래는 사용하는 툴팁이구요..
<script>
$(document).ready(function() {
var tip = null;
$(".tt").hover(function(){
tip = $(this).find('.tp');
var id = $(this).attr('title');
if ($('#item' + id).length <= 0)
{
$.ajax( {
type:'GET',
url: '주소'+id ,
dataType: 'html',
success: function (html, textStatus) {
tip.append(html);
}
} );
}
tip.css({position:'absolute'}).show(); //Show tooltip
}, function() {
tip.hide().remove(); //Hide and remove tooltip appended to the body
$(this).append(tip); //Return the tooltip to its original position
}).mousemove(function(e) {
//console.log(e.pageX)
if ( tip == null ) return;
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
$(this).find('.tp').css({ top: mousey, left: mousex });
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport $(this).find('.tip').css({ top: mousey, left: mousex });
mousey = e.pageY - tipHeight - 20;
tip.css({ top: mousey, left: mousex });
} else {
tip.css({ top: mousey, left: mousex });
}
});
});
</script>
그리고 본문 제목에 <a class= "tt" href = "그누 변수값으로 겟" title ="그누 변수" >제목 <span class="tp"></span></a>로 사용했습니다.
근데 이게 margin:0 뒤에 auto를 안줄땐 좌표가 제대로 잡힙니다.
하지만 중앙정렬하면 꼭 좌표가 어긋납니다.. 창크기가 늘어감에따라 어긋납니다.
코드 자체를 딱 바라진 않습니다.
어느 부분에 어느부분을 더하거나 제해야한다 이런 정도의 힌트라도 알려주시면 감사하겠습니다.
혼자 이것저것 해보다 결국 벽에 부딫혀 글을 올립니다.
댓글 5개
aequum
13년 전
일단은 px 단위를 써줘야 합니다. absolute라고 반드시 절대좌표계를 사용하는 것이 아니라 부모가 absolute, relative, fixed 같은 경우에는 부모내에서 좌표계가 기준으로 작동됩니다.
13년 전
먼저, 댓글 감사합니다.
px 단위를 써줘야한다는부분은 css 부분 말이신가요.
아. 그리고 해당 경우면 부모 엘리먼트가 absolute, relative, fixed 같은 경우가 적용되 있는거군요... 참고가 되었습니다.
음 그리고 조금더 힌트를 주실수 없을까요.. ㅎㅎ 스타일 포지션은 사실 거의 모르다보니.. 이해가 다 되진 않았어요.
px 단위를 써줘야한다는부분은 css 부분 말이신가요.
아. 그리고 해당 경우면 부모 엘리먼트가 absolute, relative, fixed 같은 경우가 적용되 있는거군요... 참고가 되었습니다.
음 그리고 조금더 힌트를 주실수 없을까요.. ㅎㅎ 스타일 포지션은 사실 거의 모르다보니.. 이해가 다 되진 않았어요.
aequum
13년 전
넹.. tip.css({ top: mousey, left: mousex }); 여기에 숫자가 아닌 + "px"로 해서 문자열로 처리 되어야 해요. 구형 IE는 단위가 없으면 px로 인식하고 알아서 처리하지만 다른 브라우저들은 구렇지 않습니다. 이것도 DTD 써느냐는 웹표준에 따라 달라지기도 하지만, 이런 고민할 필요 없이 px만 써주면 모두 제대로 작동되기에 써야 합니다요.
그리고 네. absolute는 절대 좌표 기준을 부모를 가립니다. relative는 현위치에서 작동되지만 absolute는 부모를 기준으로 작동됩니다. 다른 이렇다할 것이 없으면 최상위에서 작동되어 그렇게 생각하지만 어떤 부모내에서 위치시키기 위한 기준으로 사용가능하기에, 트릭같이 relative로 놓고 사용하기도 하고요. ㅎ
그리고 네. absolute는 절대 좌표 기준을 부모를 가립니다. relative는 현위치에서 작동되지만 absolute는 부모를 기준으로 작동됩니다. 다른 이렇다할 것이 없으면 최상위에서 작동되어 그렇게 생각하지만 어떤 부모내에서 위치시키기 위한 기준으로 사용가능하기에, 트릭같이 relative로 놓고 사용하기도 하고요. ㅎ
13년 전
감사합니다. 부모에 적용된 포지션이 필요는 없다 판단되어 제거하니 되는군요. ㅎ
aequum
13년 전
좀더 간단히 하고자 한다면 어차피 위와같이 작동을 염두했다면 사실상 부모가 필요없는 것일 것입니다. body같은 요소에 바로 append해서 시켜도 될 것입니다. 그렇다면 부모의 position을 살펴볼 이유가 없을 것입니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 16046 | |
| 16039 |
jQuery
jquery + ajax + php 샘플 소스
6
|
| 24343 | |
| 30035 | |
| 16035 | |
| 16033 | |
| 16031 |
JavaScript
브라우저별 출력 width가 다른 이유가 무엇일까요?
1
|
| 3896 | |
| 30030 | |
| 3892 | |
| 16029 | |
| 16026 |
node.js
nodejs toolbox 입니다
2
|
| 16024 |
node.js
node js 강좌 모음 이네요
1
|
| 16020 | |
| 16016 |
JavaScript
출력 결과가 이상하게 다르네요....
3
|
| 16013 | |
| 16010 |
JavaScript
익스플로러8에서는 잘 되는데 익스플로러9에서는 안되는 경우 문의드립니다.
2
|
| 3889 | |
| 30027 | |
| 16009 | |
| 16008 |
Linux
아파치 데몬 체크실행하기
|
| 16007 |
MySQL
MySQL innodb Lock 체크
|
| 16005 | |
| 30025 |
HTML
스크롤바 관련 질문드려요..
1
|
| 16001 | |
| 15998 | |
| 3886 | |
| 30022 | |
| 3883 | |
| 15995 | |
| 15992 |
JavaScript
음;; 텍스트박스 엔터시 비활성?
2
|
| 30020 |
HTML
웹표준 질문이요^^
1
|
| 15991 |
Linux
PuTTY의 SSH 창에서 한글 깨짐 막기
|
| 15989 |
Linux
내/외부망 연결하기
1
|
| 15980 |
node.js
5분만에 만들어보는 채팅 프로그램
8
|
| 15977 | |
| 3878 | |
| 15976 |
JavaScript
HTML 출력 퍼포먼스...
|
| 3871 | |
| 26248 |
서식
지출결의서 양식
|
| 3868 | |
| 3861 | |
| 15972 | |
| 15970 |
PHP
exit() 쓰시는 분들
1
|
| 15967 |
Mobile
공부하려하는데 책을 뭐사지;
2
|
| 15964 |
JavaScript
자바스크립트와 메모리 누수와 IE
2
|
| 15954 | |
| 26245 |
기획서
쇼핑몰 수익 시뮬레이션
2
|
| 15953 | |
| 15952 |
Mobile
iOS 모바일 브랜드 애플리케이션 개발
|
| 15948 |
PHP
php 기반 웹크롤러 모음
3
|
| 15947 | |
| 30016 | |
| 15944 |
MySQL
쿼리에서 해당 테이블 이름 구하기?
2
|
| 15943 | |
| 15942 |
MySQL
putty 로 phpmyadmin설치방법
|
| 15940 | |
| 15938 |
JavaScript
이코드만으로는 출력이 안되나요?
1
|
| 15935 |
JavaScript
onclick시에 디비 읽어 와서 inputdp넣기
2
|
| 24342 | |
| 3855 | |
| 15933 | |
| 15930 | |
| 3850 | |
| 15928 |
JavaScript
간단한 스크립트 결합좀 해주세요!!
1
|
| 15925 | |
| 30013 | |
| 30012 | |
| 15922 | |
| 15921 | |
| 15918 |
node.js
[예약판매] Node.js 노드제이에스 프로그래밍
2
|
| 3843 | |
| 3842 | |
| 15915 |
JavaScript
텍스트파일에서 랜덤으로 무작위로 불러오기
2
|
| 15912 | |
| 15911 |
Linux
유용한리눅스사이트
|
| 3840 | |
| 15904 | |
| 26244 | |
| 26243 | |
| 3835 | |
| 15902 |
Flash
플래쉬 url링커가 안되요.
1
|
| 26239 | |
| 15898 |
Linux
mysql 연동 관련
3
|
| 3828 | |
| 26230 | |
| 15897 | |
| 26227 | |
| 3826 | |
| 26219 | |
| 15893 |
jQuery
이미지의 색상을 변경하는 방법 !!
3
|
| 15886 | |
| 3807 | |
| 3800 | |
| 3796 | |
| 15885 | |
| 15881 |
JavaScript
플래쉬 에서 아작스 자바스크립트 함수를 넣어야하는데 어떻게 할까용??
3
|
| 15879 |
PHP
도메인 관련
1
|
| 15877 |
JavaScript
페이스북 타임라인 최신글등을 웹홈페이지와 연동시키고싶어요..
1
|
| 15864 |
jQuery
jquery 이미지 슬라이드 추천
12
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기