본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ

IT기술/javascript25

jQuery] 마우스 클릭하면 마우스 근처에 나타나는 레이어 툴팁(Tooltip) 마우스를 클릭하면 마우스 우측하단에 레이어가 나오는 소스다. 만약 레이어가 브라우저 창의 너비나 길이를 벗어나게 되면 반대의 위치에 레이어를 보여준다. 반대의 위치에 레이어를 보여줬더니 기준점(0,0)을 벗어나게 되면 기준점(0,0)에 레이어를 배치한다. 위 샘플 각 환경에 맞게 수정해서 사용 가능하다. Head 1 css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .imgSelect { cursor: pointer; } .popupLayer { position: absolute; display: none; background-color: #ffffff; border: solid 2px #d0d0d0; width: 350px; height: 150px; padding.. 2018. 10. 30.
팝업창에서 부모창의 함수 호출 방법(opener) 팝업 기능을 이용해야 할 때가 가끔씩 아주 가끔씩 있다. 그런데 버튼 하나로 팝업창 작업 후 부모창도 어떤 작업을 수행하도록 구현하는게 좋을 때가 있다. 팝업창으로 사진을 올려서 저장시켰을 때 이미지가 바로 보여지게 한다거나, 리스트로 가게 한다거나 하는 것 처럼 말이다. 그러면 예시를 하나 만들어 보겠다. 부모창 1 2 3 4 5 6 7 8 9 10 11 12 var parentWindow; function openCBAWindow(){ parentWindow = window.open('', 'CbaWindow', 'width=410, height=450, resizable=0, scrollbars=no, status=0, titlebar=0, toolbar=0, left=300, top=200' );.. 2018. 10. 30.
자바스크립트(Javascript) display 속성 이용해서 숨기기 보이기 함수 하나로 영역 또는 개체 보이게 하거나 사라지게 할 수 있다. 이런 기능을 토글 기능 이라고 하는데, 더보기 버튼/숨기기 버튼으로 구현도 가능하다. document.getElementById() 함수로 특정 개체의 ID를 가져와서 처리해야 하는데, 즉 이 기능은 해당 영역 또는 개체가 ID를 가지고 있어야 작동한다. javascript에서 Id를 가져와서 동적으로 DIV 개체의 display 속성을 block 또는 none으로 변경하는 원리다. 소스를 통해 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var bDisplay = true; function doDisplay(){ var con = document.getElement.. 2018. 10. 30.
Layer Pop-up (레이어 팝업) http://webclub.tistory.com/189 참조함 html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 일반 팝업레이어 Thank you. Your registration was submitted successfully. Selected invitees will be notified by e-mail on JANUARY 24th. Hope to see you soon! Close 딤처리 팝업레이어 1 Thank you. Your registration was submitted successfully. Selected invitees w.. 2018. 10. 7.
[jquery] 팝업 창(윈도우) 크기 변경 (window.innerHeight window.outerHeight) 자바스크립트에서 팝업 창을 띄울 수 있다. 그런데 그냥 띄우기만 해서는 의미가 없을 수도 있다. 팝업창의 사이즈가 일정하면 훨씬 깔끔하게 출력이 가능하며, 원하는위치에 배치 할 수록 더 깔끔하기 때문이다. 이를 jQuery를 이용하여 구현할 수 있다. 자바스크립트의 width, height 변경은 웹표준 문제 때문에 웹 개발자들이 꺼려하는 부분 중 하나다. 자바스크립트에서 지원되는 크기 관련 속성은 clientHeight, innerHeight, outerHeight, screenHeight 등 여러가지가 존재 하는데, 가장 문제가 되는 부분은 브라우저별로 각 속성의 값이 다르게 해석 된다는 점이다. 게다가 같은 브라우저에서도 버전에 따라 서로 다른 속성과 계산법이 사용되기 때문에 작업을 완료 하더라도 .. 2018. 10. 7.
substring과 substr의 차이점 문자열을 잘라서 써야 할 때 쓰는 함수가 2개 있다. 물론, 다른 함수들도 많이 있지만, 대표적으로 많이 사용되는 함수가 substring과 substr 이다 이 두개의 함수는 문자열을 자르는 공통점이 있으나 차이점도 있다. 아래를 보면 이해가 쉽다. 1 2 3 4 var str = "abcdefg"; alert("substr : " + str.substr(2,4)); // 첫번째 예시 alert("substring : " + str.substring(2,4)); // 두번째 예시 substr을 했을 때, 위 처럼 문자열이 잘린다. (몇 번째부터, 얼마나) 이런 뜻이다. substring을 했을 때, 위처럼 문자열이 잘린다. (몇 번째부터, 몇 번째까지) 이런 뜻이다. 2018. 10. 7.
jquery ajax 요청 에러: 200 : SyntaxError: Unexpected Token 다음과 같은 에러 발생 시 ajax 요청 했던 속성 값을 확인해보자.dataType 부분이 받는쪽과 매칭되는지 확인하기 2018. 10. 6.
[jquery] 플로팅 배너 자동으로 따라다니는 jQuery 소스 플로팅 배너가 자동으로 사용자의 스크롤을 따라다니는 jquery 소스. 플로팅 배너의 css 를 absolute로 잡고, jquery 의 animate() 를 이용하여 사용자의 스크롤 이벤트 후 배너를 애니메이션과 함께 위치를 움직여준다. easing 옵션을 이용하여 애니메이션 효과도 줄 수 있다. CSS 1 2 3 4 5 6 7 8 9 #floatMenu { position: absolute; width: 200px; height: 200px; left: 50px; top: 250px; background-color: #606060; color: #fff; } jQuery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 $(document.. 2018. 10. 6.
SELECT BOX 선택시 내용을 텍스트박스에 출력하기 이런 기능이 필요할때는 다음을 활용하자 * 입 금 은 행 : -선택하세요- 국X은행 기X은행 우X은행 주X은행 * 입 금 계 좌 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 www.webmadang.net * 입 금 은 행 : -선택하세요- 국X은행 기X은행 우X은행 주X은행 * 입 금 계 좌 : 2018. 10. 6.
Cannot read property 'getElementsByTagName' of null 오류 자바스크립트를 쓰다보면Cannot read property 'getElementsByTagName' of null 오류가 날 때가 있다. 이는 document.body 안에 해당 Name 의 값을 읽지 못했을 때 생기는 오류다. 값을 읽지 못하는 경우는 다음 과 같다.1. name값이 잘못 되었을 때2. name값이 만들어지기 전에 script가 실행되었을 때더 있을지도 모르나 내경험상 크게는 저 둘 중 하나다. 1. 의 해결방법은 name값을 맞게 고치면 된다. 그러나 2. 의 경우는 스크립트가 소스의 상단, 즉 스크립트가 해당 name이 있는 줄 보다 상단에 있을 때 발생했다.스크립트 소스를 body 의 하단에 배치하면 오류가 해결 가능하다. 2018. 10. 6.
테이블 행 추가, 열 추가 행이나 열을 동적으로 추가하고 싶다면 다음 소스를 이용하자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 .. 2018. 10. 6.
자바스크립트 이벤트 루프 강의 https://www.youtube.com/watch?v=8aGhZQkoFbQ 2018. 10. 6.

티스토리툴바