본문 바로가기

분류 전체보기266

bootstrap에서의 tab 전환 이벤트 받기 bootstrap의 tab을 사용시 tab이 전환할때의 이벤트를 받아야 할때가 있다.그때는 shown.bs.tab를 통해 본 이벤트를 캐치해주면 된다. 아래의 링크에 그에대한 설명이 잘 나와있다. https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change modal도 그렇고 jquery에서 boostrap의 ui에 대한 이벤트 정의를 잘 해준거 같아서 매우 편리하다. 2017. 6. 1.
masorny 구현하기 bootstrap을 통해 masorny를 구현할 일이 최근에 생기게 되었다.masorny 구현 방법은 생각보다 어렵지 않았다.아래의 링크에 bootstrap을 써서 직접 구현하고 있는데,CSS 및 HTML 구조가 그리 복잡하지 않다. 핵심은 CSS 코드에서 column-width 속성이다.본 속성의 단위를 현재 em으로 정해주고 있는데,실제 홈페이지에 적용할때는 가로형 사이즈에 반응하는 vw 단위로 바꾸어주니까반응형으로 잘 나왔다. 참고로 column-width는 적혀진 값만큼의 사이즈로 홈페이지를 컬럼으로 나누는 기능이다.자세한 설명은 아래의 링크를 참고하면 된다. https://www.w3schools.com/cssref/css3_pr_column-width.asp 2017. 6. 1.
jquery에서 레이어 바깥을 클릭시 해당 레이어가 사라지게 하는 방법 흔히 popup 버튼과 그에따른 레이어를 만들었을때,팝업 레이어의 바깥 쪽을 클릭하는 이벤트가 발생할시레이어가 사라지게 하는 기능을 구현해야될 때가 있다. 본 기능을 jquery로 구현하기위해 구글을 검색한 결과아래의 링크에서 간편한 방법이 나와있었다. http://poponyang.tistory.com/entry/jQuery-레이어-바깥-클릭할-때-레이어-사라지게-하는-방법 2017. 6. 1.
node.js 에서 주의해야 할점 response.end() 로 값을 보낼때는 반드시 안의 파라메터가 string이어야 한다.그래야 오류가 나지 않는다.간단하지만 이것때문에 최근에 약간의 시간을 낭비했다. 그리고 참고로 string으로 보내기 싫으면 response.send()를 쓰면 된다. 2017. 5. 20.
ajax에서 값을 넘겨줄때 주의해야 할점 최근 ajax에서 json값을 node.js로 넘겨줄 일이 있었다. 그런데 node.js에서 자꾸만 json으로 넘겨준 값이 배열로 찍히고 있었다.(이 문제로 인해 한참을 고생했다..) 알고보니 ajax에서 값을 넘겨줄때 string이 아닌 다른 값으로 넘겨줄 경우에 자기가 형변환을 하는 경우가 발생함을 알게 되었다. 그래서 ajax로 보내줄께 JSON.stringify() 함수를 통해 string으로 형변환을 해주어 보내주고,서버에서 JSON.parse를 통해 다시 json으로 변경해 주었다.그랬더니 제대로 작동됨을 알 수 있었다. 또 하나 주의할 점은 만약 ajax에서 dataType이란 속성에 json을 할당했다면,이는 넘겨주는 값 그리고 받는 값 모두 json 형식으로 해줘야 한다는 뜻이다.(만약.. 2017. 5. 19.
parallex scrolling 만들기 마우스로 페이지를 스크롤 하면 그에따라 그림이나 영상이 유동적으로 바뀌는것을 보았을 것이다.이러한 것을 parallex scrolling방식이라고 부르는데,본 parallex scrolling을 구현하는 것을 찾아보니 그렇게 어렵지 않았다. 아래는 우리의 친절한 w3schools에 올라온 강좌이다. https://www.w3schools.com/howto/howto_css_parallax.asp 2017. 5. 18.
홈페이지 다언어 지원을 위한 i18next.js 라이브러리 사용법 홈페이지를 배포함에 있어 다언어 지원 기능은 매우 중요하다고 할 수 있다.최근 이러한 언어지원 기능을 쉽게 할 수 있는 i18next.js라는 라이브러리를 찾게 되었다.본 라이브러리는 사용법도 간단하다. 아래는 reference 사이트이고 친절히 잘 설명되어있다. http://i18next.com/docs/ 물론 주의할 점이 있다면 본 라이브러리가 동작하려면,해당 스크립트는 번역하려는 페이지 보다 먼저 로딩되면 안 되기에 맨 아래다 기입해줘야 한다. (라이브러리 선언은 위에다 해도 된다.)초반에 이것때문에 에러 생긴것 빼고는 그 다음과정들은 무난했다. 2017. 5. 17.
유용한 javascript 모음 사이트 유용한 javascript 라이브러리를 잘 모아놓은 사이트를 공유한다.본 사이트에서는 각 분야별로 또는 전체로 어떠한 javascript 라이브러리가 인기있는지 보여주고 있다. https://www.javascripting.com/ 2017. 5. 17.
modal 팝업 이벤트 정지시키기 최근 조건에 따라 modal의 팝업 기능을 멈추게해야하는 일이 있었다.modal같은 경우에 팝업을 멈추게 할 수 있는 이벤트를 찾아본 결과 아래와 같은 결과를 얻었다. $('#modal').on('show.bs.modal', function (e) { e.preventDefault();}) 저기에 id 값은 팝업 div의 id 값이다.그리고 오른쪽에 show.bs.modal은 modal 팝업이 뜨기전에 실행되는 이벤트이다.고로 해당 modal 이벤트에 e.preventDefault()를 적용하면 본 팝업을 막을수 있다. 이외에도 shown.bs.modal, hide.bs.modal, hidden.bs.modal 등이 있다. 본 이벤트에 관해서는 아래의 사이트를 참고하면 된다. https://v4-alph.. 2017. 5. 16.

티스토리툴바