웹솔루션개발 25년 노하우! 해피CGI의 모든것

조직의 조직도나, 구성원들의 구성도를 쉽게 웹페이지에 표시하는 용도로 사용하면 좋을것 같습니다. 첨부된 파일을 다운로드 받아서 압축을 해제한후 demo/index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 여러가지 유형의 예제들을 데모로 확인이 가능합니다. 구성원 위에 표시되는 좌우 아이콘을 이용해서 구성도를 접었다가 펼쳤다가 하는 예제입니다. 화면에서 구성도를 편집하는 것도 예제가 있습니다. 검색하고자 하는 단어로 필터링 해서 관계가 연결된 구성원만 보여주는 것도 가능하네요. 지도와 연결해서, 구성원을 클릭하면 해당 구성원이 있는 위치로 이동하는 예제도 있습니다. 각 구성원들의 정보를 클릭하면, 아이콘으로 추가로 표시해주는 것도 있습니다. 그 외에도 여러가지 예제들이 있으며, 어떤 조..

* Freezeframe.js Freezeframe.js는 애니메이션 .gif를 일시 중지하고 마우스 오버 / 마우스 클릭 / 터치 이벤트에서 애니메이션을 적용하거나 수동으로 트리거 할 수있게 해주는 라이브러리입니다 * License MIT License * 사용방법 첨부된 압축파일을 다운로드하여 적용할 디렉터리에 압축을 해제합니다 Freezeframe 을 적용할 html 파일을 열어 js파일을 호출합니다 적용할 gif 애니메이션 파일을 img 태그로 호출하고 class 명을 지정한후 아래와 같이 스크립트를 호출하여 적용할 수 있습니다 위와 같이 적용하였을때에 이미지 클릭을 통한 애니메이션 작동여부를 확인하실 수 있겠으며 코드의 적용 샘플을 확인하실 경우 첨부된 파일중 freezeframe.js-mast..

사용자가 커스터마이징이 가능한 대화창입니다. 브라우저 우측 하단의 알림혈 대화창 출력도 가능합니다.

* Auto Typer JS 애니메이션 타이핑을위한 플러그인. Chrome, Firefox, Safari, Internet Exploer 에서 사용가능 * License MIT License * 이용방법 사용법은 비교적 간단합니다 첨부된 압축파일을 다운로드하여 원하는 경로의 디렉토리에서 압축해제합니다 html 문서 상단부에 디자인에 필요한 style 파일을 호출합니다 초기문구 삽입 및 타이핑 효과가 들어갈 영역을 아래와 같이 넣어줍니다 타이핑 효과를 적용하기 위한 js 파일 호출 및 스크립트 옵션을 선업합니다 위와 같이 작성하게 되면 button 요소 클릭시 타이핑효과가 아래와 같이 진행되는것을 확인하실 수 있습니다 스크립트 정의 옵션에 해당 하는 속성의미는 아래와 같습니다 selector : 대상 요소..

html5 에서 지원되는 audio, video 태그를 이용해서 오디오나, 동영상을 웹페이지에 재생해줄때 간단하게 오디오나, 비디오를 컨트롤러를 CSS를 이용해서 조절하는 플러그인입니다. 다운받은 압축파일의 압축을 해제한후, audio_demo.html 파일을 웹브라우저로 열어보면 오디오를 재생하기 위한 컨트롤 예제를 볼수 있습니다. video_demo.html 파일을 웹브라우저로 열어보면 동영상을 재생하는 버튼 및 플레이타임, 현재 재생되는 구간, 재생시간, 사운트크기, 전체화면으로 등등을 조절하는 컨트롤이 커스텀 된 것을 확인할 수 있습니다. html 태그를 보면 video 태그에 styleishe 를 줘서 제작자가 컨트롤을 커스텀할수 있도록 간단합니다. 비디오나, 오디오의 컨트롤을 비교적 간편하게 ..

jquery 버전 2.1.0 에서 최적화된 소스로 본 소스내에 라는 booklet 고유 jquery 소스를 적용하고, 핵심소스인 $(function() { //single book $('#mybook').booklet(); //multiple books with ID's $('#mybook1, #mybook2').booklet(); //multiple books with a class $('.mycustombooks').booklet(); }); 값을 이용한 다양한 option 을 적용하여 효과적인 UI 를 구현할 수 있습니다. https://builtbywill.com/booklet/#/documentation 위 링크를 통해 다양한 옵션설정을 확인할 수 있으며, https://builtbywill.c..

.scrollTop() 을 이용하여 스크롤시 지정한 값까지 이동하면 상단으로란 버튼이 노출되고 클릭시 부드럽게 상단으로 이동하며 버튼이 사라지는 자료입니다. 버튼 .scroll {position: fixed; left: 50%;bottom: 50px;display: none;} 버튼을 하단 고정으로잡고 숨깁니다. $( window ).scroll( function() { if($(this).scrollTop() > 400 ) { $('.scroll').fadeIn(); }else{ $( '.scroll' ).fadeOut(); } } ); 지정한 값만큼 스크롤시 버튼이 보이고 아니면 사라집니다. $('.scroll').click(function(){ $('html, body').animate({ scro..

Simple Responsive Lightbox Gallery with CSS & jQuery 를 소개 합니다. 사이트의 설명에는 jQuery 를 사용했다고 나와 있지만 실제 코드를 보면 jQuery 를 사용하고 있진 않습니다. ^^ 생각보다 가벼운 Script 와 CSS 를 사용하여 플러그인 반응이 빠릅니다. 이미지 출력 방식은 팝업 모달 방식으로 이미지를 표시합니다. 반응형코드로 모바일에서도 작동하는데 문제가 없습니다. 저는 index.html 을 이용하여 확인해 보았습니다. 생각보다 소스는 간단 합니다. CSS 호출 2개와 jQuery 호출 1개가 끝입니다. ^^

Jquery 를 이용하여 백그라운드로 영상을 재생하는 자료을 소개해 드립니다. 해당 자료는 Youtube 영상을 백그라운드로 구동시키면서 영상 컨트롤에 포커스가 잡혀 있네요. 저는 자료 다운로드 후 examples/demo.html 을 구동시켜 봤는데 잘 되네요 ^^ 주요기능을 간략하게 설명 드립니다. -여러개의 youtube 영상 주소를 이용하여 플레이 리스트를 구성할 수 있습니다. -플레이 리스트를 기준으로 셔플 재생이 가능 합니다. 그리고 github 사이트에서는 api 를 제공 합니다. ^^ https://github.com/pupunzi/jquery.mb.YTPlayer/wiki 위의 메서드 외에도 있을만한건 다 있네요 ^^

텍스트를 입력하면 자동으로 높이가 늘어납니다. 스크립트 소스상에 지정된 높이보다 늘어나게 되면 스크롤바가 출력되고 더 이상 높이가 증가하지 않습니다. $('#contact-form').on( 'change keydown keyup paste cut', 'textarea', function () { $(this).height(0).height(this.scrollHeight+2); if ($(this).height() >= 300) { $('textarea#message').css("overflow", "auto"); } else { $('textarea#message').css("overflow", "hidden"); } }).find('textarea#message').change(); /* alter..