검색결과 리스트
분류 전체보기에 해당되는 글 57건
- 2012.09.12 높이값 해제하기
- 2012.09.12 위로가기 버튼
- 2012.09.12 Scroll Fix
- 2012.09.11 메뉴건너뛰기
- 2012.09.07 iframe 높이 자동 리사이징
- 2012.09.06 jQuery Cheatsheet
- 2012.09.06 CSS Design Awards
글
콘텐츠를 감싸고 있을때 콘텐츠의 높이에 따라 겉의 div가 자동으로 늘어나게 하는 방법
(but 두개의 태그를 감싸는것은 정석이 아니다)
css 소스
css 소스
.word_bg {background:#f9f9f9; width:100%; zoom:1;} /* 가로값과 zoom을 넣어준다*/ .word_bg:after {content:""; display:block; clear:both;} /* 모두 넣어준다 */ .word_bg div {}
'HTML' 카테고리의 다른 글
링크 # 걸었을때 화면 위로가기 방지 (0) | 2012.09.13 |
---|---|
return false; (0) | 2012.09.13 |
플래시 소스 (0) | 2012.09.13 |
flash와 레이어 겹칠때 레이어가 위로 올라가게 하기 (0) | 2012.09.13 |
input type=file 일때 텍스트 입력 금지 (0) | 2012.09.12 |
설정
트랙백
댓글
글
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=$('script 로 동적으로 위로가기 버튼을 넣어줌. 스크롤위치(scrollTop())가 100이상 일때만 보이게 하고 위로가기 버튼을 눌렀을때도 스무스하게 올라가게끔 처리.') //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(); } }); });
'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 |
설정
트랙백
댓글
글
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 |
설정
트랙백
댓글
글
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}
'웹접근성' 카테고리의 다른 글
키보드 접근성을 위한 tabindex의 사용 (0) | 2015.11.05 |
---|---|
콘텐츠 건너띄기 (0) | 2014.02.06 |
웹접근성 준수 markup validation 관련 체크리스트 (0) | 2013.08.12 |
설정
트랙백
댓글
글
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 |
설정
트랙백
댓글
글
'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 |
설정
트랙백
댓글
글
'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 |
RECENT COMMENT