잡지식스토리

#totop {position:fixed; bottom:20px; right:30px;}

<div cond="Mobile::isMobileCheckByAgent()" id="totop">

<input type="button" value="맨위로" onClick="javascript:window.scrollTo(0,0)" /></div>

또는

<input type="image" src="top.gif" onClick="javascript:window.scrollTo(0,0)" alt="맨위로" /></div>

<div style="font-size:30px;">

<script type="text/javascript">

function showID(id)

{

obj=document.getElementById(id);

if(obj.style.display == "none") 

  obj.style.display="inline";

else

  obj.style.display="none";

}

</script>

<div id="buy_btn" >

<a href="#" onclick="showID('buy_btn_detail');"><p>메뉴</p></a>

</div>

<div id="buy_btn_detail" style="display:none;">

<div style="border:1px solid #999; text-align:center; font-size:15px; width:100px; margin:3px auto;">

<a href="#" onclick="showID('buy_btn_detail');">▼닫기</a>

<p>메뉴1</p>

<p>메뉴2</p>

<p>3</p>

<p>4</p>

</div>

</div>

</div>

#buy_btn {position:fixed; bottom:20px; left:30px; background-color:#fff;}

#buy_btn_detail{position:fixed; bottom:20px; left:30px; background-color:#fff;}

이 기능을 동작하도록 만드는 것은 사실 모바일에서 흔하게 쓰는 top으로 가는 버튼을 동작시킬때 쓰는 방법과 100% 동일한 방법입니다. 상단으로 가는 버튼을 만들때 쓰는 기법이 특정위치까지 스크롤이 내려오면 top 버튼이 노출되게 스크립트를 사용하는 것인데 그 스크립트를 그대로 사용했습니다.

게시판스킨의 read.html 파일에 아래 스크립트를 상단에 추가해 줍니다.

<script>
jQuery(function($){
$(".btTop_head").hide();
$(window).scroll(function () {
  if($(window).scrollTop() > 100) {
   $('.btTop_head').show();
  } else {
   $('.btTop_head').hide();
  }
 });
});
</script>

CSS파일에 추가합니다.

.btTop_head    {display: block; position: fixed; top:0px; z-index: 150;height:50px;background-color:#fff;border-bottom:1px solid #eaeaea;width: 100%;}

그리고 노출시키고 싶은 내용을  btTop_head 클래스를 사용한 div 박스에 작성합니다.

<div class="btTop_head" style="display:none;">

상단에 표현하고 싶은 각종 내용들

</div>

div 에 vertical-align : center 적용하는 방법

vertical-align 은 table 태그에서만 작동을 한다
예전에는 table 을 많이 썼지만 요즘은 거의 다 div 로 하다보니
이 세로정렬 안 되는게 골치아플때가 많다

이를 해결하는 가장 쉬운방법은 css3 의  display:flex; 를 이용하는 것이다

https://stackoverflow.com/questions/18649106/div-vertical-align-middle-css  의 끝부분 26 부분을 참조하면

div 내부에 d아래 css 를 추가하면 된다.

display:flex;
align-items:center; 

가로 정렬을 원하면

justify-content:center; 까지 사용하면 되고

예를들면..

<div class="vertical-align-content">
  Hodor!
</div>

의 경우 css 를

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

이렇게 주면 된다.

flex 형태에 대해 조금 더 정확히 알고프면
https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/   사이트를 참고로 하면 된다

CSS3 라는게 이제는 거의 일반화 되었기에 큰 무리 없이 사용가능하다
( IE6,7,8 따위는 이제는 그냥 무시하는게 더 낫다 ) 

아래 버전에 해당하는 브라우저들은 플래시 없이 클립보드에 자바스크립만으로 복사가 가능합니다.

 Chrome 43+, Opera 29+ and IE 10+

출처: http://goni9071.tistory.com/entry/자바스크립트-클립보드에-복사하기-플래시없이-javascript-copy-clipboard-without-flash?category=718769 [고니의꿈]

가장 간단한 해결 방법은 

스케치북 기준으로 

모듈 보드 엠스킨 스케치북 경로/_write_form_mobile.html 파일을 열어서

약 22번째 줄에 있는 아래 부분을

아래와 같이 수정

모듈 보드 모바일스킨 comment_form.html 에서

[댓글수정화면에 추가]

<input type="hidden" name="use_editor" value="Y" />

.htaccess 파일에서

RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

기본 url 설정은

https://www.도메인.com

mobileex 에서만 되는 방법만 있어, 

제가 한 방법을 적어봅니다.

저는 imageprocess module 에 image rotate 기능을 추가해서, 이미지 압축 처리할때, image orientation 정보를 이용해서 

자동으로 회전하는 부분을 처리하였습니다. 

위에 코드를 imageprocess.controller.php 파일에 

$ext = strtolower(substr(strrchr($args->source_filename,'.'),1));

소스 다음에 추가하시면, image orientation 되어 있는 파일이 자동으로 회전되어 올라가게 됩니다.

테스트 mobile 은 갤럭시s3, g2 기종으로 찍은 사진으로 해봤네요..

imageprocess module 설치되어 있으면, 기존 xe board 에서 pc / mobile 지원이 됩니다.