안녕하세요.

 

스마트에디터를 모바일에서 사용할 경우 지정한 높이를 벗어나게 되면 상단 도구와 하단이 사라지게 되는 문제가 발생하는 경우가 있습니다.

 

해당 문제의 해결 방법은

 

smarteditor2/js/smarteditor2.js에 옵션 변경을 통해 해결 할 수 있습니다.

1. nBodyHeight = this._getResizeHeight(); >> 주석처리

2. smarteditor2/smart_editor2_inputarea.html 에서 <body class="se2_inputarea" style="display:table 추가"... >

 

 

여기저기 문제였다는 게시글은 있지만 해결책이 없는것 같아 이렇게 내용을 올리게 되었습니다.

 

또 이미지 크기의 해당 모바일 크기보다 커지는 경우 px로 잡히는 문제가 있는데요. 

해당 해결은 smarteditor2/css/smart_editor2_in.css안에다가 .se2_inputarea img { max-width:100%; }  해당 옵션을 넣어주면 됩니다.

 

스마트에디터의 모바일 크기가 px로 잡히게되어 모바일 크기를 넘어갈 경우의 해결방법은

smarteditor2/js/smarteditor2.js에서 $init : function(sDefaultEditing...{}함수안에

 

this.elEditingAreaContainer.style.width = oWdith.nSize + oWidth.sUnit;  >> 주석 처리

 

if(oWidth.sUnit === "px"){

     elAppContainer.style.width = (oWidth.nSize + 2) + "px";  >> 주석처리 

}

 

해당 두개의 width를 자동으로 잡는 부분만 주석 처리하시면 모바일 기기의 크기에 맞게 에디터가 나오게됩니다.

 

저처럼 하나하나 옵션을 살펴가며 고생하시지 마시고, 제가 올린글을 보면서 빠른 개발하시기를..

궁금하신거는 댓글 남겨주세요.

'javascript' 카테고리의 다른 글

javascript 동적 변수 선언 eval  (0) 2019.12.26
(javascipt) 팝업 닫기시 유투브 영상 종료하기.  (0) 2018.02.20
parabola.js 이용한 포물선 이미지 구현하기.  (0) 2018.02.01
모바일 ios에서 iframe width:100% 안 될때.  (2) 2017.12.27
javascript 애드센스 다는 방법 - 초급  (0) 2017.08.24

자바스크립트에서 동적으로 변수를 선언할 때.

 

간단 예제,

eval("playButton_"+i+" = document.querySelector('#toggleplay_"+i+"')");

eval("muteButton_"+i+" = document.querySelector('#togglemute_"+i+"')");

eval("playButton_"+i).addEventListener('click', onTogglePlay(i));

eval("muteButton_"+i).addEventListener('click', onToggleMute(i));

 

eval("vrView_"+i).on('ready', onVRViewReady(i));

eval("vrView_"+i).on('play', function() {});

eval("vrView_"+i).on('pause', function() {});

 

동적 변수를 선언 가능.

'javascript' 카테고리의 다른 글

스마트에디터 모바일에서 스크롤 안되는 문제  (0) 2021.04.21
(javascipt) 팝업 닫기시 유투브 영상 종료하기.  (0) 2018.02.20
parabola.js 이용한 포물선 이미지 구현하기.  (0) 2018.02.01
모바일 ios에서 iframe width:100% 안 될때.  (2) 2017.12.27
javascript 애드센스 다는 방법 - 초급  (0) 2017.08.24

안녕하세요.


자바스크립트에서 팝업 레이어어 유투브 영상을 추가하는 경우가 있는데요,

팝업 레이어를 닫아도 당연히 레이어가 닫히기 때문에 유투브 영상은 계속 재생이 됩니다.

그 문제를 해결하는 방법을 알려드릴게요.


#ex

<button onClick="open()">레이어 열기</button>

<div id="popup_layer" onClick="close()">

<div id="popup">

<iframe src="유투브 영상"

</div>

</div>


<script>

var embed_lyaer;

function close()

{

#닫기를 눌렀을때 불리는 함수

embed_lyaer=$('#popup').html(); // popup id에 잇는 html을 embed_lyaer 글로벌 변수에 담아 놓음.

$('#popup).html(''); //popup id에 html 을 제거 

}

function open(){

#열기를 눌렀을때 불리는 함수

$('#popup).html(embed_lyaer); //닫기를 눌렀을때 저장한 글로벌 변수를 다시 popup id에 넣어줌.

}

</script>


해당 닫기버튼을 눌렀을때 정상적으로 유투브 영상이 종료되는걸 확인하였습니다.


감사합니다.


'javascript' 카테고리의 다른 글

스마트에디터 모바일에서 스크롤 안되는 문제  (0) 2021.04.21
javascript 동적 변수 선언 eval  (0) 2019.12.26
parabola.js 이용한 포물선 이미지 구현하기.  (0) 2018.02.01
모바일 ios에서 iframe width:100% 안 될때.  (2) 2017.12.27
javascript 애드센스 다는 방법 - 초급  (0) 2017.08.24

안녕하세요.


jquery animate 함수를 이용하여 이미지를 움직이려고 했더니, 이미지가 포물선을 그리며 움직이는게 힘들어서, 

구글 검색을 통해 찾은 parabola.js 를 이용하여 포물선으로 이미지를 움직였습니다.


Parabola Trajectory Examples 예제를 이용 하였습니다(https://github.com/guins/parabolajs)




<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Parabola Trajectory Examples</title>

<style type="text/css">

html, body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

.dot {

position: absolute;

left: 0px;

top: 500px;

}

.scaleAnimation {  // onFinish에 해당 css를 추가

animation: myScale .7s forwards;

-webkit-animation myScale .7s forwards;

}


@keyframes myScale  //이미지가 마지막에 도달하면 해당 css를 통해 작아젓다 커졋다 효과를 부여.

{

from {transform: scale(1);}

20% {transform: scale(1.3);}

65% {transform: scale(0.6);}

90% {transform: scale(1.4);}

to {transform: scale(0);}

}


@-webkit-keyframes myScale

{

from {transform: scale(1);}

20% {transform: scale(1.3);}

65% {transform: scale(0.6);}

90% {transform: scale(1.2);}

to {transform: scale(0);}

}

</style>

<script type="text/javascript" src="parabola.js"></script>

</head>

<body>

<button>Run</button>

<i class="dot"><img id="img_test" src="Star_1.png" style="width:30px"/></i> // dog class 안에 이미지가 포물선으로 날아갑니다.


<script type="text/javascript">

var btn = document.querySelector('button');

var target = document.querySelector('.dot');

var mini = 30;

var start = 1;

var parabola = new Parabola({

startPos: {

left: 0,

top: 500

},

endPos: {

left: 500,

top: 0

},

onStep (pos) {

if((start % 5) == 0){  // 이부분은 기존 이미지를 포물선으로 날아가면 작아지게 만드려고 넣었습니다.

mini = mini -1;

img_test.style.width = mini+"px";

}

start++;

target.style.left = pos.left + 'px';

target.style.top = pos.top + 'px';

},

timingFunction: 'easeInOut',

onFinish (pos) {

target.classList.add('scaleAnimation');

}

});

// parabola.start();

    btn.addEventListener('click', function () {

    target.classList.remove('scaleAnimation');

        parabola.start();

    }, false);

    </script>

</body>

</html>


해당 예제에서 제가 필요한 부분만 바꿔서 적용했습니다.


^_^


'javascript' 카테고리의 다른 글

javascript 동적 변수 선언 eval  (0) 2019.12.26
(javascipt) 팝업 닫기시 유투브 영상 종료하기.  (0) 2018.02.20
모바일 ios에서 iframe width:100% 안 될때.  (2) 2017.12.27
javascript 애드센스 다는 방법 - 초급  (0) 2017.08.24
datatables 헤더 resize 시키기.  (0) 2017.07.12

안녕하세요.


아이폰에서 iframe width 100%를 줘도 정상적으로 적용이 안되는 버그가 있습니다.

그럴 때 iframe에 scrolling="no"를 주면 정상적으로 먹지만 스크롤이 안되는 문제가 발생합니다.


그래서 iframe가 동일한 기능을 하는 object로 해결 하였습니다.


기존 iframe 소스는

<div class="scroll-container scroll-ios" style="overflow:auto;-webkit-overflow-scrolling:touch">

<iframe src="https://test.com/iframe"  frameborder="0" scrolling="no" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;" ></iframe>

</div>


변경 object 소스는

<object id="nzeo" width="100%" height="100%" data="https://test.net/front/main"></object>



해당 object tag를 이용하여 아이폰과 안드로이폰에서 확인한 결과 정상적으로 뷰잉되는것을 보았습니다.



'javascript' 카테고리의 다른 글

javascript 동적 변수 선언 eval  (0) 2019.12.26
(javascipt) 팝업 닫기시 유투브 영상 종료하기.  (0) 2018.02.20
parabola.js 이용한 포물선 이미지 구현하기.  (0) 2018.02.01
javascript 애드센스 다는 방법 - 초급  (0) 2017.08.24
datatables 헤더 resize 시키기.  (0) 2017.07.12

안녕하세요.


애드고시에 합격하셨다면 애드센스를 이제 홈페이지에 달아야합니다.


https://www.google.com/adsense/?hl=ko&sourceid=aso

구글애드센스접속 하신 후 내광고 -> 새 광고 단위를 클릭 합니다. 해당 페이지에 맞는 광고를 선택하시면 됩니다.

(텍스트 및 디스플레이 광고 | 인피드 광고 | 콘텐츠 내 자동 삽입 광고) - 요즘 클릭률이 제일 높은 광고 사이즈는 336 x 280 사이즈라고 합니다.






광고를 만들고 저장을 하셨으면 코드가 하나 나오게 되며, 다시 광고 코드를 보고 싶으면 이름 밑에 코드 가져오기를 클릭 하시면 됩니다.


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 1234 -->

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client=""

     data-ad-slot=""

     data-ad-format="auto"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>


광고 코드는 위와 같은 형태로 나오게 되며 이 코드를 홈페이지에 삽입 하시면 됩니다. 


만약 광고 코드를 삽입했는데 안나온다면 상태 부분에 활성으로 되어있는지 확인 해보세요. 광고를 만든 후 활성이 되기까지 늦으면 2시간 정도 걸린다고 하네요.




'javascript' 카테고리의 다른 글

javascript 동적 변수 선언 eval  (0) 2019.12.26
(javascipt) 팝업 닫기시 유투브 영상 종료하기.  (0) 2018.02.20
parabola.js 이용한 포물선 이미지 구현하기.  (0) 2018.02.01
모바일 ios에서 iframe width:100% 안 될때.  (2) 2017.12.27
datatables 헤더 resize 시키기.  (0) 2017.07.12

datatables를 사용하는 사용자라면, 상단 헤더를 움직여서 헤더를 변경 시키고 싶을 때.


dataTables.colResize.js, // 해더 resize

dataTables.colVis.js scipt // 헤더 컬럼 추가,삭제


<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>

<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>

<script type="text/javascript" language="javascript" src="js/dataTables.colResize.js"></script>

<script type="text/javascript" language="javascript" src="js/dataTables.colVis.js"></script>


<table id="example" class="display" cellspacing="0" width="100%">

<thead>

<tr>

<th>이름</th>

<th>나이</th>

</tr>

</thead>

<tbody>

<tr>

       <td>홍길동</td>

<td>2100살</td>

</tr>

<tr>

<td>임꺽정</td>

<td>1200살</td>

</tr>

   </tbody>

</table>


위 js 를 추가하고, 해당 테이블을 datatables 선언.


$(document).ready(function() {

$('#example').DataTable( {

dom: 'C<"clear">RZlfrtip' // dom 옵션중에 R: resize C: header 컬럼 추가/삭제

} );

} )







'javascript' 카테고리의 다른 글

javascript 동적 변수 선언 eval  (0) 2019.12.26
(javascipt) 팝업 닫기시 유투브 영상 종료하기.  (0) 2018.02.20
parabola.js 이용한 포물선 이미지 구현하기.  (0) 2018.02.01
모바일 ios에서 iframe width:100% 안 될때.  (2) 2017.12.27
javascript 애드센스 다는 방법 - 초급  (0) 2017.08.24

+ Recent posts

티스토리툴바