javascript25 jQuery UI - Div 강조하기 / effect highlight Div 반짝 거리게 하기 안녕하세요. 고코더 입니다. Div안에는 많은 것들을 담습니다. 사이트는 강조해야 할 Div가 존재하게 됩니다. ● 1. 얼마전에 만든 제가 만든 QR코드 만들기 사이트에 접속시에 해당 네모 DIV안에 이미지가 나타난다고 알려주고 싶더군요 그래서 알아본 결과 jQuery UI에 제공하는 간단하고 강력력한 기능인 effect를 사용하는 방법이 있습니다. ● 2. 아래에 코드를 웹에서 실행해보세요. 12345678910111213141516171819 $( document ).ready(function() { $('#GoCoderDiv').effect("highlight", 1000); }); DIV 강조 Colored by Color Scriptercs ● 3. 아래처럼 Div가 .. 2019. 6. 3. jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl 오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 안녕하세요. 고코더 입니다. 예전에 팝업 하면 무조건 window.open 을 통한 브라우저 자체 내장객체를 사용했습니다. 그런데 요즘은 반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메 레이어 팝업을 많이 사용 합니다. 이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다. ▼직영하면 j 으르렁 대다 인가 ㅎㅎ https://plugins.jquery.com/jgrowl/ ▼ 고코더 방문자와 구독자를 위해 직접 간단하게 코드를 작성했습니다. 그대로 HTML을 실행하면 화면이 실행 됩니다. 1234567891011121314151617181920212223242526272829303132333435363738394.. 2019. 5. 21. JavaScript - 버튼 더블클릭 방지 유효성 처리하기 / onclick 안에 쉽게 프론트에서 더블클릭 되면 안되는 버튼이 있을 때 안녕하세요. 고코더 입니다. 프론트에서 가끔 두번 클릭되면 안되는 기능 버튼이 있습니다. 물런 이런 유효성 체크는 서버사이드 언어나 백엔드에서 처리해야 하는게 정석이지만 프론트 개발자라면 UI에서도 기본적인 실수 방지 정도는 해줘야겠지요. 사실 버튼을 두번 클릭하지 못하게 하는 방법은 많지만 오늘은 간단하게 onclick 에 넣어 처리할 수 있는 방법을 소개하려고 합니다. ▼ 우선 제가 작성한 예제 소스를 보겠습니다. 12345678 Colored by Color Scriptercs 개발자가 아니어도 원리는 금방 눈치 채셨을텐데요. input 타입이 button일 경우 disabled 를 만들고 이미지 버튼일 경우에는 visibility를 이용해 다시 클릭.. 2019. 4. 4. jQuery - 디자인 요소 툴팁 박스 생성하기 / tooltipsy 레이어 부가설명 박스 달기 안녕하세요. 고코더 입니다. 브라우저는 title 요소에 값을 넣으면 보통 기본 팁 박스를 제공합니다. 하지만 우리의 클라이언트는 특이한걸 원하는 분이 많습니다. 이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다. 그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을 소개 하려 합니다. ▼ tooltipsy 라는 플러그인 입니다. http://tooltipsy.com/ ▼ 아주 간단하게 툴박스를 생성할 수 있는데요 아래 예제를 한번 실행해보세요. 123456789101112131415161718192021 $("#gocoder_tooltip").tooltipsy({ css: { 'padding': '5px', 'max-width': '100px', '.. 2019. 3. 26. console.log - 개발자도구 콘솔 창에 안보이게 하기 브라우저에서 콘솔로그 안찍히게 하기 안녕하세요. 고코더 입니다. 요즘 크롬의 개발자 도구의 편리함으로 alert 로 더이상 로그를 찍어보지 않고 console.log 를 많이 사용 하고 게십니다. 그런데 중요한건 실서버에 올릴 때 사용자들에게는 log를 제공하고 싶지 않아서 다 지우고 올리시고 계시죠. 그럴 필요 없이 아래 코드를 한번 웹에서 실행 해보시면 편리한 방법을 만나실 수 있습니다. ▼해당 코드를 웹에서 실행해 보세요 1234567891011121314151617181920212223242526272829 Colored by Color Scriptercs ▼ 파일을 다운로드 하셔도 좋습니다. ▼ 아래처럼 가운데 log 전에 disableLogger(); : 선언 하면 해당 log는 보이지 않습니.. 2018. 10. 1. jQuery - lazyload() 이미지 동적으로 / 스크롤시 호출 이미지가 화면에 올때 로딩 되게 하기 안녕하세요. 고코더 입니다. 오늘은 동적으로 이미지를 호출하여 페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만 해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다. 오늘 써볼 플러그인은 lazyload() 입니다. ▼홈페이지는 아래와 같습니다. https://appelsiini.net/projects/lazyload/ 공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다. 저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다. ▼ 아래 내용을 참고해주세요 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2.. 2018. 2. 12. JavaScript - input 박스에 숫자만 입력 가능하도록 inputbox validtion numbers only 오늘은 자바스크립트 유효성 체크중에 가장 많이 쓰이는 input 박스에 숫자만 입력 하는 방법을 알아보겠습니다. 개발 방법은 많지만 간단한 두가지 방법을 이용해서 구현 해보았습니다. 첫번째 인풋은 함수로 뺴서 숫자 keycode가 아니면 입력하지 못하도록 false를 주었고 12345function inNumber(){ if(event.keyCode57){ event.returnValue=false; }} cs 두번째 인풋은 정규식을 이용해 바로 input 박스에 인라인으로 작성하였습니다. 1 cs ▼ 아래 소스를 확인하시면 쉽게 이해가 가능하실 거라 생각 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 functio.. 2018. 1. 1. jQuery - 긴 텍스트 ... 으로 줄이기 / dotdotdot 긴 글 텍스트 축약하기 DIV에 긴 텍스트가 들어가면 크기가 조절이 되거나 일명 글자가 삐져나오죠 그래서 보통 몇 글자 이상이면 ...을 붙혀서 축약 시키도록 코딩을 합니다. 하지만 해당 기능 각 프론트 개발자마다 다르게 구현 해놓아 유지보수가 어렵습니다. 그래서 오늘은 긴 텍스틀 알아서 축약해주는 플러그인을 소개하겠습니다. ▼우선 참조 사이트는 아래입니다. nl을 보아 네덜란드 개발자인거 같은데 홈페이지 부터 매우 이쁘네요 자세한 레퍼런스는 해당 홈페이지에서 둘러보세요 http://dotdotdot.frebsite.nl/ 해당 사이트를 참고해 개발자 분들이 빠르게 익힐 수 있도록 익스프레스하게 예제를 만들어봤습니다. ▼jquery와 해당 dotdotdot.js를 참조하였습니다. 1 2 cs ▼우선 사용.. 2017. 12. 24. JavaScript - 프론트에서 서버 시간 얻기 자바스크립트에서 서버 시간 가져오기 서버 시간을 가져오는건 당연히 서버 언어가 제공하는 기능을 사용하는게 정석입니다. 하지만 보안의 문제이거나 특별한 이유에서 프론트엔드로 서버시간을 제공해줄 수 없는 경우도 있습니다. 그래서 오늘은 자바스크립트에서 서버 시간을 가져오는 방법을 알아보려고 합니다. 하지만 프론트에서 서버시간을 얻는건 보안상 취약하기 때문에 가벼운 유효성 체크나 중요하지 않은 로직에 이용되는게 맞습니다. 예전 회사에서 해당방식으로 서버시간을 얻어 DB에 기록하는 방법의 대해 보안 취약점으로 지적했으나 무시하고 넘어가 결국 사고가 터진걸 봤네요.. ▼해당 URL에 공개된 소스가 제가 만들어놓은 소스보다 정리가 잘되어 있어 참조하여 대체 하겠습니다. https://stackoverflow.com.. 2017. 12. 22. 이전 1 2 3 다음
