그누 전체를은 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개
넹.. tip.css({ top: mousey, left: mousex }); 여기에 숫자가 아닌 + "px"로 해서 문자열로 처리 되어야 해요. 구형 IE는 단위가 없으면 px로 인식하고 알아서 처리하지만 다른 브라우저들은 구렇지 않습니다. 이것도 DTD 써느냐는 웹표준에 따라 달라지기도 하지만, 이런 고민할 필요 없이 px만 써주면 모두 제대로 작동되기에 써야 합니다요.
그리고 네. absolute는 절대 좌표 기준을 부모를 가립니다. relative는 현위치에서 작동되지만 absolute는 부모를 기준으로 작동됩니다. 다른 이렇다할 것이 없으면 최상위에서 작동되어 그렇게 생각하지만 어떤 부모내에서 위치시키기 위한 기준으로 사용가능하기에, 트릭같이 relative로 놓고 사용하기도 하고요. ㅎ
그리고 네. absolute는 절대 좌표 기준을 부모를 가립니다. relative는 현위치에서 작동되지만 absolute는 부모를 기준으로 작동됩니다. 다른 이렇다할 것이 없으면 최상위에서 작동되어 그렇게 생각하지만 어떤 부모내에서 위치시키기 위한 기준으로 사용가능하기에, 트릭같이 relative로 놓고 사용하기도 하고요. ㅎ
게시글 목록
| 번호 | 제목 |
|---|---|
| 15500 |
JavaScript
Cshop님 여기를 봐주세요.
5
|
| 26129 | |
| 29907 |
HTML
날나리 강좌. ㅋ HTML DTD
1
|
| 29906 | |
| 15497 |
Flash
플래쉬 초짜의 질문입니다 ㅠㅠ
2
|
| 15495 |
JavaScript
자바스크립트 자료형을 생각하면 지끈지끈
1
|
| 15486 | |
| 29905 | |
| 29902 |
HTML
[css] 마진 병합
2
|
| 29901 | |
| 29900 | |
| 29899 |
HTML
공백 문자의 병합
|
| 29898 |
HTML
제대로 단위 사용하자
|
| 15483 |
JavaScript
자바스크립트에 대한 오해 - 객체
2
|
| 3556 | |
| 15478 | |
| 15471 |
node.js
nodejs용 iconv (STDIO)
6
|
| 15465 |
JavaScript
중앙정렬만 하면 툴팁 좌표가 어긋납니다.
5
현재글
|
| 29892 | |
| 15462 |
PHP
insert
2
|
| 15459 |
MySQL
putty 질문 좀 드리겠습니다
2
|
| 15458 |
Linux
lsync 사용하기
|
| 3554 | |
| 3546 | |
| 15452 |
PHP
php 다른질문~
5
|
| 15448 |
PHP
php간단한 질문좀요
3
|
| 15441 | |
| 15426 |
PHP
insert 질문.
14
|
| 15424 |
Linux
루트비번 재설정
1
|
| 3544 | |
| 3538 | |
| 15423 |
MySQL
다른 테이블로 데이터 복사
|
| 15422 |
MySQL
grant 새 사용자 권한주기
|
| 15419 |
jQuery
체크박스 체크여부에 따라 나타나고 사라지게
2
|
| 15418 |
JavaScript
그누보드 에디터에서 폰트 크기를 포인트로 사용할 수 있나요?
|
| 26116 |
제안서
제안서 입니다.
12
|
| 15417 |
Linux
쉘스크립트 백업 설정
|
| 15415 |
Mobile
옵티머스 LTE 위치파악 오류
1
|
| 15405 |
JavaScript
닫기버튼 흐극 이거 우째할까요
9
|
| 15403 | |
| 15400 | |
| 15398 |
PHP
도움을 부탁드립니다..ㅠㅠ
1
|
| 3530 | |
| 15395 |
PHP
질문좀 드릴께요ㅠㅠ
2
|
| 15394 |
Flash
플래시8 버전 눈내리는 효과 입니다
|
| 15391 |
jQuery
jQure-menu 메뉴 서브포함
2
|
| 3526 | |
| 15368 | |
| 15366 |
JavaScript
광고고정하는법좀 알려주십사 글남겨요
1
|
| 15355 |
jQuery
제이쿼리 질문 어디다하면 좋을까요..
10
|
| 29886 | |
| 15354 |
Linux
리눅스 설치후 selinux 설정하기
|
| 15349 | |
| 29884 |
HTML
이미지를 돌려요 ~
1
|
| 15345 |
node.js
질문~
3
|
| 26103 | |
| 15342 | |
| 15339 |
PHP
PHP 보안문서
2
|
| 15335 | |
| 3521 | |
| 15330 |
node.js
nodejs에서 mysql 사용
4
|
| 26102 | |
| 29883 |
HTML
css3 메뉴
|
| 15327 | |
| 15326 | |
| 15310 |
Mobile
모바일 홈페이지를 가장 빨리만들수 있는 소스~
15
|
| 15300 |
jQuery
easing을 쉽게 보여주는 이미지입니다
9
|
| 15299 |
MySQL
카테고리에 적합한 쿼리 형식
|
| 15298 |
MySQL
mysql 리플리케이션 쿼리스킵
|
| 3518 | |
| 15292 |
node.js
node.js가 갑자기 땡기네요..^^
5
|
| 15290 |
node.js
node v0.2.6 한글 번역
1
|
| 15289 |
node.js
URL파싱
|
| 15286 |
node.js
node.js에서 html불러오기
2
|
| 29882 | |
| 29880 |
HTML
가변 위치에 배너 붙이기
1
|
| 3513 | |
| 24328 | |
| 15281 |
JavaScript
이거으용좀하고싶은데;;;히히
4
|
| 15280 |
Linux
apache에서 유저권한으로 파일 변경하기
|
| 15277 | |
| 29876 | |
| 26096 |
통계자료
웹사이트 성능분석 보고서
5
|
| 3504 | |
| 3496 | |
| 3487 | |
| 3481 | |
| 15275 |
jQuery
jquery 질문입니다 ㅠㅠ
1
|
| 15274 |
Linux
리눅스하드 스탠바이 모드설정
|
| 3475 | |
| 29872 | |
| 29870 |
HTML
[vim] 주석 달기~
1
|
| 3468 | |
| 3466 | |
| 3463 | |
| 3455 | |
| 3452 | |
| 15268 |
node.js
노드 항상 실행 어떻게 하시나요?
5
|
| 15267 |
Mobile
보리안드로이드
|
| 15266 |
Mobile
앱스프레소
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기