6.1 Window와 Document의 영역 알아내기
윈도우나 문서의 너비와 높이를 픽셀값으로 얻어내기 위한 방법
jQuery(document.ready(functino(){
alert('Window height:'+ jQuery(window).height()); // 화면상 표시되는 영역 높이
alert('Window width:' + jQuery(window).width()); // 화면상 표시되는 영역 너비
alert('Document height:'+ jQuery(document.height()); // document의 높이
alert('Document height:'+ jQuery(document.width()); // document의 너비
:: window의 높낮이는 현재 보이고 있는 웹브라우저가 가리고있는 곳을 제외한 현재 보여지는 window를 의미하며
:: document의 높낮이는 숨겨져있는 부분을 모두 포함한다.
:: 따라서 window의 크기와 document의 크기는 다를 수 있다.
6.2 요소의 영역 찾기
요소가 차지 하고 있는 공간 측정
1. innerWidth : border제외 padding포함
2. innerHeight : border제외 padding포함
3. outerWidth : border와 padding을 모두 포함
4. outerHeight : border와 padding을 모두 포함
var $mydiv = jQuery('#myDiv'); 등으로 개체 저장후
$myDiv.innerWidth() 등으로 사용가능, 하지만
jQuery(document).outerHeight(); 등은 사용안됨
jquery(window)도 마찬가지 NaN을 반환한다.
6.3 요소의 오프셋(Offset)알아내기
1. offset - 문서 좌측상단에서 요소의 좌측상단에 대한 상대적인 위치를 포함하는 개체 반환
2. position - 첫번째 부모 (offsetParent)의 좌측상단에서 요소의 좌측상단에 대한 상대적인 위치를 포함한 개체 반환
3. offsetParent - 요소의 offsetParent를 포함하는 개체를 반환한다.
상위요소의 위치가 css로 바뀌게 될경우 하부 메뉴의 positon의 위치가 바뀐다.
//논란의 여지가 있는 해석, 공부해야함
요소에 적용된 위치를 가지고 있는 부모 요소가 있다면 상대적으로 적용이 된다.
6.4 요소가 보이도록 스크롤 하기
요소를 화면에 보이기 위해 문서나 요소를 스크롤 할 필요가있을때
전체 창을 스크롤하면됨 ㅋ scrollTop메서드로 해당 요소를 선택하면 그 위치로 이동
# 코드1 (전체 창 스크롤 하기)
=================================================
jQuery('#bar').click(functino(){
var foooffset = jQuery('#foo').offset(),
destination = fooOffset.top;
jQuery(document).scrollTop(destination);
});
// #bar의 top까지 스크롤한다.
# 코드2 (요소 내부에서 스크롤 하기)
=================================================
var $foo = jQuery('#foo');
$('#bar').click(functino(){
var lastParagraphPosition = jQuery('#foo p:last').position();
var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
$foo.scrollTop(scrollPosition);
});
:: 대상 요소가 스크롤 컨테이너 내부에 있다면 먼저 position 메서드를 사용하여 컨테이너에 대해 상대적인
:: 대상 요소를 알아내고 그 위치값에 컨테이너의 현재 스크롤 위치를 더한다음에 scrollTop을 적용해야한다.
:: 이를 위해선 컨테이너의 position이 정해져있어야한다 (relative, absolute, fixed)
6.5 요소가 표시영역(Viewport)안에 있는지 알아내기
1. 표시영역(viewport)의 크기를 결정한다. - window의 크기
2. 문서의 스크롤 위치를 결정한다.
3. 요소가 보인다면 요소의 위쪽과 왼족 위치에 대한 최대, 최소 값을 계산한다.
4. 이런 값을 기반으로 요소의 위치를 검사한다.
http://jquery-cookbook.com/go/plugin-scrollto 의 플러그인을 사용하면
$.scrollTo('#myElement') 처럼 간단히 사용가능하다.
6.6 표시영역 (Viewport)안에서 요소를 가운데로 정렬하기
viewport안에서 요소를 가운데 정렬하기위한 스크롤
elOffset = $foo.offset();
jQuery(window)
.scrollTop(elOffset.top + (elHeight/2) - (viewportHeight/2))
.scrollLeft(elOffset.left + (elWidth/2) - (viewportWidth/2));
});
:: 중간 정렬
6.7 현재 위치에서 요소를 절대적으로 위치시키기
var $myElement = jQuery('#foo p')eq(0),
elPosition = $myElement.position();
$myElement.css({
position : 'absolute',
top : elPosition.top,
left : elPosition.left
});
6.8 또 다른 요소에 상대적으로 요소를 위치시키기
이미 존재하는 요소에 상대적으로 새 요소를 배치시키방법
jQuery(document).ready(function(){
var $foo = jQuery('#foo'),
fooOffset = $foo.offset(),
$tooltip = $('<div id="tootip"> A new element </div>').appendTo('body');
$tooltip.css({
position : ;absolute',
top: fooOffset.top + 10;
left : fooOffset.left + ($foo.width() /2 ),
width : $foo.width() - 20
});
});
:: 원래 요소의 오프셋을 알아내서 수정한다. $foo.width()/2 !!!
6.9 브라우저의 너비에 따라 스타일시트 바꾸기
브라우저의 너비에 따라 문서의 css를 바꿀 수 있다.
해결방법
1. Body요소의 클래스를 변경한다.
2. 크기와 관계된 스타일시트의 href어트리뷰트를 변경한다.
3. 페이지 크기에 관계된 모든 스타일시트를 포함하지만 한번에 오직 하나만 사용하게한다.
<"link rel="stylesheet" type="text/css" class="css_size small" href="size-small.css" />
<"link rel="alternate stylesheet" type="text/css" class="css_size large" href="size-large.css" disabled=true />
var setSize = function(size){
jQuery('link.css_size').each(function(){
var $this = $(this);
if($this.hasClass(size)){
$this
.removeattr('disabled')
.attr('rel', 'stylesheet');
} else {
$this
.attr('disabled', true)
.attr('rel', 'alternate stylesheet');
});
};
:: 링크를 두개 해두고 함수를 만들어 놓고
:: 두개중의 하나의 클래스를 사용 하게 끔만듬