잡담소장소

프로젝트 진행 중에 제공해야 할 검색기능이 있어서 autocomplete같은 플러그인을 찾아봤는데 대부분 태그 형식의 UI라서 내가 하고자하는 기능 구현을 위해 좀더 검색하다가 발견하게된 jquery-typeahead jQuery Typeahead | jQuery Plugin Registry jQuery Typeahead by Tom Bertrand jQuery plugin that provides Typeahead (autocomplete) Search preview from Json object(s) via same domain Ajax request or cross domain Jsonp and offers data compression inside Local Storage. The plugin i..

bootstrap-table 사용 시, sidePagination 값을 server로 둘 경우 sort 하지 않는다!그래서 처음 생성 시 sortName, sortOrder를 줘도 의미가 없다-_-;SQL에 order by 를 넣어서 반환받은 값을 돌려주도록 하자.. ajax로 데이터를 가져와서 넘겨주면 load 함수가 실행된다 BootstrapTable.prototype.load = function (data) { var fixedScroll = false; // #431: support pagination if (this.options.sidePagination === 'server') { this.options.totalRows = data.total; fixedScroll = data.fixedS..

하.. 이걸 처리하려고 얼마나 삽질했던가.. 크롬이 업데이트 되면서 404 이미지들에 대해 엑박노출을 하지 않게 되었다. 이미지에 삭제 버튼을 올려놓았는데 이미지가 노출이 안되니 버튼도 노출이 안되서 매번 개발자가 손수 처리해줘야 하는 상황이 되었기에 404 이미지에 대해서는 빈 이미지를 올려주어 버튼이 노출되도록 하고자 시작하였다. 처음에 처리했던 코드는 아래와 같다 $(function(){ $("img").on("error", function(){ var uri = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; //blank image code $(this).attr('src', uri); }); }); er..

file upload 부분을 만들어야 하는 일이 있어서 대충 file 태그 추가 했다가 파일 업로드 플러그인 써보는게 어떻냐는 말에 찾아보고 너무 맘에 들어 바로 적용... 시도한게 이번 삽질을 시작하게 된 이유이다. github에 친절하게 가이드가 되어있다고 생각했으나 .............ㅎㅏ...한숨만.. 일단 제일 맘에 들었던 basic plus ui 를 테스트 해보았다 분명 필요한 코드를 다 넣었다고 생각했는데 제대로 작동하지 않는 것이었다 ;ㅁ; 일단 스크립트 부분. // tmpl.js가 있다면 반드시 있어야 하는게 이 템플릿들이다. 템플릿 Id는 변경할 수도 있고 따로 만들 수도 있다. 내부에 있는 html 코드는 모두 추가해서 보여주는 것까지 완료후에 좀더 컴팩트하게 만들어 볼까 해서 b..

뭐부터 적어야할까-_-;;신나게 삽질한 탓에 혼란스럽기만 하다 ㅠㅠ 일단 나의 목표는 ㅡ1. img 태그에 이미지를 로드한다2. 해당 이미지의 가로, 세로사이즈를 얻어낸다3. 해당 사이즈에 맞춰 fancybox를 띄운다.ㅡ 이었다. 로드 후에 작업을 하기 위해서 .load()를 사용하였는데 ㅡ 기본적으로 jQuery 사용내가 여기서 개념적으로 착각한 부분이.load()를 loading 이라고 생각해버린 것이다. ㅡ loaded인데 lllorz이게 첫번째 삽질이고 두번째 삽질은 .load() 안에서 img 태그에 올려진 이미지의 사이즈를 알기 위해서 $("#img").width()를 호출한 것이다. 이 부분은 아직도 모르겠지만 아무튼 그로 인해 load의 여부를 알기 위해서 구글링하고.width() 호출해..

템플릿의 헤더에 해당하는 파일에 모든 자바스크립트를 걸어놓고( jquery, fancybox 외 유틸 js등.)컨텐츠 부분에서에서 헤더에 있는 스크립프 파일들을 다시 로드할때jquery 같은경우는 문제 없이 로드되었는데fancybox나 ckeditor, uploadify 같은 유틸 파일들이 2중으로 불려서 에러가 난다.jquery 파일은 ci 내부에서 알아서 거른건진 모르겠지만..아무튼 중복으로 들어가지 않게 헤더에 포함된 스크립트는 다시 로드하지 않는게 가장 깔끔하더라... 처음엔 fancybox에서만 2번 불려서 에러가 난줄알았는데애초에 jquery 파일도 두 번 안부르는게 나았다..script가 어떻게 불리는지 궁금...ㅠㅠ누가 설명안해주려낭...-_-;;; $ 대신에 jQuery를 쓰면 문제가 없..

html상에서 id값을 주면 document.location.hash를 이용해서 이동할 수 있다. document.location.hash = "#hash1"; 그런데 연속으로 호출하게 되면 화면이 이동하지 않는 현상이 보였다.그래서 jQuery에서 scrollTop을 이용하였다 $(document.body).scrollTop($("#hash1").offset().top); 참고로 scrollTo 라는 jQuery Plugin이 있다.

html 요소들이 아닌 본문에 호출된 image를 load시에 변경하고 싶을 때ㅡ 보통 jQuery를 load시 호출하고 싶으면 $(document).ready 를 사용했는데위의 상황의 경우는 $(window).ready $(window).load()를 호출해야된다.그렇지 않으면 이미지가 먼저 로드되면 적용되고 나중에 로드되면 적용되지 않는 확률적 변화가 생김-_-;; 자세한 설명은 아래 블로그에서..http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/ IE 에서는 $(window).load()가 작동하지 않는다.$(function() 을 이용해야 함 ( or window.on..

img의 id나 name을 넘기지 않고 한번에 처리하는 방법 $('.class img').each(function() { var maxWidth = 100; // 이미지의 최대 가로 사이즈 var maxHeight = 100; // 이미지의 최대 세로 사이즈 var ratio = 0; // Used for aspect ratio var width = $(this).width(); // 현재 이미지의 가로 var height = $(this).height(); // 현재 이미지의 세로 //현재 이미지가 최대 이미지보다 큰지 체크 if(width > maxWidth){ ratio = maxWidth / width; // 이미지의 비율 구함 height = height * ratio; // 비율에 맞는 가로,..

file size 가져오기 $("#attachment").change( function() { alert( this.files[0].size ); }); 선택된 파일 삭제하기 function clear_file() { var file = $("#attacthment"); file.replaceWith( file = file.clone( true ) ); } http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery 에서 발췌 * 겸사겸사 bit 사이즈 변환 사이트 http://www.flightpedia.org/convert/bit-and-byte.html file size를 가져올때 bit 단위로 가져오므로 제한두고자..