그누 전체를은 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로 놓고 사용하기도 하고요. ㅎ
게시글 목록
| 번호 | 제목 |
|---|---|
| 3182 | |
| 3171 | |
| 3165 | |
| 3163 | |
| 14999 | |
| 14998 |
PHP
mp3 tag 정보 구하기
|
| 14991 | |
| 14984 | |
| 14982 | |
| 14979 | |
| 14978 | |
| 14977 | |
| 3155 | |
| 14976 |
JavaScript
[ActionScript 3.0] Singleton , 싱글톤 페턴
|
| 14963 |
PHP
유용한 함수 strpos
12
|
| 14960 |
JavaScript
[er-win 7 발표자료] 도움이 될지 모르겠내요.
2
|
| 14957 |
jQuery
jquery를 이용한 오른쪽 퀵메뉴
2
|
| 3151 | |
| 3143 | |
| 14951 | |
| 3135 | |
| 3132 | |
| 14948 |
PHP
php 함수검색 넣기
2
|
| 14941 |
MySQL
php 에 유용한툴 15가지
6
|
| 29815 | |
| 14939 | |
| 14936 |
jQuery
jQuery closest().find()
2
|
| 14935 | |
| 3119 | |
| 3113 | |
| 14933 |
PHP
fwrite() 함수 관련
1
|
| 14929 | |
| 3110 | |
| 14928 |
JavaScript
ssh 기본명령어 (왕초보 -_-)
|
| 14923 | |
| 14921 | |
| 3091 | |
| 3087 | |
| 3078 | |
| 26068 |
계약서
프로그램 용역 계약서
6
|
| 3067 | |
| 24252 | |
| 14918 | |
| 3061 | |
| 3059 | |
| 3053 | |
| 14915 | |
| 3049 | |
| 14912 |
jQuery
문서의 총 높이값 알아내는 자바스크립트
2
|
| 14911 |
MySQL
mysql utf-8 설정하기
|
| 14909 | |
| 3040 | |
| 3033 | |
| 3027 | |
| 3022 | |
| 14908 |
jQuery
jQuery 의 attr 과 prop 에 대하여
|
| 24246 | |
| 14905 | |
| 3015 | |
| 14904 | |
| 14899 | |
| 3007 | |
| 14884 | |
| 24241 | |
| 3001 | |
| 2997 | |
| 14880 |
JavaScript
유용한 함수 - serialize
3
|
| 2991 | |
| 2984 | |
| 14879 |
MySQL
프로그래밍 보안 가이드 2006
|
| 2975 | |
| 24232 | |
| 14872 | |
| 2970 | |
| 24231 | |
| 2967 | |
| 2958 | |
| 14864 | |
| 2952 | |
| 14858 |
JavaScript
자기 컴퓨터에서 자신만에 홈피 주소 사용하기.
5
|
| 24230 | |
| 14850 | |
| 2950 | |
| 14848 | |
| 14846 |
JavaScript
도메인 "_" 문자열?
1
|
| 14845 |
jQuery
jquery, mouseover/out
|
| 14839 |
jQuery
[jQuery] textarea 글자수 카운트
5
|
| 2944 | |
| 2932 | |
| 14833 | |
| 14832 | |
| 14830 |
jQuery
가변 폼 액션 접근성 확보하기
1
|
| 2927 | |
| 14826 |
기타
퍼미션 명령
3
|
| 26056 | |
| 2921 | |
| 2911 | |
| 14824 |
JavaScript
ajax 서버측 현재시간 출력
1
|
| 2906 | |
| 2889 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기