목록Client-side (14)

그곰의 생활

모바일웹 터치스크롤 구현 스크립트 iScroll

터치스크롤를 구현하는 스크립트가 여러 종류가 있겠지만 이번에 프로젝트를 진행하면서 새로운 스크립트를 알게되었다. 바로 Matteo Spinelli님이 개발하신 iScroll 이다.iScroll 를 사용해보니 스크롤 움직임이 자연스럽고, 적용시키기도 간단하였다.iScroll 에 대해 더 자세히 알고 싶다면 아래 블로그에서 확인하면 된다. 단, 블로그가 영어라 언어의 장벽이 크게 느껴지는 관계로 필자는 소스를 분석하여 움직임에 대해 이해하는 방향으로 진행 중이다.Matteo Spinelli님의 개발 블로그 : http://cubiq.org/ iScroll 프로젝트 : http://cubiq.org/iscroll-4 [iScroll 다운로드]
Client-side/SCRIPT 2012. 5. 23. 11:42
특정 로직을 백그라운드로 처리하고 처리결과를 가져오기

----- Loading ----- HTML 삽입 미리보기할 수 없는 소스
Client-side/SCRIPT 2012. 3. 16. 18:43
[API] 구글 차트

구글 차트 : http://code.google.com/intl/ko-KR/apis/chart/ 구글 차트 주소생성 : http://www.jonwinstanley.com/charts/ 주소 생성 사이트의 설명은 아래 블로그에서 확인하면 된다. http://offree.net/entry/Google-Chart-API-Chart-Generator
Client-side/SCRIPT 2012. 3. 13. 10:23
모바일 웹에서 화면이 세로모드, 가로모드일 때 각각 다른화면 출력

아래 스크립트를 이용하여 html 태그를 구성한다. 세로모드일 때 출력 가로모드일 때 출력
Client-side/SCRIPT 2012. 3. 12. 14:16
[스크랩]div style에서 overflow사용법

출처 : http://blog.daum.net/pepmanager/6000706 만약 내용이 div크기를 넘었을 경우 Scroll을 보이게 하기 위해선아래와 같이 만들어야 한다. auto: 보통때는 보이지않다가 크기가 커지면 보이게 됨 hidden: 크기가 커도 보이지 않음 overflow-x: x방향으로만 scoll이 생김 overflow-y: y방향으로만 scoll이 생김 단 javascript에서는 '-'를 사용하지 못한다.(인식을 하지 못한다.) 그래서 만약 '-'를 사용하게 되면 '-'를 빼버리고 다음 첫 글자를 대문자로 바꿔 사용한다. 만약 border-right을 javascript안에서 사용하면 document.레이어id...
Client-side/CSS 2011. 11. 17. 11:22
jQuery를 이용한 배경이 가려진 레이어 팝업 뛰우기

참조 : http://blog.naver.com/bluecat81/90104506981 팝업 내용 입력 닫기X 레이어 팝업 발생
Client-side/SCRIPT 2011. 11. 17. 10:59
자바스크립트 Form 생성하여 Post 전송

보통 내가 자바스크립트를 통해 url과 parameter를 전송할때에 쓰는 스크립트는 아래와 같이 GET방식을 이용한 전송을 사용한다. document.location.href="http://example.com/a.php?q=a"; 하지만 어떤 경우에는 POST 방식의 전송을 써야하는 경우가 발생하는데 아래와 같이 태그를 이용하려면 값을 입력하고 전송해주는 스크립트를 만들고 를 선언해놔야 사용할 수가 있다. 이러한 번거로운 작업을 피하기 위해 아래 소스를 찾게 되었다.참고하여 실 작업에 반영하도록 하자. /* * path : 전송 URL * params : 전송 데이터 {'q':'a','s':'b','c':'d'...}으로 묶어서 배열 입력 * method : 전송 방식(생략가능) */ func..
Client-side/SCRIPT 2011. 11. 15. 11:34
게시물 제목+URL SNS 링크 스크립트

1. 잛은 URL(Short URL) 생성 -- PHP버전 /* * SNS용 Short URL 생성 * mypikup.kr에서 제공하는 API를 이용 */ function getShortURL($longUrl) { $url = "http://mypickup.kr/?c=api&m=short&q=".urlencode($longUrl); $data = file_get_contents($url); $json = json_decode($data, true); return urldecode($json['short_numalpha']); } $SNS_sURL = getShortUrl("http://".$SERVER_NAME."/".$PHP_SELF."?".$QUERY_STRING); 2. 자바스크립트로 링크 걸기 ..
Client-side/SCRIPT 2011. 11. 7. 14:26
[스크랩] 비밀번호 유효성 검사

출처 : http://blog.naver.com/PostView.nhn?blogId=benedaca&logNo=30083944929비밀번호 유효성 검사 // 비밀번호 유효성 검사 function CheckPassword(uid, upw){ if(!/^[a-zA-Z0-9]{8,20}$/.test(upw)){ alert("비밀번호는 숫자와 영문자 조합으로 8~20자리를 사용해야 합니다."); return false; } var chk_num = upw.search(/[0-9]/g); var chk_eng = upw.search(/[a-z]/ig); if(chk_num
Client-side/SCRIPT 2011. 10. 6. 19:19
[스크랩]margin, padding 설명

사전적 의미 margin: 여백 padding: 채워넣기 margin과 padding의 차이점간단하게 말해 margin은 외부여백, padding은 내부여백입니다. 1. class네임이 recentComment인 레이어(div)에 margin-left를 준 경우 .recentComment{margin-left:60px; }2. class네임이 recentComment인 레이어(div)에 padding-left를 준 경우 .recentComment{padding-left:60px; } Margin사용하기 margin-top margin-right margin-bottom margin-left .recentComment{margin-top:50px;}라고 써줄 경우 recentComment라는 class 네..
Client-side/CSS 2011. 9. 7. 10:10
Prev 1 2 Next