본문 바로가기

웹 코딩54

나타났다 사라지는 토스트 메시지 - toast alert를 띄우자니 촌스럽고, 모달창은 좀 오바인거 같고... 그럴때 쓸 수 있는 알림창(?) 정식 명칭은 Toast message 라고 하는듯... 암튼 토스트 알림창 jQuery를 썼고, 사라지는 타이머가 주르륵 달려가게 만들어 보았음 아래는 예시: (Result 탭을 눌러보자) jsfiddle.net/alikong/x4duhj95/ html에 추가해주고, CSS 도 추가해주고 toast('저럴수가!!'); 이렇게 메시지를 넣어 쓰면 됨 (기본 값은 3초 노출) toast('저럴수가!!', 1000) 이나 toast('저럴수가!!', "고정") 으로 보여지는 시간 조정 가능 (1000=1초) 현재는 아래쪽에 나오게 되어 있으나, 위로 바꾸고 싶으면 CSS 에서 #toast 의 bottom 을 top.. 2020. 8. 2.
ajax 처리 후 로딩중 감추는 타이밍 $.ajax({ cache: ..., type: "POST", url: "...", data: {...}, success: function (data) { ... }, error: function() { ... }, complete: hideLoading }); (jQuery를 쓴다고 치고.. )보통 위처럼 ajax 호출을 하게 되는데... (물론 .done() 이나 .fail() 로 연계해서 쓸 수도 있고..) 아무튼, 일반적으로 ajax 호출 직전에 로딩중을 보여주고... success 와 error 에 로딩중 감춤을 넣어서 써왔으나, 이번에 ajax로 파일 다운로드 하는걸 하다보니 서버에서 파일이 아직 안왔는데 로딩이 빨리 사라지더이다 그래서 고민하다 complete: 에 hideLoading (=.. 2020. 8. 2.
이미지 클릭하면 다운로드 시키기 가끔 이미지를 브라우저에 보여주는게 아니라 다운로드 시켜야 할 때가 있음 예전 같으면 숨겨진 아이프레임으로 폼을 전송해서 php를 통해 다운로드 시키는 방법을 썼겠지만 요즘엔 더 간단히 자바스크립트나 html 만으로 처리가 가능함 방법 1. a 태그에 download 를 넣어 줌 (확장자를 제외한 파일명을 넣어 줄 수 있음. 없어도 됨) 단점은, IE, Edge, Safari, Opera 는 지원을 안한다는 점과 이미지가 사이트와 같은 도메인에 있어야 한다는 점 방법 2. function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.le.. 2020. 8. 2.
jQuery - delegate 내 취미코딩 실력과 흥미를 한껏 끌어올리는데 큰 공헌을 한 jQuery... 덕분에 온클릭이던 뭐던 제이쿼리로 쉽게 먹이고 쓸 수 있다는건 모두 다 아는 사실... 그러던 중 이미 이벤트 핸들러를 적용한 이후에 생성된 개체들에는 아무 반응이 없어 당황했을 때 delegate 방식을 만나게 되었다. 아래는 예시: (Result 탭을 눌러보자) https://jsfiddle.net/alikong/sf0pjmqz/ 추가 설명: #main 에 li 가 동적으로 버튼을 통해 추가되는 상황에서, 아래와 같이 #main li 에 온클릭을 먹이면 기존에 있던 li 에만 적용된다. $("#main li").on("click", function() { alert(this.innerText); }); 하지만 아래처럼 li .. 2020. 8. 2.
CSS로만 로딩 스피너 만들기 위 이미치처럼 뱅글 뱅글 로딩 이미지를 css로만으로도 만들 수 있음 검색하면 무지 많이 나옴 구글: https://www.google.com/search?q=css+only+spinner&rlz=1C1GCEA_enAU873AU873&oq=css+only+spinner&aqs=chrome.0.0l6j69i60.6351j0j7&sourceid=chrome&ie=UTF-8 아무튼, 복잡하게 만들면 매우 복잡해 질 수 있으나 기본 개념은 아래와 같다. html이 아래와 같다고 했을때, CSS는 아래처럼 된다. #loading { display: none; width: 100%; height: 100%; position: absolute; top:0; left:0; } @keyframes spinner { fr.. 2020. 8. 2.
캔버스에 박스 그리기 Html상 Canvas 에 박스를 그려주는 자바스크립트 테두리가 있거나 없거나 1px 짜리 테두리도 깔끔하게 여러 박스 겹침 가능 채우기 색상과 테두리 색상에 투명도 적용 가능 캔버스 id 가 canvas 라고 가정했을때... function drawBox2canvas(ctx, x, y, w, h, color, borW, borColor) { if (!borW) { borW = 0; } ctx.fillStyle = color; ctx.fillRect(x+(borW), y+(borW), w-(borW*2), h-(borW*2)); if (borW) { ctx.lineWidth = borW; ctx.strokeStyle = borColor; ctx.strokeRect(x+(borW/2), y+(borW/2).. 2020. 8. 1.

티스토리툴바