코딩/제이쿼리23 [페이지인식] 페이지 인식소스 업그레이드 버전 웹사이트 코딩을 할 때, 현재 페이지가 어느 위치에 속해 있는지 메뉴에 표시를 해주고 싶을 때가 있다. 예전에 블로그에 쓴 글은 각 페이지마다 jquery 스크립트를 넣어 일일이 eq값을 입력해서 on class를 붙여주는 방식이었는데.. 지금 생각해보면 매우 비효율 적인 방법.. 이번에는 자동으로 페이지 location 값을 가져와서 on class를 붙여주는 방법을 써보겠다. 물론 인클루드 상태일 때도 가능하다. 공통 스크립트 파일에 스크립트를 한번만 넣어주면 됨. html 마크업 예시 메뉴1 메뉴2 메뉴3 메뉴4 on 클래스 스타일을 만들어주고.. .sidebar-menu li {width:100px; height:30px; color:darkgray;} .sidebar-menu li.on {col.. 2022. 6. 1. [javascript] 브라우저 전체화면 스크립트 브라우저를 전체화면(풀스크린)으로 전환해주는 버튼 스크립트. 전체화면 버튼을 클릭하면 웹브라우저가 전체화면으로 변경되는 동시에, 창모드 버튼이 활성화 되고 전체화면 버튼은 비활성화 된다. 창모드를 버튼 클릭시 웹브라우저는 이전 크기로 돌아가며 전체화면 버튼이 활성화되고 창모드 버튼은 안보이게 된다. HTML 전체화면 창모드 CSS .close-fullscreen {display: none} javascript var doc = document.documentElement; // 전체화면 설정 function openFullScreenMode() { if (doc.requestFullscreen) doc.requestFullscreen(); else if (doc.webkitRequestFullscreen.. 2021. 8. 19. [jquery] 셀렉트박스 선택시 다른 셀렉트박스 설정옵션 selectbox 옵션 선택시, 2차 selectbox가 옵션에 따라 다르게 보여야 할 때 사용하는 스크립트. HTML 게임값 ▲ / ▼ 홀짝 로또 상태값 ▲ ▼ = 홀 짝 홀홀 홀짝 짝홀 짝짝 1 2 3 4 5 jQuery // search form selectbox $('select[name=search_game]').change(function(){ var $this = $(this).val(); $(this).closest('.form-row').find('select[name=' + $this +']').siblings().hide(); // 보여야 할 select박스를 제외한 select를 가림 $(this).closest('.form-row').find('select[name=' + $thi.. 2020. 9. 16. bootstrap 드롭다운 메뉴 hover시 작동하도록 부트스트랩 4.x 버전에서 hover에 대한 data 설정이 빠져버린것 같다;클릭시만 드롭다운되도록....navbar 사용시 너무 불편한것 같아서 hover시 열리도록 스크립트를 찾아봄. css .dropdown-toggle::after { transition: transform 0.15s linear;}.show.dropdown .dropdown-toggle::after {transform: translateY(3px);}.dropdown-menu {margin-top: 0;} /* hover 메뉴때문에 넣음 */ jquery var $dropdown = $(".navbar-nav .dropdown"); var $dropdownToggle = $(".dropdown-toggle"); var $dropd.. 2020. 9. 1. document ready 를 순수 javascript로 jquery를 쓰지 않고 순수 javascript로 ready()를 대체하는 코드. document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded }); 참고로, $(document).ready(handler); 는 사용을 피하는 것이 좋다고 한다. 아래 글 참조. https://github.com/codepink/codepink.github.com/wiki/%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-ready()-%EB%8.. 2019. 4. 24. [모바일앱] 스크롤 이벤트 막기 사이드바 열렸을 때, 배경이 스크롤 되는 현상 막기 $('#side-nav').on('click', function (e) { $('#sidenav-overlay').addClass('active'); /* Disable scroll */ $('.contents').on('scroll touchmove mousewheel', function(e){ e.preventDefault(); e.stopPropagation(); return false; }); }); $('#sidenav-overlay').click(function() { $('#side-nav').offcanvas('hide'); $('#sidenav-overlay').removeClass('active'); /* Enable scroll */.. 2017. 11. 21. [부트스트랩] 이중 모달창 Multiple Modal창 띄울 때 아래 스크립트를 추가한다.구글에서 찾은 값은 count가 없어서 2개까지만 열 때 가능한 것이고3중, 4중으로 계속 띄울 때가 있을 것 같아서 소스를 조금 수정함. //Bootstrap multiple modalvar count = 0; // 모달이 열릴 때 마다 count 해서 z-index값을 높여줌$(document).on('show.bs.modal', '.modal', function () { var zIndex = 1040 + (10 * count); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zInde.. 2017. 7. 24. [script] 브라우저, 모바일 체크 브라우저 체크하는 스크립트 // Opera 8.0+ var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Firefox 1.0+ var isFirefox = typeof InstallTrigger !== 'undefined'; // Safari 3.0+ "[object HTMLElementConstructor]" var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!w.. 2017. 3. 28. [jquery] a링크 클릭시 상단 이동 취소 코딩할때 아래와 같은 코드를 매우 많이 활용한다. a태그를 만들어서 이벤트를 호출할때 사용한다.클릭 이벤트 그럴때, 항상 href의 #(해시)가 동작하면서.. 상단으로 스크롤이 튕기는 현상이 발생하는데이것을 막으려면 아래와 같이 이벤트 안에 preventDefault 매소드를 추가해서 동작을 취소시켜주면 된다.function onclick(event) {event.preventDefault();//event} 그런데 이 소스가 IE에서 에러가 날때가 있다. preventDefault가 IE에서 안통한다.크로스브라우징을 고려한다면 아래와 같이 작성하면 된다! function onclick(event) {event.preventDefault ? event.preventDefault() : (event.ret.. 2017. 2. 23. 이전 1 2 3 다음