소금인형 - SW개발자?

jQuery Mobile Button 숨기기 버튼을 숨기는 방법에 $('#아이디').hide()를 해도 안되기에, 찾아보니 Submit 다음과 같은 방법을 사용하면 가능하다. $('#submit_btn').closest('.ui-btn').hide(); 참조: https://stackoverflow.com/questions/7053335/jquery-mobile-cannot-hide-submit-button closet() 가장 가까운 부모 객체를 찾는 것입니다. 참고: https://www.w3schools.com/jquery/traversing_closest.asp 참고: https://api.jquery.com/closest/ 참고: jQuery closest(), parents() 메소드의 차이

jQuery Mobile 화면 최상단으로 Scroll 이동하기 //delegate binding to only links that have the `.top` class $(document).delegate('a.top', 'click', function () { $('html, body').stop().animate({ scrollTop : 0 }, 500); return false; }); 또는 $.mobile.silentScroll()를 사용하면 됩니다. jQuery Mobile has it's own $.mobile.silentScroll() function that scrolls to a particular Y position without triggering scroll event listen..

jQuery 특정 id 객체로 화면 스크롤링 해서 이동하고 싶을때가 있습니다. 예전에는 #Name 태그를 사용했는데. jQuery에서 Id 값을 줘서, 해당 위치로 애니메이션 스크롤링을 할 수가 있습니다. $("#button").click(function() { $('html, body').animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); }); 자연스럽게 (smooth하게) 이동하기 $("#button").click(function() { $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); Scrolling되면서, 투명도 변화시키기 01 $(wi..

jQuery Mobile에서 header bar에 select box를 넣고 싶을때, 다음과 같이 하면 됩니다. My Page Option 1 option 2 ... 참고: https://stackoverflow.com/questions/6569179/jquery-mobile-select-box-in-header

jQuery Mobile 위치 Fixed하기 (스크롤해도 항상 위에 있게) You can customize the search-filter-element's CSS so it is fixed in the viewport. #my-wrapper { padding-top : 45px; } #my-wrapper form { position : fixed; top : 15px; left : 15px; width : 100%; z-index : 1; }​ You'll notice the #my-wrapper selector, I used it to be able to target just the search-input for a specific listview widget. My HTML looks like th..

== 버튼 색상 바꾸기 == jQuery Mobile 에서 버튼의 색상을 바꾸고 싶을때가 있습니다. 상단의 Bar의 같은 경우 class="ui-header ui-bar-b" (ui-bar-a) / data-theme="b"와 같이 테마가 변경이 가능합니다. 버튼은 해당 테마를 주는 방법을 찾지 못해서, 변경하는 방법을 찾아보니. style을 이용해서 수정하라고 하네요. color와 background-color를 이용해서 변견한 부분 Search [그림1. background-color: darkorchid; color:white; 효과] 참고: https://stackoverflow.com/questions/9748337/jquery-mobile-button-background-color == 상단 ..

jQuery Mobile에서 이전 페이지(previous page)로 가는 Back 버튼을 넣을 때, 여러가지 방법이 있는데요. 종종, Back 이렇게 할 경우가 있는데요. 해당방법을 이용하면, 종종 Mobile에서 오작동이 일어날때가 있곤한다. Javascript로 하는 또다른 방법은 $.mobile.back() 을 사용하는 것입니다.Back jQuery Mobile에서 Back버튼에 대해서,추천해주는 방법 data-rel="back"를 이용하길 권해 준다. Back개인적으로 항상 history.back를 썼는데, 다 변경해야 할 것 같다. ㅠ_ㅠ 참조: https://stackoverflow.com/questions/5740934/jquery-mobile-back-button참조속의 링크: Anato..

file이 어떤 종류의 파일인지를 확인할때, MIME타임을 사용하면 가장 정확하다. javascript에서 file.type 속성을 이용하면 좋지만, 브라우저별로, 해당 값을 넘져주기 않을 때가 있어서, 확장자의 명으로 체크하는 방법을 메모해 둔다. 파일의 타입이 pdf인지 비교를 할때, Edge에서 file.type에서 이상한 결과가 나올때가 있다. if(file.type == 'application/pdf' || file.name.toLowerCase().endsWith('pdf')) { //code to execute } file.name.toLowerCase().endWith('pdf') endWidth() 끝부분이 다음과 같이 끝나면, true를 넘겨준다. 참고: https://stackover..

Javascript의 null 과 empty string등 비교 이런식으로 no 연산 var value2 = "" if ( !value2 ) { console.log("비어 있음"); //결과는 여기가 실행. } else { console.log("값이 있음"); } 자바스크립트 자료형에서 false로 반환되는 값은 "", null, undefined, 0, NaN 이 있고 "나머지는 모두 true" if ('' || null || undefined || 0 || NaN) { // ... } else { console.log("여기가 실행"); //결과는 여기가 실행됨. }특정값이 빈 배열( [] ), 빈 객체( {} )가 있을 수 있으며, 0은 실제 비어 있지 않는 특정값 0을 의미 할수도 있지만, 이..

Javascript에 이벤트 리스너 추가하기 addEventListener에서 함수에 parameter를 전달하고 싶다면, 익명을 함수를 사용해야 합니다. var in = document.querySelector('#upload');in.addEventListener( 'change', function(){chooseFile('AA')} ); function chooseFile(t){..생략..} 참고: https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener 함수에 파라미터가 없을때, in.addEventListener( 'change', chooseFile ); function chooseFile(){ .. 생략.. }

Javascript를 통해서, 현제 페이지 이름 가져오기, http://test.com/a.html&a=11 => a.html를 가져온다. https://developer.mozilla.org/en/DOM/window.location alert(location.pathname) If you don't want the leading slash, you can strip it out. location.pathname.substring(1) 참조: Get the page file name from the address bar 페이지 이름 가져오기 var path = window.location.pathname; var page = path.split("/").pop(); console.log( page ); ..

jQuery를 통해서 Video 태그에 컨트롤을 하려고 하면, 찾을 수 없다는 에러가 발생한다.[예제] [Failed 예제]$('#video3').pause() // 찾을 수 없다는 오류 발생 [Sucess 해법]$('#video3').get(0).pause(); // 이렇게 해야 실행이 됩니다. $('#videoId').get(0).play(). (get gets the native DOM element from the jQuery selection.) 출처: https://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery

다른 객체의 클릭 이벤트를 호출 할때, jQuery의 Click()이벤트를 사용하면 유용합니다. 추가로 해당 링크는 화면에 보이지 않게 하려면, 해당 테그를 특정 태그(p,span)을 감싸고, display:none으로 하면 감춰지면서, 해당 링크를 클릭을 사용할 수 있다. Link 참고: https://api.jquery.com/click/

Javascript에서 replace를 사용하면, 처음 발견된 1개의 String(문자)만 처리됩니다. 모든 문자(String)에 변경을 위해서는, replaceAll함수를 선언해서 사용하면 처리된다. (사용예) var foo = fooString.replaceAll('찾는문자열', '변경문자열'); [ Regular Expression Based Implementation ] String.prototype.replaceAll = function(search, replacement) { var target = this; return target.replace(new RegExp(search, 'g'), replacement); }; [ Split and Join (Functional) Implementa..

가끔 우리는 문에 value값을 2개 이상의 값을 사용하고 싶을때가 있다. [그림 1. BEACH를 셀렉트하면, 10, BEACH가 입력을 원할때] substring()과 indexof()를 구분자의 값 split 해서 넣기 jQuery를 이용한 구분자를 두고 양쪽 input값에 정보 넣기 :: All Location Group:: SCHOOL STORE BEACH TOUR (사용 형태 설명) 와 의 value 값에 "10|BEACH"값을 이용해서 ("|"로 구분된 값을 넣기) 10과 BEACH를 따로 추가 하고 싶을때 사용할때 위의 방법을 사용하면 된다. [ cat_no 가져오기 ] 문자의 처음부터 "| "가 나오는 문장까지 substring문장으로 자른다. "|"가 발견되는 문장값을 indexof(문..

출처: http://blog.usabilla.com/pagination-theres-life-webs-old-dog-yet/ Pagination: Why there’s life in the web’s old dog yeton February 11, 2014 / by Oliver McGoughAs web technologies continue to improve, so are the ways in which we experience the internet. In the 23 years of the web, many trends have come and gone. We’ve seen Page Counters come and go, Flash rise and fall, and we’re currently se..

DIV에 이미지를 좌,우 상하 정렬하고 싶을 때가 있다.해당 방법은 간단하지만, 쉽게 구현하는 방법이다.CSS와 Javascript을 이용한 방법입니다. 이미지 CSS + Javascript .mainBtn { min-width: 120px; } .mainImg { width: 122px; max-height: 80px; margin-left:auto; margin-right:auto; text-align: center; vertical-align: middle; } .mainImgFrame { width: 122px; height:80px; border: 1px solid #e9e9e9; background-color: #e9e9e9; } function addPadding(obj){ //(80-$('..

jQuery를 이용한 의 경로 변경하기 이미지 변경 방법은 jQuery의 attr() 함수의 src 속성을 변경으로 가능합니다. .. // 이미지 변경하기 $("#my_image").attr("src","second.jpg"); .. // 이미지 클릭시 변경 $('#my_image').on({ 'click': function(){ $('#my_image').attr('src','second.jpg'); } }); .. // 이미지 클릭시 로테이션으로 변경하기 $('img').on({ 'click': function() { var src = ($(this).attr('src') === 'img1_on.jpg') ? 'img2_on.jpg' : 'img1_on.jpg'; $(this).attr('src', ..

페이스북의 라이브 스트림 다운로드 받기 방법 (해당 방법 FB에서 차단함) 1. 라이브 스트림 페이지 연다. 2. 플레이 한다. 3. 동영상 위에서 마우스 오른쪽 클릭으로 Streaming URL를 복사한다. 4. 새로운 탭에 해당 URL를 붙여 넣는다. 5. URL의 주소값의 www값을 m으로 변경한다. 6. (모바일버전에서) Play한다. 7. 동영상 위에서 마우스 오른쪽 클릭 "동영상을 다른 이름으로 저장.."을 눌러서 저장

RESTFul이란? HTTP Method(POST/GET/PUT/DELETE)을 이용한 통신 기술.HTTP Method의 여러가지중, POST, GET, PUT, DELETE 를 가지고 CRUD(Create/Select/Update/Delect)처리를 한다. 추가로 보세요>http://blog.remotty.com/blog/2014/01/28/lets-study-rest/

Attribute Ends With Selector [name$=”value”]letter라는 이름으로 되어 있는 Element들을 값을 변경하기(dir *ABC 할때, 1ABC, 3ABC 가 검색되듯이 letter가 들어가 요소 select) $("input[name$='letter']").val("a letter");다음과 같이 표시된다. https://api.jquery.com/attribute-ends-with-selector/

https://stackoverflow.com/questions/13434973/how-can-i-get-id-class-or-name-attr-an-element-with-jquery JavaScript $(function () { $('div').click(function () { var elem = $(this); alert('Class: ' + elem.attr('class')); alert('Id: ' + elem.attr('id')); alert('Name: ' + elem.attr('name')); });​​​​ }); HTML CSS ​div { width: 100px; height: 100px; border: 1px solid black; }​ JSfiddle: http://jsfiddl..

Radio 체크 박스 선택하기 https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery jQuery 1.6+ Use the new .prop() method: $('.myCheckbox').prop('checked', true); $('.myCheckbox').prop('checked', false); jQuery 1.5.x and below The .prop() method is not available, so you need to use .attr(). $('.myCheckbox').attr('checked', true); $('.myCheckbox').attr('checked', false); Note ..

Bootstap에서 기본적으로 Toggle 버튼을 아주 쉽게 지원한다. Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 만약에, #demo 영역을 처음에 보여줬다가 누르면 감추기를 원한다다면.class에 "in"을 추가하면, 처음에 나타나고, toggle버튼을 누르면 사라집니다. 참고:https://www.w..

Mobile Photo Gallery Web App모바일을 이용한 photo 갤러리 입니다. JQ와 jQuery Mobile을 이용한 것. == 개인 소견 ==개인적으로 간단한 갤러리용으로는 괜찮지만, 게시판 처럼 만들기는 아쉬움이 많아보인다. [해당 모바일 앱 소개]https://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/ [Demo Stie]https://tympanus.net/Tutorials/WonderwallMobileGallery/#albums_container [Download Source] [ 사진 목록 / 앨범 Thumbs / Photo보기 (Zoom Fit in out가능)]

FootTable Bootstrap & jQuery환경에서반응형 테이블 형식으로 만들어주는 Plug In 프로그램. Pagination / 검색창 필드등이 됩니다. [그림 1. 반응형 테이블 생성] FooTableA responsive table plugin built on jQuery and made for Bootstrap.Fear not, it also works without Bootstrap! http://fooplugins.github.io/FooTable/index.html [파일들] 참고https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

jQuery Bootgrid는 Bootstrap + jQuery를 사용한 Grid를 라이브러리입니다. Bootstrap 환경에 Grid를 아래와 같이 검색과, 페이지네이션등 멋지게 변경할 수 있답니다. [그림 1. Bootgrid 화면] http://www.jquery-bootgrid.com/GettingStarted#intro jQuery Bootgrid 1.3.1 (Source Code)

개인적으로 영문 표기에, 웹에서 사용하기 좋은 폰트인것 같습니다.참고: https://typekit.com/fonts/proxima-nova body { background: white; color: #222222; padding: 0; margin: 0; font-family: "ProximaNova", "Helvetica Neue", "Helvetica", "Segoe UI", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; position: relative; cursor: default;}

html5의 태그에 mp4 파일이 재생이 안될 때가 있습니다. 여러 가지 이유 중에 간단한 원인으로 고생할 때가 있습니다. 원인 중 하나는 비디오의 코덱이 다르기 때문입니다. 태그의 공식적인 지원하는 비디오 코덱은 MP4 H.264이고, 오디오는 AAC or MP3입니다. 간혹 MPEG-4코덱의 mp4를 사용해서 할 때, 플레이되지 않는 경우가 있습니다. 확장자가 mp4 파일의 파일 속성으로 비디오 코덱 확인해 보는 것이 좋습니다. 참고 H.264와 MPEG-4가 차이점을 나온 포스트는 링크해 둡니다. (관련 포스트) MPEG-4와 H.264의 차이? 그리고 영상 압축 패권 이야기 (아래 참조) 일반적으로MP4하면, MPEG-4와 H.264를 같이 봤었는데, 여하튼 자세한 내용은 확인해주시길.. 태그의 ..

출처: https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing network 요청들 리뷰 By default, DevTools records all network requests in the Network panel, so long as DevTools is open. Stop recording network requests To stop recording requests: Click Stop recording network log on the Network panel. It turns grey to indicate that DevTools is no longer recording request..