본문 바로가기

코딩/jquery

모바일,pc 접속 기기 구분하기 var filter = "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile 접속 } else { //pc 접속 } }var filter = "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile alert('mobile 접속'); } else { //pc alert('pc 접속'); } } 출처: https://88240.tistory..
스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기 고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고 있는 경우 오히려 사이트의 사용자경험을 떨어뜨리는 요인이 되기도 한다. 이는 모바일과 같은 뷰포트가 작은 기기들에서는 더욱 그러하다.기존의 단순히 고정된 형태의 헤더 디자인을 제공하는 것 보다는 사용자의 스크롤 방향에 따라 헤더부분을 보여주거나 감춤으로써, 사용자의 의도에 맞는 디자인을 제공하는 것이 목적이다. 즉, 사용자의 스크롤이 아래로 향한다면 콘텐츠를 탐색하길 원하는 것이라 간주..
모바일 팝업 띄울때 부모 스크롤 막고 팝업만 스크롤 되도록! ★모바일에서 팝업 띄울때 부모 창 스크롤 막고 팝업만 스크롤 되게 하기!→ 모바일에서는 overflow-y:hidden;이 안먹어서 이 방법 사용 모바일 스크롤 막기*{ margin:0; padding:0;} .cont { font-size: 30px; font-weight: bold; line-height: 330px; text-align: center;}.cont1 { background-color: #F29B76; }.cont2 { background-color: #EA68A2; }.cont3 { background-color: #32B16C; }.cont4 { background-color: #556FB5; } .nav { overflow: hidden; overflow-y: scroll; pos..
window.onload를 대체하는 jquery의 ready 함수 window.onload 함수는 웹페이지의 로딩이 끝나는 시점에 실행되는 함수다window.onload = function () { alert("로딩 완료"); } 와 같이 사용하게 되면 페이지 로드가 끝난 후에 "로딩 완료" 라는 얼럿창이 뜨게 된다하지만 onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.또한 와 같은 attribute 가 설정이 되어 있는 경우에는 ..
노드찾기 1. 노드 찾기 - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자") - 클래스 이름으로 노드 찾기 : $(".클래스이름") - ID로 노드 찾기 : $("선택자") - 속성으로 노드 찾기 : $("[속성이름=값]") - 찾은 요소 개수 구하기 : .size() , .length - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){}); - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자") - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자") 2. 자식 노드 찾기 - 전체 자식 노드 찾기 -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents() -- 텍스트 노드 제외한 전체 자식 노드 찾기 ..
스크롤 이벤트 ①새로고침하면 맨 위로 올라가기 window.onload = function(){ $('html,body').animate({ scrollTop : 0 }, 400); return false; } ②특정 좌표로 부드럽게 스크롤$('html.body').animate({ scrollTop : 300 }, 500); //300px로 부드럽게 스크롤 ③특정 엘리먼트로 부드럽게 스크롤 var scrollPosition = $('#ID').offset().top; $('html, body').animate({ scrollTop: scrollPosition }, 500); ④클릭시 타겟으로 스크롤 되는 메뉴 만들기 소개 멤버 연락 $('.menu li').on('click', function(){ var scrol..
attr()과 prop()의 차이 attr() prop() HTML의 속성(attribute)을 취급 JavaScript의 프로퍼티(property)를 취급 속성은 HTML Element에 있는 정보 프로퍼티는 JavaScript에서 사용하는 정보 예제1) 버튼 var $goLink = $('.link'); console.log($goLink.attr('href')); // #none 출력 console.log($goLink.prop('href')); //http://localhost:63342/Project/srcFactory/test.html#none 예제2) var $checkbox = $('#chk'); console.log($checkbox.attr('checked')); //checked console.log($checkbox..

티스토리툴바