검색결과 리스트
분류 전체보기에 해당되는 글 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=$('') //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 |
설정
트랙백
댓글
글
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