Loading...

IFRAME과의 DOMAIN 간 통신

IFRAME과의 domain 간 통신http://softwareas.com/cross-domain-communication-with-iframes/HTML5 시대의 업데이트 (2011 년 5 월 6 일)이 게시물은 수년에 걸쳐 크게 논평되고 연결되어 왔으며 계속해서 많은 트래픽이 발생하므로이 중 많은 부분이 최신 브라우저와 관련성이 없음을 분명히해야합니다. 한편으로는 보안 정책을 조정하고 강화하여 여기 일부 기술을 더 이상 적합하지 않게 만..

iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기.

iframe resizer 를 사용할 때 페이지간 이동시 화면 제일 위로 위치하기..https://davidjbradshaw.github.io/iframe-resizer/메인 페이지parentIFrame 을 사용할려면 enablePublicMethods 를 true 로 설정해야 사용 가능 합니다.<!DOCTYPE html><html><head> <meta charset="utf-8..

keyup 에 delay 딜레이 설정하기

keyup 에 delay 딜레이 설정하기1. 함수를 별도로 빼서 clearTimeout 함수로 사용하기<input class="title" name="input" /><script type="text/javascript"> var itcdelay = (function () { // Function var itcTimer = 0; return function (callback, ms) ..

javascript 로 파라미터 parse 해서 piwik 의 eventname 추가하기

http://도메인?analy=1000 이런식으로 들어오면 자바스크립트로 파싱해서 piwik 에서 처리한다.<script>        var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substr..

행복얼라이언스 iframeresizer 활용

iframeresizer 활용행복얼라이언스부모창<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"><head> <title&g..

Javascript 의 this 키워드 사용법과 setTimeout 알아보기

javascript 에서 this 키워드는 기본적으로 전역 객체를 참조합니다. 그래서 this.변수에 값을 할당하면 전역 객체에 할당이 됩니다. 그리고 기본적인 setTimeout 으로 호출하면 기본적으로 this 가 전역객체를 바라봅니다.하지만 object 를 바라보게 this 를 조정할 수도 있는데 이때 bind, appy, call 함수로 object 를 넘기면 전역 객체가 아닌 object 의 객체를 바라봅니다.this.lu..

Javascript 의 전역과 지역 함수 및 변수에 대해 알아보자

JavaScript에는 전역 및 지역의 두 가지 범위가 있습니다.  함수 정의의 외부에 선언된 변수는 전역 변수이며 프로그램 전체에서 이 값에 액세스하여 수정할 수 있습니다.  함수 정의의 내부에 선언된 변수는 지역 변수입니다.  이 변수는 함수가 실행될 때마다 만들어지고 소멸되므로 함수 외부의 코드에서 액세스할 수 없습니다.  블록 범위 변수의 특별한 경우를 제외하고는 Java..

select 태그의 특정 option 태그 비활성화 하기 (jQuery)

select 태그 값 중에 특정 하나의 option 을 비활성화 시켜서 클릭이 안되도록 하는 방법이 있는데요.간단하게 option 의 속성 중 disabled 를 기재하면 글은 보이지만 선택이 되지 않습니다.https://www.w3schools.com/tags/att_option_disabled.asp<select>  <option value="volvo" disabled>Volvo</..

jquery-number 은 숫자 형태를 다양한 문자 형태 제공

https://github.com/customd/jquery-numberjQuery 1.6 이상에서 작동이 되며, 2015년 이후로 업그래이드 된 부분은 없네요.jquery-number 은 숫자 형태를 문자형태로 표현해 주는 부분인데, table 에 값이 숫자형태이고 이를 화면에 출력할 때 금액 형태로 콤마를 보여준다던가 소수점을 반올림 한다던가 할 때 유용합니다.Basic number formattingThe number method takes u..

jQuery 로 구현한 url 파싱하는 방법

jQuery 로 구현한  url 파싱하는 방법$(document).ready(function () {    var url = 'http://jquerybyexample.net/codes/code-repository?id=12#top';    //Create a new link with the url as its href:    var a = $('<a>', {  &nb..

jQuery append 행추가 및 삭제

jQuery 행추가 및 삭제<button id='btn-add-row'>행 추가하기</button><button id='btn-delete-row'>행 삭제하기</button><hr><table id="mytable" border="1" cellspacing="3"> <tr> <th>제목</th> <th>일시<..

jQuery 로 파일 업로드 라이브러리 FileUp

http://www.jqueryscript.net/form/jQuery-AJAX-File-Uploader-FileUp.htmljQuery 로 파일 업로드 할때 좋은 라이브러리 인듯 싶네요.FileUp is a simple, flexible, customizable jQuery file upload plugin which makes it easy to upload your local files to servers via AJAX requests, wi..

jQuery 로 파일 업로드 로딩바 구현하기

클라이언트 단에서 파일을 처리하는 로딩 바랄 구현하는 부분이며, 실제 서버에서 처리하는 부분은 없음을 알고 사용해야 합니다. $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentCom..

Amazon S3 를 javascript 자바스크립트로 upload 업로드 하기

먼저 CORS 환경을 아래와 같이 설정해 줍니다.  그리고 나서 사용이 가능합니다.http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.htmlConfiguring CORSBefore the browser script can access the Amazon S3 bucket, you must first set up its ..

랜덤 위치 jQuery

랜덤 위치 jQueryhttps://codepen.io/kaypooma/pen/tAfwm?editors=1111html<div id="rand_pos" class="rand"></div><div id="pos_log" class="log">x: 0<br />y: 0</div><button class="new_pos">New position</button>css.rand {&n..

백그라운드를 슬라이드 형식으로 변환해 주는 멋진 vegas 오픈 소스이다.

백그라운드를 슬라이드 형식으로 변환해 주는 멋진 vegas 오픈 소스이다.http://serenity.is/demoVegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.https://github.com/jaysalvat/vegas

jquery 자동 행 추가 및 이벤트 핸들러 설정

https://jsfiddle.net/shimpark/6Lxf55rq/html<button id="btnGenerateTable">Generate Table</button><br><div id="parentHolder"></div>jsvar bookDetails = [];bookDetails.push(["Book Id", "Book Title", "Author"]);bookDetails.push(..

작은 이미지를 큰 이미지로 보고 닫기 기능

작은 이미지를 큰 이미지로 보고 닫기 기능http://jsfiddle.net/a8c9P/<div id="overlay"></div><div id="overlayContent">    <img id="imgBig" src="" alt="" width="400" /></div><img id="imgSmall" width="200" src="http://www.freeimages..

이전 브라우저 ajax 의 put, delete 안 될 경우 어찌하나??

jquery 에서 ajax 함수에 put, delete 가 오래된 브라우저에서는 작동이 안된다는 말이 많네요.http://stackoverflow.com/questions/2456820/problem-with-jquery-ajax-with-delete-method-in-iehttp://programmers.stackexchange.com/questions/114156/why-are-there-are-no-put-and-delete-methods-on..

jQuery 를 통해 자동 행 추가 및 삭제

  jQuery 를 통해 자동 행 추가 및 삭제를 해주는 부분입니다.   Dynamically add and remove elements with jQuery    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Add M..

ajax 으로 more 버튼 누르면 jquery 의 append 로 추가하기

  ajax 으로 more 버튼 누르면 jquery 의 append 로 추가하기   실행화면   http://demo.codelikeaboss.com/loadmore/     소스 설명   http://codelikeaboss.com/ajax-based-load-more-results-with-jquery-mysql-and-php/      ..

jquery 에서 아래에서 위로 스크롤링 하는 라이브러리

  jquery 에서 아래에서 위로 스크롤링 하는 라이브러리   http://richhollis.github.io/vticker/  

html 5, history 의 pushState, replaceState 뒤로가기

<form id="msgbox" action="#" method="get"> <fieldset> <label for="msg">state message</label> <input id="msg" type="text" value="" /> <input id="type" type="hidden" value="" /> <d..

jquery 를 활용한 qTip2 툴팁( tooltip)

  qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework.   http://qtip2.com/   아래는 데모사이트이며, 소스 설명도 자세히 기재되어 있습니다.     http://qtip2.com/demos   위의 데모를 보면 알다시피, 형태는 다양..

2015.09.23 01:06

js-sequence-diagrams 로 다이어그램을 그려보자(오직 영문만...)

이 소스는 js - sequence - diagrams 이라는 오픈 소스인데, 마치 UML 을 그리듯이 보인다.단순한 영문 글자와 방향키 조합으로 만들 수 있다. 아쉬운 점은 한글이 기재 되지 않는다는 점이다.오픈소스 위치는 아래와 같습니다.https://github.com/bramp/js-sequence-diagrams아래 JS 파일을 참조한다.<script src="underscore-min.js"></script> <..

jQuery 에서 mouseover, mouseleave, click 함께 사용하기

on 함수를 통해 mouseover, mouseleave, click 함수를 함께 기술할 수 있다. 테스트는 여기서... http://jsfiddle.net/ZqfTX/ $('#bg').on({    mouseover: function(){        $(this).css({background: '#F93'});    },&n..

HTML5 web storage - Localdb.js 알아보기

HTML5 introduces the following two mechanisms localStorage: Stores data without any expiration date (만기일 없이 데이터를 계속 저장한다.) sessionStorage: Stores data for a specific session; the data will be deleted as soon as the session ends. (세션이 종료되면 ..

2015.04.05 01:04

막대 그래프 bar chart c3js 알아보기

bar 차트 중에 제일 좋아 보인다. 마이너스 숫자도 잘 처리되어 있다.http://c3js.org/samples/chart_bar.html여기서 끝난게 아니다. 막대 그래프를 가져다 대면, 표 형식으로 보여주는게 매력이네요.코드도 구현하기 쉽다.이미 구현한 chart 객체를 호출하기 위해 간단하게 chart.load() 함수를 통해 그려지며,뭔가를 돋보이도록 1초 후에 그려지도록 하는 시뮬레이션을 하기 위해, 아래처럼 load() 함수 내부에 기술..

json 으로 넘어온 string 값을 parseJSON 으로 json 객체를 만들고, 이를 for 문으로 추출해 오는 방법

  json 으로 넘어온 string 값을 parseJSON 으로 json 객체를 만들고, 이를 for 문으로 추출해 오는 방법   /********************************** example **************************************/   var base_url = 'http://people.cs.uct.ac.za/~swatermeyer/VulaMob..