높이값 해제하기 HTML 2012. 9. 12. 17:55
콘텐츠를 감싸고 있을때 콘텐츠의 높이에 따라 겉의 div가 자동으로 늘어나게 하는 방법 (but 두개의 태그를 감싸는것은 정석이 아니다)

css 소스
.word_bg {background:#f9f9f9; width:100%; zoom:1;}  /* 가로값과 zoom을 넣어준다*/
.word_bg:after {content:""; display:block; clear:both;} /* 모두 넣어준다 */
.word_bg div {}


위로가기 버튼 jQuery 2012. 9. 12. 14:30

css소스

.top { position: fixed; bottom:20px; right:30px; background: url(http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/go-up.png) no-repeat; width:48px; height:48px; }
위로가기 버튼은 항상 그 위치에 있어야 하기에 position:fixed 를 넣어줌.

jQuery 소스

$(document).ready(function(){
    var $body = $(document.body), //자주 사용하기에 캐시되게 변수에 넣어준다
        $top = '';

    $top=$('
') //div 를 만들고 .addClass('top') //top className을 주고 .hide() //처음에는 숨겨둔다 .click(function(){ // 클릭이 이벤트 할당 $body.animate({ scrollTop: 0 }); //animation효과로 scollTop=0으로 이동 }) .appendTo($body); // body에 top을 넣는다 //윈도우의 스크롤위치로 위로가기 버튼을 보여줘야기에 핸들러 작성 $(window).scroll(function(){ var y = $(this).scrollTop(); if(y >= 100){ $top.fadeIn(); } else {             $top.fadeOut(); } }); });
script 로 동적으로 위로가기 버튼을 넣어줌. 스크롤위치(scrollTop())가 100이상 일때만 보이게 하고 위로가기 버튼을 눌렀을때도 스무스하게 올라가게끔 처리.


'jQuery' 카테고리의 다른 글

z-index ie7에서 엘리먼트에 가려질 때  (0) 2013.05.08
Datepicker 옵션  (0) 2013.01.16
동적으로 li 추가, 삭제하기  (0) 2012.10.18
checkbox 체크여부 확인  (0) 2012.10.16
Scroll Fix  (0) 2012.09.12
Scroll Fix jQuery 2012. 9. 12. 11:03

html 소스 (id=header)

<div id="header">
Scroll Fix Header like Facebook in JQuery
</div>

jQuery 소스

$(document).ready(function() {
 
    var div = $('#header');
    var start = $(div).offset().top;
 
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });
 
});


'jQuery' 카테고리의 다른 글

z-index ie7에서 엘리먼트에 가려질 때  (0) 2013.05.08
Datepicker 옵션  (0) 2013.01.16
동적으로 li 추가, 삭제하기  (0) 2012.10.18
checkbox 체크여부 확인  (0) 2012.10.16
위로가기 버튼  (0) 2012.09.12
메뉴건너뛰기 웹접근성 2012. 9. 11. 16:15

html 소스

<a class="to_gnb" href="#gnb">메인메뉴 바로가기 링크</a>

css 소스

/* skip navigation */
.to_gnb {position:absolute; z-index:100; width:980px; left:50%; margin-left:-490px; top:-100px; padding:10px 0; text-align:center; background:#fafafa}
.to_gnb:hover,
.to_gnb:active,
.to_gnb:focus {top:0}


html 소스

<iframe width="700" id="the_iframe" onload="calcHeight();" src="testing_page.shtml" scrolling="NO" frameborder="1" height="1"></iframe>

javascript 소스

function calcHeight()
{
  //find the height of the internal page
  var the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height = the_height;
}


'javascript' 카테고리의 다른 글

팝업창 띄우기  (0) 2012.09.26
프린트 영역 설정  (0) 2012.09.13
radio 선택에 따른 스타일 활성/비활성  (0) 2012.09.13
팝업창닫기 링크  (0) 2012.09.13
뒤로가기  (0) 2012.09.13
jQuery Cheatsheet Site Link 2012. 9. 6. 13:22

'Site Link' 카테고리의 다른 글

slide swipe Owl Carousel  (0) 2017.04.24
swipe 가로 세로  (0) 2017.04.07
iOS font 아이폰 기본제공 폰트  (0) 2016.10.05
IE8 미만 버전 테스트를 위한 XP모드 설정  (0) 2013.08.12
CSS Design Awards  (0) 2012.09.06
CSS Design Awards Site Link 2012. 9. 6. 13:19

'Site Link' 카테고리의 다른 글

slide swipe Owl Carousel  (0) 2017.04.24
swipe 가로 세로  (0) 2017.04.07
iOS font 아이폰 기본제공 폰트  (0) 2016.10.05
IE8 미만 버전 테스트를 위한 XP모드 설정  (0) 2013.08.12
jQuery Cheatsheet  (0) 2012.09.06