calc함수를 사용하면 css상에서 연산이 가능하다.


javascript단에서 연산해서 적용하는 수고를 덜어준다.


사용법은 간단하다.


width: calc(100%/3);


이런식으로 나누기 연산이 가능하며


width: calc(100%/3 - 20px);


이렇게 하면 3을 나눈후 20px를 빼준다.

'hybrid app > css3' 카테고리의 다른 글

[css3] div 안에서 줄바꿈  (0) 2015.07.23
[css3] ios overflow scroll 부드럽게 하기  (0) 2015.05.14
[css3] 미디어쿼리 세로모드 가로모드 구분  (0) 2014.02.19
[css3] CSS3를 마스터하는 것을 도와줄 튜토리얼 30선  (0) 2014.02.03
[css3] css3 3d transform sample  (0) 2013.12.23

toUpperCase()와 toLowerCase()를 사용하면 됩니다.


var string='UPPER lower';


string=string.toUpperCase();

console.log(string); //UPPER LOWER


string=string.toLowerCase();

console.log(string); //upper lower

'javascript' 카테고리의 다른 글

[javascript] 빈배열 비교  (0) 2014.11.28
[javascript] border, padding이 포함된 width구하기  (0) 2014.11.05
[javascript] Firefox offsetX, offsetY(layerX, layerY)  (0) 2014.08.25
[javascript] 공백제거  (1) 2014.08.22
[javascript] location.href 에서 target=_blank 효과 사용  (0) 2014.07.02

상대적인 마우스 이벤트 좌표는 event객체의 offsetX, offsetY프로퍼티를 사용한다.


하지만 Firefox는 지원하지 않습니다.


layerX, layerY프로퍼티를 사용하면 됩니다.


var offsetX = (event.offsetX || event.layerX);

'javascript' 카테고리의 다른 글

[javascript] border, padding이 포함된 width구하기  (0) 2014.11.05
[javascript] 대문자, 소문자 변환  (0) 2014.08.28
[javascript] 공백제거  (1) 2014.08.22
[javascript] location.href 에서 target=_blank 효과 사용  (0) 2014.07.02
[javascript] JavaScript Puzzlers!  (0) 2014.02.08

file -I 파일이름

'기타' 카테고리의 다른 글

loader generator  (0) 2016.11.25
[php] 문자열 포함 확인 함수 strpos()  (0) 2014.10.06
Parallex Scrolling 홈페이지 모음  (0) 2014.07.18
webstorm, phpstorm 자동완성 설정  (0) 2014.02.26
웹에서 레고 조립하기  (0) 2014.02.03

테스트를 하던중 Mac의 FireFox에서는 mp4가 재생되지 않는 문제가 발생함


FileFox홈페이지에 들어가 보니 아래와 같이 아직 Mac에서는 mp4가 지원되지 않고 있었습니다.




​
​

​

아래 페이지를 Mac과 Window의 FireFox로 들어가 보면 직접 눈으로 확인해 볼 수 있습니다.



'hybrid app > HTML5' 카테고리의 다른 글

[html5] Cross Document Messaging (postMessage, onmessage)  (0) 2014.07.23
모바일에서 숫자 자동전화걸기 자동 링크 방지  (0) 2014.03.24
[HTML5] 구글에서 제공하는 webgl sample  (0) 2013.12.23
[HTML5] HTML5 Rocks 한글 페이지  (0) 2013.10.28
[HTML5] Safari on iOS 7 and HTML5: problems, changes and new APIs  (0) 2013.10.14

1. 앞 공백제거

string = string.replace(/^\s*/, "");


2. 뒤 공백제거

string = string.replace(/\s*$/, "");


3. 앞, 뒤 공백제거

string = string.replace(/(^\s*)|(\s*$)/g, "");


4. 모든 공백 제거

string = string.replace(/(\s*)/g, "");

'javascript' 카테고리의 다른 글

[javascript] 대문자, 소문자 변환  (0) 2014.08.28
[javascript] Firefox offsetX, offsetY(layerX, layerY)  (0) 2014.08.25
[javascript] location.href 에서 target=_blank 효과 사용  (0) 2014.07.02
[javascript] JavaScript Puzzlers!  (0) 2014.02.08
[javascript] 중괄호 위치  (0) 2013.11.19

git update-index --assume-unchanged 파일경로

'Git' 카테고리의 다른 글

Synology nas에 git설치하기  (0) 2014.04.16
git 간편 안내서  (0) 2013.05.29

iframe으로 데이터를 전달하고 받는 방법을 찾다가 알게 되었다.


크로스 도큐먼트 메시징(Cross Document Messaging)을 사용하면 


두개의 웹 페이지가 서로 메시지를 주고 받을 수 있다.


Cross Document Messaging의 장점은 서로 다른 도메인에 존재하는 페이지끼리도 메시징이 가능하다.


Same Origin Policy에 적용받지 않아 도메인을 넘나드는 연동 구조에 적합하다.


데이터 전송하기

window.postMessage(data, [ports], targetOrigin)


data : 전달할 메시지

ports : 메시지 포트(생략 가능)

targetOrigin : 메시지를 수신받는 도메인을 지정한다. 대상이 특정 도메인이 아니라면 *로 지정


데이터 수신하기

데이터 수신하는 측에서는 window객체의 message 이벤트를 구현하면 됩니다.

window.onmessage = function(e){

console.log(e.data, e.origin, e.source);

}

data : 송신한 데이터

origin : 메시지를 보내는 곳의 도메인 정보

source : 메시지를 보내는 윈도우 객체


처음에 iframe으로 데이터를 전달하고 받는 방법을 찾다가 Cross Document Messaging을 알게 되었다고 했는데 


직접 예제를 보면


test1.html

<!DOCTYPE html>

<html>

<head></head>

<body>

<button onclick="sendMessage();">Send</button>

<iframe id="test1" src="test2.html" width="800" height="500"></iframe>

<script type="text/javascript">

function sendMessage(){

var dest = document.getElementById("test1");

dest.contentWindow.postMessage("iframe으로 보내는 메세지","*");

}

</script>

</body>

</html>


test2.html

<!DOCTYPE html>

<html>

<head></head>

<body>

test2.html

<script type="text/javascript">

window.onmessage = function(e){

alert(e.data);

}

</script>

</body>

</html>



test1.html에서 send버튼을 누르면 test2.html로 전송하여 메시지를 출력해 준다.


'hybrid app > HTML5' 카테고리의 다른 글

[html5] Firefox mac에서 video mp4 재생 문제  (0) 2014.08.22
모바일에서 숫자 자동전화걸기 자동 링크 방지  (0) 2014.03.24
[HTML5] 구글에서 제공하는 webgl sample  (0) 2013.12.23
[HTML5] HTML5 Rocks 한글 페이지  (0) 2013.10.28
[HTML5] Safari on iOS 7 and HTML5: problems, changes and new APIs  (0) 2013.10.14

http://www.creativebloq.com/web-design/parallax-scrolling-1131762

'기타' 카테고리의 다른 글

[php] 문자열 포함 확인 함수 strpos()  (0) 2014.10.06
Mac 터미널에서 mime type 보기  (0) 2014.08.22
webstorm, phpstorm 자동완성 설정  (0) 2014.02.26
웹에서 레고 조립하기  (0) 2014.02.03
Trello 의 boards 로딩시간을 단축하기위해 1주일동안 한 작업들 - Fog Creek Blog  (0) 2014.01.24

:.,$d

'Linux' 카테고리의 다른 글

[Linux] 리눅스 명령어 위치 확인  (0) 2015.01.15
[Linux] 디렉토리, 파일용량 확인하기  (0) 2014.06.17

+ Recent posts

티스토리툴바