JQuery45 [HTML5/CSS3/jQuery] 반응형 상단에 광고 추가 가능한 헤더 템플릿(Template) - 밝은 빨강 계열 샘플 See the Pen responsive header template (red) by Woojin Choi (@woojin-choi) on CodePen. 밝은색의 경쾌한 상단 템플릿 예제입니다. 외국계 템플릿을 참고해서 반응형으로 한번 만들어 봤습니다. 구글 애드센스 하시는 분들을 위해 광고도 하나 넣었습니다. 2018. 12. 13. [JavaScript] inputbox에 숫자와 백스페이스(←)만 Key-In(입력)되게 하는 자바스크립트 소스 See the Pen Input Only Number & Backspace by Woojin Choi (@woojin-choi) on CodePen. Inputbox에 숫자와 백스페이스(←)만 Key-In되게 하는 자바스크립트입니다. event.keyCode로 제어합니다. 문자가 입력되었다 사라지는 게 아니고 아예 문자는 입력이 안됩니다. 2018. 11. 20. [jquery] 제이쿼리로 map()과 join()을 사용해서 객체의 문자열을 연결하는 간단한 방법 See the Pen jquery join sample by zzzznara (@zzznara) on CodePen. map()과 join()을 사용해서 객체의 문자를 연결하는 간단한 방법입니다. join()은 문자열을 콤마(,)로 연결해 줍니다. 2018. 11. 18. [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 2가지 이상의 객체를 동시에 사용할 때 사용합니다. 즉, 위 예제에서 버튼과 레이어를 클릭할 때는 사라지지 않아야 하고 그 2개를 제외한 다른 곳을 클릭하면 레이어가 사라집니다. 2018. 11. 14. [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 메뉴바나 레이어 메뉴에 많이 사용되는 스크립트랍니다. 2018. 11. 12. [제이쿼리 플러그인 소스] inputbox에서 커서가 원하는 곳에 위치하게 하는 jquery plugin See the Pen [jQuery plugin] inputbox에서 커서가 원하는 곳에 위치하게 하는 제이쿼리 플러그인 소스 by zzzznara (@zzznara) on CodePen. 자동으로 커서를 inputbox에 위치하게 할 때 inputbox의 내용 뒤에 커서가 위치하게 하는 제이쿼리 플러그인 입니다. $(“[name=cur]”).focus(); 이렇게 focus()를 주게 되면 커서가 앞에 위치합니다. $(“[name=cur]”).focus().setCursorPosition(); 이 플러그인을 넣고 focus() 뒤에 setCursorPosition( 1 )를 하게 되면 커서가 글자 뒤에 위치합니다. setCursorPosition() 안의 숫자는 포커스의 위치입니다. 2018. 10. 25. [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) See the Pen [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) by zzzznara (@zzznara) on CodePen. 3단 레이아웃일 경우, 상단/좌측하단/우측하단 이렇게 구분이 되는데요. 이미지나 내용이 많을 경우 좌측하단과 우측하단의 높이가 일치하지 않는 문제가 생깁니다. 이럴 때 사용하면 좋을 것 같네요~ 예제에서 처음 화면이 열릴 때 좌우측 하단의 높이가 다릅니다. 좌측하단 높이 : 300px 우측하단 높이 : 100px 하지만, setTimeout() 함수로 2초 후에 equalHeights() 함수를 호출하여 높이를 같게 해줍니다. 물론, 실제 레이아웃 등에 사용할 때는 setTimeout() 함수는 필요없으므로 제거하시면 됩니다... 2018. 6. 10. [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) See the Pen [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) by zzzznara (@zzznara) on CodePen. 1. 달력에 숫자와 하이픈(-)만 입력가능합니다. 2. 존재하지 않는 날짜를 입력했는지 체크합니다. 3. from ~ to 달력인 경우, 서로 기간이 엇갈리지 않게 체크 및 disabled 처리합니다. (from 달력에 ‘2018-01-01’이 선택된 경우, to 달력은 ‘2018-01-01’ 이후만 선택 가능합니다.) 2018. 5. 31. [자바스크립트] javascript로 iframe에 동적으로 소스를 추가하거나 변경하는 방법 이런식으로 iframe에는 파일을 하나 만들어서 src 속성으로 넣었는데요. 파일이 없어도 iframe에 소스를 추가하거나 변경할 수 있습니다. 소스에 주석이 돼 있으므로 설명은 생략합니다. 2018. 5. 24. [jQuery] jqtransform의 selectbox의 option 추가해도 안 보이는 문제 해결방법 2018/05/23 - [프로그래밍 언어/jQuery] - [jQuery] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. Head Javascript /** * * jqTransform * by mathieu vilaplana mvilaplana@dfc-e.com * Designer ghyslain armand garmand@dfc-e.com * * * Version 1.0 25.09.08 * Version 1.1 06.08.09 * Add event click on Checkbox and Radio * Auto calculate the size of a select element * Can now, disabled the .. 2018. 5. 23. [jQuery] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. Head Javascript $(function(){ $('form').jqTransform({imgPath:'http://www.htmldrive.net/edit_media/2010/201009/20100927/jqtransform/jqtransformplugin/img/'}); }); Body Input Text: Input Password: Checkbox: Radio : oui non Select : 1 2 Select Redimention : Big Option test line with more words Multi line row. Multi line row. Multi line row. Multi line row. Option 2 Option 3 Option 4 Option 5 Option.. 2018. 5. 23. Html Html5 Css Javascript(자바스크립트) jQuery 실행기 - 바로 확인 가능) Editor - HTML HTML5 CSS javaScript jQuery Output 새창으로 보기 2018. 5. 20. [bootstrap] 부트스트랩 – 전체 너비 내비게이션 메뉴바 [냅바(navbar)] & 검색입력창(searchbox) 부트스트랩 전체너비 내비게이션 메뉴바입니다. 그리고, 검색입력창(searchbox)가 들어 있는 샘플입니다. [Edit in jsfiddle] 클릭해서 확인하세요. 2018. 5. 11. [bootstrap] 부트스트랩 – 전체 너비 내비게이션 메뉴바 [냅바(navbar)] & 검색입력창(searchbox) [검은색 테마] 부트스트랩 전체 너비 내비게이션 메뉴바 검은색 테마입니다. 2018. 5. 11. [자바스크립트] javascript의 치환(replace)할 값을 변수로 받아서 사용하는 예제 str.replace(/abc/gi, “x”); “abc”라는 값을 “x”로 바꾸고 싶으면 보통 이런식으로 사용하는데요. 변수에 “abc” 값을 넣고 replace하는 예제입니다. 2018. 5. 11. 이전 1 2 3 다음