jQuery Selector로 iframe 제어하는 방법

jQuery를 이용해 iframe 내에서 부모 document 그리고 부모 document 내에 존재하는 다른 iframe에 접근하는 방법을 우선 정리해보고 이를 응용할 수 있는 예시를 한 번 더 정리해보겠습니다. iframe 내에서 부모 document 접근 방법 iframe 내에서 부모 document의 다른 iframe 접근 응용 : iframe 내 document의 height 값을 구해 iframe의 height 값을 세팅 jQuery를 버리고 Vanilla JS로Continue reading “jQuery Selector로 iframe 제어하는 방법”

[jQuery] 선택된 select의 option text 가져오는 방법

예전에 선택된 radio 버튼의 값을 가져오는 방법에 대해 포스팅을 한 적이 있습니다. 조금은 성격이 비슷한 내용이지만 이번에는 select box의 value 값이 아닌 option 에 담겨 있는 텍스트를 가져오는 방법을 소개 합니다. 보통 select의 선택된 값을 가져오기 위해서는 이런 방법을 사용합니다.

select_box라는 ID를 가진 셀렉트박스의 change 이벤트. 즉, 선택을 하게 되면 콘솔 로그로 선택된 요소의Continue reading “[jQuery] 선택된 select의 option text 가져오는 방법”

[jQuery] input text 클릭 시 텍스트 전체 선택하는 방법

간단하지만 단 한번의 구글링이라도 자비 없이 포스팅 합니다. 웹 페이지에서 텍스트를 입력할 수 있는 input text 상자를 클릭하면 텍스트를 모두 선택하는 간단한 내용입니다. 텍스트 복사나 선택을 구현할 때 혹은 귀찮을때 종종 사용합니다. 아래 처럼 input 박스가 있다고 가정합니다.

  위 텍스트를 클릭하면 전체 선택이 되는 코드는 아래와 같습니다.

  해당 요소의 텍스트를 .select()Continue reading “[jQuery] input text 클릭 시 텍스트 전체 선택하는 방법”

[jQuery] .on 이벤트에 파라미터 전달하는 방법

이벤트 처리 시 사용하고자 하는 변수가 전역변수라면 상관이 없지만 지역변수인 경우 인자로 정의를 해주어야 합니다. 전역변수를 .on 이벤트 핸들러에서 사용 시

  지역변수를 .on 이벤트 핸들러에서 사용 시

  이벤트 타입 인자 뒤에 JSON 형태로 파라미터를 추가해주시면 위와 같이 지역변수값을 전달받을 수 있습니다.

[jQuery] IE에서 scrollTop animate 효과 동작하지 않는 문제 해결 방법

흔히 버튼을 클릭하여 스크롤을 부드럽게 이동시키는 효과는 animate를 이용하여 scrollTop 속성을 변화시킵니다. 이때 IE에서는 코드가 동작하지 않는 경우가 있습니다. 아래 코드는 IE에서 동작하지 않습니다.

scrollTop 속성에 0을 부여해 문서를 최상단으로 이동시키는 스크립트 입니다. 크롬이나 파이어폭스에서는 동작하지만 IE에서는 동작하지 않습니다.   그렇다면 이 코드를 동작하도록 수정해보겠습니다.

크게 바뀐 부분은 없습니다. 셀렉터 부분이 “html body”에서Continue reading “[jQuery] IE에서 scrollTop animate 효과 동작하지 않는 문제 해결 방법”

[jQuery] 폼 전송시 “maximum call stack size exceeded” 에러 해결 방법

로그인 폼을 만들어 테스트하는 도중 콘솔에서 아래 에러 메세지가 출력됩니다. “maximum call stack size exceeded” (IE에서는 “스택 공간 부족”으로 출력) 발생한 위치는 jQuery 코어 파일이었고 이 뜻은 jQuery 자체 문제라기보다는 어디선가 잘못 사용되고 있을거란 확률이 컸습니다. 일반적으로 위 에러가 출력되는 경우는 크게 2가지 입니다. 동일한 스크립트(.js) 파일을 중첩되게 호출한 경우 잘못된 코드로 인해 무한 루프를Continue reading “[jQuery] 폼 전송시 “maximum call stack size exceeded” 에러 해결 방법”

[jQuery] 스크립트로 select option 선택/변경하는 방법

jQuery를 이용해 select의 옵션을 원하는대로 변경하는 방법을 소개해드립니다. 이런 경우 사용이 되겠습니다. 옵션을 선택하고 다시 셀렉트 박스를 초기화 해야하는 경우 버튼을 클릭하거나 특정 이벤트가 발생하는 경우 자동으로 셀렉트 박스의 옵션을 변경해야 하는 경우   코드는 아래와 같습니다. 방법1. on change 이벤트 함수 내 사용하는 경우

  방법2. 외부 스크립트에서 select의 값을 변경하는 경우

Continue reading “[jQuery] 스크립트로 select option 선택/변경하는 방법”

[jQuery] 팝업창으로 POST 폼 전송하는 방법

팝업창으로 폼을 전송하는 경우가 종종 있어 정리합니다.

form 구성은 위와 같습니다. 일반적으로 사용할때와 좀 다른 점은 target 을 사용한다는 것인데 이는 frame이나 iframe으로 폼 전송을 할 때도 동일합니다.  

전송 버튼을 클릭시 popup_window라는 이름의 빈 팝업창을 띄우고 myform이라는 폼을 submit 시킵니다. form의 target 값을 읽어 popup_window라는 팝업창으로 폼 전송을 하게 됩니다. get으로 팝업창에Continue reading “[jQuery] 팝업창으로 POST 폼 전송하는 방법”

[JS] 중첩된 문자열 제거하는 방법

한 텍스트 구문에서 중첩되는 문자열을 제거하는 함수입니다. 예를 들어 “사과;;;바나나;;파인애플;배;;;포도;” 라는 문자열이 있을때 중복된 세미콜론을 제거하고 하나의 세미콜론만 가지게 하고 싶습니다. 즉, “사과;바나나;파인애플;배;포도;” 로 변환하고자 합니다. 이 때 흔히 아래와 같이 replace를 이용해 치환합니다.

하지만 결과는 “사과;;바나나;파인애플;배;;포도;” 가 될 것입니다. replace가 한 번 더 실행되어야 원하는 결과를 얻을 수 있습니다. 중첩문자(세미콜론)이 3개 있을땐 2번, 4개 있을땐 3번Continue reading “[JS] 중첩된 문자열 제거하는 방법”

[jQuery] draggable 스크롤바 버그 문제 해결 방법

jQuery ui에는 draggable라는 드래그 메소드가 있습니다. 아래와 같이 원하는 앨리먼트에 지정해주면 마우스 드래그로 이동이 가능하게 됩니다.

하지만 draggable 기능에 문제가 하나 발결되었습니다. 예를 들어 myDiv라는 영역안에 iframe이나 overflow:scroll 속성이 있는 요소가 존재하는 경우 스크롤바가 생성될겁니다. 문제는 이 스크롤바를 클릭하면 draggable 이 적용된 부모 앨리먼트가 드래그 상태가 풀리지 않는 상태로 마우스를 계속 따라다니게 됩니다. 이를 해제하는 방법은 새로고침이나Continue reading “[jQuery] draggable 스크롤바 버그 문제 해결 방법”