본문 바로가기

jQuery

앵커 클릭시 부드럽게 스크롤이동 앵커 01 앵커 02 앵커 01의 내용 앵커 02의 내용 위와 같은 앵커 이동의 소스코드가 있다고 했을 때 좀더 부드럽게 출력할 수 있도록 해보장.ㅋ 더보기
특정 타겟으로 부드럽게 스크롤 되는 스크립트 기존 앵커는 타겟이 될 요소에 id를 지정하여 href속에서 해당 #id를 넣어 별 문제 없이 진행을 했었다. 그러나 앵커 연결시 다른 요소때문에 가려지는 문제가 생겼다. 헤더영역이 position:fixed로 되어있어서 앵커설정된 부분과 겹치는 것이다! 생각해보면 별 것 아니었는데 참... offset.top 에 fixed잡힌 요소의 높이값만큼 영역을 늘려주고 해결했다. Scroll to target 출처 : http://jewonagency.com/ 더보기
[plugin] jquery slide plugin 1. Camera 반응형 지원 및 여러가지 기능을 많이 지원해서 좋다. http://www.pixedelic.com/plugins/camera/ 2. Master Slider 반응형 및 모바일을 지원하고 여러가지 html5 기능들도 지원하는 아우 훌륭한 슬라이더이다.단, 좋은만큼 유료이다... http://www.masterslider.com/ 더보기
[plugin] animate.css 와 더불어 편리하게 사용가능한 wow.js animate.css 와 함께 스크롤 애니메이션을 줄 수 있고, 지연시간을 두고 멋진 애니메이션 효과를 낼 수 있도록 도와주는 wow.js를 소개합니다~ 인터렉티브한 사이트나 모바일에서 간편하게 구현 가능하기 때문에 적절히 활용하면 좋을 것 같습니다. 사이트 주소: http://mynameismatthieu.com/WOW/index.html 더보기
ie9 이하에서 css3 transition 사용하기 css3 transition은 ie10이상의 환경에서만 구동되도록 되어있습니다. ie9이하에서 사용할 수 없을까 하는 생각으로 검색해보니 역시나 jquery 를 활용한 방법이 있었네요~ 사이트 주소는 아래와 같습니다. http://louisremi.github.io/jquery.transition.js/test/index.html http://playground.benbarnett.net/jquery-animate-enhanced/ 더보기
substr을 사용하여 간단하게 글자수 자르기 jquery substr을 사용하여 간단히 문자열을 자를 수 있다. 최신글을 추출하면서 사용하기 간편하다. 1 2 3 4 5 6$(document).ready(function(){ $('.latest-post ul li a').each(function(){ if ($(this).text().length > 26) $(this).html($(this).text().substr(0,26)+".."); }); }); 더보기
팝업창 소스 정리 팝업창 옵션 ---------------------------------------- no, 1을 사용 width=800 : 팝업창의 넓이 height=600 : 팝업창의 높이 top=0 : 팝업창이 뜰 위치 left=0 : 팝업창이 뜰 위치 resizable=1 : 창크기 조정가능 scrollbars=1 : 스크롤바 menubar=1 : 메뉴 toolbar=1 : 메뉴아이콘 location=1 : 제목표시줄 directories=1 : 연결버튼(핫메일 등) status=1 : 하단의 상태바 ■ 입장시 팝업창 띄우기 ---------------------------------------- 또는 ■ 퇴장시 팝업창 띄우기 ---------------------------------------- 또는 ■ 클릭.. 더보기
모바일 접속 시 페이지 이동 모바일 페이지 접속 시 특정 url로 전환시키는 코드는 다음과 같습니다. var uAgent = navigator.userAgent.toLowerCase(); var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce', 'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile'); for(var i=0;i 더보기

티스토리툴바