웹관련/JavaScript-Jquery45 [자바스크립트] 모바일에서 PC버전보기 쿠키로 처리하기(웹,모바일 별개웹사이트) 일반적으로 모바일에서 PC버전 보기를 사용을 해야할때 쿠키로 값을 남겨서 처리하도록 하는 방법입니다. 아래의 방법을 사용하는 경우는 웹사이트와 모바일 사이트가각각의 웹사이트로 따로 존재할경우 아래와 같이 적용을 해야합니다. 만약 하나의 웹사이트로 http://도메인/mobile 처럼 되어있는경우다른 방법으로 진행을 해야한다. [해당 방법을 보려면 이곳을 클릭] 저는 이방법을 생각하기 전에는 URL뒤에 파라미터 속성을 같이 넘겨서ASP또는 PHP에서 해당 파라미터를 확인후 스크립트를 적용했었습니다. 그렇게 되면 모든 링크URL에 불필요한 파라미터 속성이 항상 따라 붙어야 함으로써 정말 무식한 방법이였죠..... 파라미터를 붙히지 않고 별도의 URL링크에 계속 PC버젼임을 요구하는 파라미터를 안넘겨도 구연하.. 2017. 12. 29. [Jquery] 동적생성 이벤트 관련하여 올바른 ON메소드 사용방법 일반적으로 제이쿼리에서 동적으로 생성되는 요소에 이벤트를 주기위해선 ON 이라는 메소드를 사용해서 줘야합니다. 근데 ON 메소드도 어떻게 주는냐에 따라서 동적요소에 이벤트가 작동할수도 안할수도 있습니다. 우선 잘못된 방법입니다. [잘못된 ON 메소드 사용방법]$('viewSl > li > img').on("mouseenter",function(){var this_img = $(this).attr('src');console.log(this_img)}); 이렇게 document가 아닌 해당요소를 직접선택을 하여 on메소드를 사용하면 동적으로 요소가 생성됬을때 ON 이벤트를 사용했음에도 불구하고 동적인 요소에서 이벤트가 전혀 동작을 하지 않습니다. 반드시 ON이벤트를 사용할때는 document 를 사용하여 O.. 2017. 12. 28. [자바스크립트] 모바일에서 스크롤에 따른 메뉴 숨기기 일반적으로 UX관점으로 볼때 모바일의 경우 상단에 메뉴가 고정이 되면 고정되는 만큼 공간을 항상 낭비를 하게 됩니다. 모바일은 화면이 작기 때문에 상단 메뉴가 고정된 부분까지 내용을 보여줄수 있다면 더 좋습니다~ 일반적으로 모바일에서 스크롤을 내릴때는 해당글을 읽고 다 읽으면 뒤로 가기 또는메뉴를 다시 보기위해 마우스 스크롤을 위로 올리게 됩니다. 만약 마우스 스크롤을 내릴땐 상단고정된 메뉴가 안보였다가마우스 스크롤을 올리게 되면 메뉴가 보이게 한다면 UX적인 관점에서 상단히 편할것입니다. 해당기능을 JS적인 부분에서 살펴보면 아래와 같이 구연을 할수 있습니다. $(function(){var FirstScroll = 0;var prevScrollTop = $(window).scrollTop(),tp = .. 2017. 11. 29. [자바스크립트] Bx슬라이드에 패럴랙스 움직임 추가 무료 슬라이더 중에 가장 괜찮다고 생각하는 BX슬라이더 BX슬라이더에 패럴랙스 기능을 넣어보고 싶어서 작성을 해봅니다. HTML JS $('.topBg_sl').bxSlider({ mode:'fade', auto:true, speed: 1500, pause: 7000, wrapperClass: 'bx_topBg_sl', controls: false }); // 패럴랙스 구현부분 function parallax(){ var scrolled = $(window).scrollTop(); $('.topBg_sl_imgAll').css('background-position-y',-(scrolled * 0.3) + "px"); } 이렇게 하면 패럴랙스 구현이 됩니다 ^^ 2017. 10. 31. [자바스크립트] 숫자가 카운팅되도록 보여지는 효과 가끔 웹들을 보면 숫자가 카운팅 되면서 올라가는 듯한 효과를 넣은 홈페이지들이 있습니다 아래 예제를 참고하세요~~ function numberCounter(target_frame, target_number) { this.count = 0; this.diff = 0; this.target_count = parseInt(target_number); this.target_frame = document.getElementById(target_frame); this.timer = null; this.counter(); }; numberCounter.prototype.counter = function() { var self = this; this.diff = this.target_count - this.count;.. 2017. 10. 31. [자바스크립트] 이벤트함수에서 e와 window.Event 둘다 사용하는 이유 자바스크립트를 활용하면서 이벤트 함수를 사용할때 보면 e 와 window.Event 를 같이 사용해야 합니다. 이유가 무엇일까요? 이유는 우리가 흔히 크로스브라우징 때문입니다. 망할... 인터넷 익스플로러는 e 구문을 이해하지 못합니다... 그래서 window.Event 구문을 같이 작성을 해주는것입니다. 그럼 어떻게 작성을 해야하나요?? test.onclick = function(e) { e = e || window.Event; ... ...} 이렇게 작성을 하면 됩니다. 여기서 || 이부분이 OR연산자 처럼 구분을 해줍니다. || 이 구분 앞에 구분자를 인식하면 앞에 구문을 사용하고... 앞에 구문을 이해를 못하면 뒤에 구문을 사용하게 됩니다. 익스플로러에선 e 라는 구문을 모르기때문에 || 구분자 .. 2017. 10. 30. [자바스크립트] 익스,크롬,사파리,파이어폭스 즐겨찾기 추가하기 즐겨찾기 기능을 Jquery 로 구연한부분입니다.on 메서드를 이용하여 구연하였습니다. jquery 부분 $('#favorite').on('click', function(e) { var bookmarkURL = window.location.href; var bookmarkTitle = document.title;var triggerDefault = false; if (window.sidebar && window.sidebar.addPanel) { // Firefox version < 23 window.sidebar.addPanel(bookmarkTitle, bookmarkURL, ''); } else if ((window.sidebar && (navigator.userAgent.toLowerCase()... 2017. 5. 26. [Jquery] 버블버블 효과 버블버블 효과 제이쿼리입니다~ [ HTML ] [ CSS ] .center-outer { display: table; width: 100%; height: 100%; } .center-inner { display: table-cell; vertical-align: middle; text-align: center; } .bubbles { display: inline-block; font-family: arial; position: relative; } .bubbles h1 { position: relative; margin: 1em 0 0; font-family: 'arial'; font-size:50px; color:#fff; z-index: 2; } .dh-bubble { position: absolu.. 2017. 3. 31. [자바스크립트] 고정된 배경을 패럴랙스 하는방법 일반적으로 CSS로 배경을 고정시키게 할땐 아래와 같이 간단하게 코드를 할수 있습니다. 하지만 뒷배경이 고정은 되지만 몬가 입체적으로 고정된거 같은 느낌은 없죠.... 그래서 자바스크립트로 좀 추가하여 마우스를 드래그 할때 고정된 뒷배경이 같이 살짝움직이도록 움직임을 줘보았습니다 기본인 제이쿼리를 연동한 다음 현재 스크롤의 위치를 scrolled 라는 변수에 저장하여백그라운드 이미지가 있는 aa 라는 클래스에 백그라운드 위치값을 현재스크롤 값에서0.4를 곱하여 미묘하게 움직이도록 했습니다. ^^ 2017. 3. 29. 이전 1 2 3 4 5 다음
