Study/JavaScript/JQuery9 url(path)을 비교하여 메뉴 active 하기 var url = window.location;// for sidebar menu entirely but not cover treeview$('ul.sidebar-menu a').filter(function() { return this.href == url;}).parent().addClass('active');// for treeview$('ul.treeview-menu a').filter(function() { return this.href == url;}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active'); window.location을 이용하여 url을 가져오고,메뉴의 링크와 비교하여 같다면 active class를 추가한다. 2018. 8. 13. [jQuery] iframe youtube 재생, 일시정지, 중지 제어 유튜브 영상을 사이트에 붙이려면 원하는 동영상에 가서밑의 캡처처럼 공유버튼 -> 소스코드에 있는 iframe 코드를 복사해서 사용하면 된다. 근데...재생 일시정지 중지를 따로 버튼을 만들어 제어해야하는 일이 발생하였다!그럴땐 1. src에 마지막에 아래의 쿼리스트링을 붙인다. ?enablejsapi=1&version=3&playerapiid=ytplayer 위 캡쳐를 예시로 들면 2. 제어할 버튼에 이벤트 추가$(".stop").on("click", function(){ $("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');}); stopVideo, playV.. 2017. 7. 27. [모바일웹] 메인메뉴를 터치 슬라이드 방식으로 만들기 네이버(http://m.naver.com) 이나 다음(http://m.daum.net)의 모바일버전을 보면메인메뉴 영역을 스와이프해서 전체 메뉴를 훑을 수 있게 만들어졌다. 이 기능을 만들어 보고자 개발자 모드로 확인하였더니 css의 transform, transition 등을 이용해서 만든 것으로 보였다.그래서 나는 trans관련 css와 함께 스와이프 동작을 인식해야하므로 jquery의 touchstart, touchmove, touchend를 이용해서 만들었다.참고로 touchstart, touchmove, touchend는 마우스로는 작동이 안되고 핸드폰에서만 작동하는 것을 확인하였다. 2017. 1. 16. 동적으로 생성된 태그에 이벤트 주기! 처음 작성된 html코드는 $("#target").on("click", function(){ 이벤트 });이런식으로 작성하면 이벤트가 잘 먹었다.근데 append나 prepend, before, after로 생성한 태그에는 이벤트가 먹지 않았음! 주륵 열심히 구글링 한 결과 저 코드를 조금만 응용하면 된다고 함(참고로 1.7 이후버전) $(document).on("click", "#target", function(){ 이벤트 }); 대충 정리하면 $(document).on(1, 2, 3) 1 -> click, mouseover, keyup 등의 이벤트2 -> 타겟태그(#은 id, .은 class)3 -> 함수 2016. 3. 9. 웹에 파워포인트(PPT) 띄우기 나도 포폴사이트 만들 때 PPT를 올리고싶었는데 도저히 방법을 못찾아서하나하나 장인정신 펼쳐서 캡쳐하고 붙여넣고 편집하고 했는데생활코딩 그룹에 같은 고민의 글이 올라왔다 댓글들이니 참고하고 찾아보기 1. ppt file format2. http://www.microsoft.com/web/solutions/powerpoint-embed.aspx3. http://lab.hakim.se/reveal-js/#/ -> reveal.js4. slide.js, slick.js5. mssppt parser 관련 라이브러리 찾아서 ppt를 이미지 변환 하여 뿌리기 2015. 12. 28. [jquery] 10가지 태그 클라우드 플러그인 1. AddyWaddy jQuery Tag Cloud 2. IndyArmy jQuery Awesome Cloud 3. Tag Clouds – Styling and Adding Sort Options 4. DynaCloud – dynamic tag cloud with jQuery 5. jQuery Rotating 3D Tag Cloud 6. jCloud Tag Cloud Plugin 7. jQCloud Word Clouds 8. Prataes jQuery Tag Cloud 9. jQuery Tag Cloud Plugin 10. TagCanvas – HTML5 Canvas Tag Cloud 참고 : http://www.websanova.com 2013. 3. 13. 이전 1 2 다음
