잡지식스토리

#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 지원이 됩니다. 

mysql에서 특정 문자열을 포함한 내용 검색

SELECT * FROM `테이블이름` WHERE 필드이름 like '%문자열%';

예)

SELECT * FROM `xe_documents` WHERE content like '%daum%';

XE에서 작성자의 모든 글의 닉네임을 일괄적으로 변경하는 방법이다. 

모든 게시판 및 문서에 적용된다.

1) DB (phpmyadmin)에 접속한다.

2) xe_documents 박스에 체크한다.

3) 상단의 sql 탭을 클릭한다.

4) sql 질의칸에 아무것도 없도록 한 후 아래처럼 입력하고 '실행'을 누른다.

추가)) 댓글 닉네임도 변경하는 방법:

1) xe_comments 박스를 체크.

2) 상단의 sql 탭 클릭.

3) sql 질의칸에 아래처럼 입력 후 '실행' 클릭.

<form name="a" method='post' target='_blank' onsubmit="return false">
  <input type="text" name="b">
  <input type="button" value='이동' onclick="if(document.a.b.value!=''){document.a.action='http://naver.com/'+document.a.b.value; document.a.submit();}">
 </form>

onsubmit="return false"

엔터치면 reload 되는 현상 해결

  <script language="JavaScript">
  if(window.name!=='window_id') {
   window.open('about:blank','_self');
   opener=window;
   window.close();
  }
 
  </script>

원본글: http://opencode.co.kr/bbs/board.php?bo_table=javascript_tips&wr_id=48

1. 현재 보고 있는 창 닫기<hr>
현재 창 닫기는 window.close() 함수를 사용하면 된다. 사용자가 특별히 만들지 않아도 그냥 불러 사용하면 되는 함수를 윈도 내장함수라고 한다든가? 그런 정도로 알면 된다.

<html>
<head>
</head>
<body>
<input type="button" value="현재창 닫기" onClick="window.close()">
</body>
</html>
위 소스를 입력하고, ex014_01.htm으로 저장한 후 돌려보자. 버튼을 클릭하면 경고창이 뜬다.
[예] 하면 현재 창이 닫긴다. 나모 [미리보기]에서 태스트하면, 버튼이 사라지고 빈 창만 남을 것이다.

2. 새 창 열고, 현재 창 닫기


ex014_01.htm을 다른이름으로 ex014_02.htm이라고 저장한 후 소스 5줄을 다음과 같이 수정하자.

<input type="button" value="새 창 열고 현재 창 닫기" onClick="window.open('ex005_01.htm'); window.close()">
[미리보기] 또는 저장한 후 돌려보자. 경고창이 뜨면서 현재 창이 닫히고 나면 새로 연 창만 남을 것이다.


  


3. 조용하게 창 닫기


현재 창을 닫을 때 경고창이 뜨는 것은 없앨 방법은 없을까? 다음 소스를 ex014_03.htm으로 저장하자(이 소스는 자스코의 초보자용 필수 스크립트 중 Window/Frame 관련 자료에서 베껴온 것이다).

<html>
<head>
<title>조용하게 창닫기 </title>
</head>
<body>
<object id=window type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
<a href="#" onClick="window.Click();">조용하게 창닫기</a>
</body>
</html>
나모에서라면 [미리보기] 하기 전에 모든 파일을 저장하자. 그리고 돌려보자. 나모까지 닫혀 버릴  것이다. 이런 소스 하나를 발견하면 자스코에 유료로 가입한 것이 아깝지 않다는 생각을 다시 하게 된다.


  


4. 열었던 팝업창 닫기


다음 소스를 ex014_04.htm으로 저장한 후 돌려보자.

<html>
<head>
<title>팝업창 열고 닫기</title>
</head>
<body>
<script>
function popOpen(url) {
pop = window.open(url)
}
</script>
<input type="button" value="팝업창 열기" onClick="popOpen('ex005_01.htm')">
<p>
<input type="button" value="팝업창 닫기" onClick="pop.close()">
</body>
</html>
[팝업창 열기] 단추를 클릭하면 팝업창이 떠서 ex005_01.htm 파일의 내용을 보여준다. [팝업창 닫기] 단추를 클릭하면 열려 있는 팝업창을 닫아 버린다. 그런데 한 가지 중요한 문제가 있다. 팝업창을 열지 않은 상태에서 [팝업창 닫기] 단추를 클릭하면 에러가 뜬다는 사실이다. "pop이 정의되지 않았다"는 오류인데, 당연히 생겨야 되는 오류이다.

태어나지도 않은 놈을 죽이라 하니, 총구를 어디로 겨누어야 할 것인가? 이 문제를 해결할 방법은 아직 찾지 못하였다. 실력이 되어서 방법을 찾으면 이 자리에서 찾아볼 수 있도록 링크를 시켜 두겠다.


  


5. 프레임셋 닫기


프레임셋을 닫으려면 창 하나 닫는 window.close()로 끝나지 않는다. 창 둘을 닫고 프레임셋까지 닫아야 된다.

parent.close()
window.close()
self.close()
이렇게 해 주면 프레임셋을 닫을 수 있다.


  


6. 메인 창을 열면서 팝업(광고) 창 띄우기


지금까지 착실히 실습해 왔으면 간단하게 생각할 수 있는 문제이다. ex014_04.htm을 다음과 같이 수정하여 ex014_05.htm으로 저장하고 돌려보자.

<html>
<head>
<title>팝업창 열고 닫기</title>
<script>
function popOpen(url) {
pop = window.open(url,'','left=400,top=300,width=400,height=200')
}
</script>
</head>
<body onLoad="popOpen('ex005_01.htm');">
<input type="button" value="팝업창 닫기" onClick="pop.close()">
</body>
</html>
잘 돌아가지만, 역시 팝업창이 닫힌 후에 다기 [팝업창 닫기]를 하면 에러가 생긴다. 이 문제를 해결할 능력이 생기기 전까지는(그런 능력이 생긴 후에라도 더 낫다면), 창 닫는 일은 활성화된 그 창에 맡겨두자. 꿩 잡는 게 매다!


  


7. 메인 창을 닫으면 팝업(광고) 창 띄우기


어떤 사이트를 가 보면 들어갈 때와 나올 때마다 광고를 띄우는 경우가 있다. 메인 창을 닫을 때 팝업 창을 띄우려면 위의 소스를 한 줄만 고치면 그만이다. 위 예제를 ex014_06.htm(다른이름)으로 저장하고 아래 두 줄 내용만 수정하자.

<body onUnLoad="popOpen('ex005_01.htm');">
이 창을 닫으면 광고를 보여 드립니다.
[미리보기]에서 ^F4를 누르면 편집창이 닫히면서 팝업이 뜬다. 탐색기에서 돌려보라. 브라우저의 뒤로가기(<=)를 선택하여 페이지를 닫아도 결과는 마찬가지로 나올 것이다.

다음과 같이 하면 페이지를 열 때, 닫을 때 모두 광고를 띄울 수 있다.

<body onLoad="popOpen('ex005_01.htm');" onUnLoad="popOpen('ex005_01.htm');">

  


8. 일정시간 후 자동으로 팝업창 닫기


다음 소스를 입력하고 ex014_08.htm으로 저장하자.

<html>
<head>
<title>팝업창 자동으로 닫기</title>
</head>
<body onLoad="setTimeout('window.close()',2000);">
<p>이 창은 2초 후에 자동으로 닫힙니다.</p>
</body>
</html>
ex014_06.htm을 다음과 같이 수정한 후 ex014_07.htm(다른 이름)으로 저장하고 돌려 보자.

<html>
<head>
<title>광고창 띄우기</title>
<script>
function popOpen(url) {
pop = window.open(url,'','left=400,top=300,width=400,height=200')
}
</script>
</head>
<body onLoad="popOpen('ex014_08.htm');" onUnLoad="popOpen('ex014_08.htm');">
<p>이 창을 열고 닫을 때마다 광고를 보여 드립니다.</p>
</body>
</html>
[미리보기]를 하면 팝업창이 열렀다가 2초 후에 사라지고, [편집]으로 뺘져나와도 팝업창이 열렸다가 2초 후에 사라질 것이다. 탐색기에서 실행하고 닫을 때도 물론 마찬가지의 결과가 나온다.


  


9. 일정시간 후 자동으로 팝업창 닫기


새 파일을 만들고 다음 소스를 입력한 후 ex014_09.htm으로 저장하고, 돌려 보자.

<html>
<head>
<title>새 창에 텍스트를 보여주기</title>
<script>
function popOpen() {
pop = window.open('','','left=400,top=300,width=400,height=200');
pop.document.write('<html><head><title>팝업공지</title><head><body>이 글은 직접 입력하는<br>안내문입니다.</body></html>');
}
</script>
</head>
<body>
<input type=button onClick="popOpen();" value='안내문을 보여 드립니다.'>
</body>
</html>
잘 보면, 이렇게도 할 수 있다는 것이지, 실제로는 팝업창에 어떤 파일을 보여주는 것과 다를 바가 없다

출처를 남깁니다.

UPDATE xe_documents SET content = REPLACE(content, '이전 도메인', '새 도메인');

아래 팁은 루트 디렉토리에 XE를 설치했을 경우에 한합니다.

우선 aaa.com 이 메인 도메인이라고 가정합니다.

카페24 웹호스팅을 이용하면 /home/hosting_users/user_id/www 디렉토리가 웹호스팅 루트가 됩니다.

다시 말해서 aaa.com 으로 접속하면 www 디렉토리의 index 파일을 읽습니다.

이제 bbb.aaa.com 이라는 서브 도메인을 만듭니다.

그러면 /home/hosting_users/user_id/www/bbb 디렉토리가 생성됩니다.

bbb.aaa.com 으로 접속하면 www/bbb 디렉토리의 index 파일을 읽어야 합니다.

그런데 못읽을겁니다. 페이지가 아예 안뜹니다.

원인은 XE가 www 디렉토리의 .htaccess 파일을 이용하기 때문입니다.

해결 방법은 www 디렉토리의 .htaccess 파일을 열어서, 아래의 파란색 명령어를 추가해주면 됩니다.

RewriteEngine On

RewriteBase /
RewriteCond $1 !^(bbb)/
RewriteCond %{HTTP_HOST} ^bbb\.aaa\.com [NC]
RewriteRule ^(.*)$ /bbb/$1 [L]

# reserve XE Layout Template Source File (*.html)
RewriteRule ^layouts/(.+)/(.+).html$ ./index.php [L]

... 이하 생략

빨간색으로 표시된 도메인 이름만 자신의 환경에 맞게 변경해주면 됩니다.

XE에서 작성자의 모든 글의 닉네임을 일괄적으로 변경하는 방법이다. 

모든 게시판 및 문서에 적용된다.

1) DB (phpmyadmin)에 접속한다.

2) xe_documents 박스에 체크한다.

3) 상단의 sql 탭을 클릭한다.

4) sql 질의칸에 아무것도 없도록 한 후 아래처럼 입력하고 '실행'을 누른다.

추가)) 댓글 닉네임도 변경하는 방법:

1) xe_comments 박스를 체크.

2) 상단의 sql 탭 클릭.

3) sql 질의칸에 아래처럼 입력 후 '실행' 클릭.

플래시 동영상이 로그인 팝업창을 가릴 때 수정방법 소스

유튜브 동영상 iframe으로 가져오기 할 때 플래쉬가 최상위에 안걸리게 하는 소스

<iframe ~src="링크URL"~> 부분을 <iframe ~src="링크URL&amp;wmode=opaque"~>으로 바꿔준다.

로그인 팝업창이 유튜브 동영상에 가려질 때 사용하면 유용하다.

<STYLE>
body {background-image:url("이미지주소");
background-repeat: no-repeat;
background-position: top;}
table { background-color: transparent; }
td { background-color: transparent; }
</STYLE>

transparent - 투명

no-repeat - 백그라운드 이미지 한번만 보임(바둑판X)

fixed  - 스크롤바를 움직여도 배경은 고정

center - 백그라운드미지 중앙에 정렬

right  - 백그라운드 이미지 오른쪽 정렬

bottom - 백그라운드 이미지 하단에 정렬

right bottom - %로도 가능(50% 50% 이렇게 하면 화면 중앙에 있게됨)

좌우는 left, right, center, n%로 지정

상하는 top, bottom, middle, n%로 지정

아주 간략한 팁입니다.

사실 팁이라고 할 것도 없지만...

스케치북5모바일 스킨의 소스가 변경되면서

제가 찾아보니 기존의 위치와 달라져서 이렇게 글을 쓰게 되었습니다.

xe/modules/m.skins/sketchbook5Mobile/_read.html 파일을 열어

224번째쯤 있는 소스

<script type="text/javascript">//<![CDATA[
jQuery(function($){
 var loaded = false;
 $('#clb').click(function(){
  if(!loaded) {
   loaded = true;
   {@ $lastpage = 1; }
   {@ $temp = $oDocument->getComments() }
   <

↓!--@if($oDocument->comment_page_navigation

)-->
   {@ $lastpage = $oDocument->comment_page_navigation->last_page }
   <

↓!--@endif

-->
   loadPage({$oDocument->document_srl}, {$lastpage});
  }
 });

다음으로 수정(추가)합니다.

<script type="text/javascript">//<![CDATA[
jQuery(function($){
 var loaded = false;
 $('#clb').click(function(){
  if(!loaded) {
   loaded = true;
   {@ $lastpage = 1; }
   {@ $temp = $oDocument->getComments() }
   <

↓!--@if($oDocument->comment_page_navigation

)-->
   {@ $lastpage = $oDocument->comment_page_navigation->last_page }
   <

↓!--@endif

-->
   loadPage({$oDocument->document_srl}, {$lastpage});
  }
  }).click();

맨아래에 .click() 만 넣어주면 자동으로 댓글이 펼쳐집니다.

즉, 클릭해야 댓글이 보여지던것을 강제로 클릭한 효과(?)를 적용하는 것입니다.

혹시나 이 내용을 찾으시는 분들께만(?) 도움이 되는 허접한 팁이었습니다.

좌우 스크롤 안나오게 하는 스크립트

<head>...</head> 사이에 삽입할 것.

<style type="text/css"> html { overflow-x:hidden; } </style>

<?
header("location:http://URL");
?>

페이지 이동 스크립트,  웹문서 제일 상단에 삽입

무조건 답이라고 할 수는 없지만, layout.html 상단에 추가하고 테스트 해보면 해결될 때가 있다.

은근히 유용함.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

xe가 설치된 폴더에서

files\config\db.config.php 을 열어준다.

3번째 줄에 $db_info->default_url = "";

바로, "" 안에 설정된 url 주소가 있다.

이것을 아래와 같이 변경해준다.

$db_info->default_url = "http://".$_SERVER["HTTP_HOST"];

현재 접속한 주소로 기본 URL이 세팅되는 방식이다.

아니면 url 주소에 설정하려는 도메인을 입력하면 된다.
 

모바일 화면에서 가득채우기

뷰포트를 이용합니다.

속성은 --

width, height : px 단위 기본 960px
initial-scale : 초기 배율, (기본값 : 꽉 찬 화면)
minimum-scale : 최소 배율 0~10.0
maximum-scale : 최대배율 0~10.0
user-scalable : 확대 축소 여부 : yes/no

이렇게있구,

헤드부분에

<meta name="viewport" 

<div id="unse" style="position:relative;z-index:1;height:480px;">
<DIV style="position:absolute;overflow:hidden;width:550px;height:470px;top:8px;left:0px;">
    <DIV style="position:absolute;left:-230px;top:-280px;">
    <iframe src="**** 넣을 홈페이지 주소 **** " WIDTH=1010 HEIGHT=930></iframe>
    </div>
</div>
</div>

인터넷 시작할 때 시작페이지 설정하는 레지스트리 경로.

레지스트리 편집기를 시켜 주시고 다음의 경로를 찾아 갑니다.

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]

start_page 레지에서 url 설정

반갑습니다. 잡지식스토리입니다.

이번에는 동일한 웹페이징서 지정한 위치로 이동하는 방법에 대해서 알아보겠습니다.

사용할 태그는 <a href="#ASD">ASD</a> 와 <h2 id="ASD">ASD</h2>입니다.

a태그를 이용해서 #ASD를 지정하고 "ASD"를 클릭하면 id="ASD" 태그를 이용한 "ASD영역"으로 바로 이동합니다.

일단 캡쳐사진을 보면서 설명해 보겠습니다.

위에서 상단의 '버스'를 클릭하면 '버스'설명으로 이동합니다.

'지하철'을 클릭하면 '지하철'로, '택시'를 클릭하면'택시' 설명으로 이동하는 태그입니다.

어떤 내용인지 이해는 되시죠..??

그럼 이제 이 웹문서의 '소스보기'를 해 보겠습니다.

<p> 어디든지 신속하게 이동할 수 있는 교통수단입니다.</p>
<div class="top"><a href="#list">위로</a></div>
<hr>
 </body>
</html>

이해를 돕기 위해서 설명이 들어가야 할 영역에 같은 문장을 여러개 넣었습니다.

같은 문장부분은 생략하였습니다.

버스부분만 설명해 보겠습니다.

"대중교통의 종류" 목록에서 버스에 <a href="#bus">버스</a> 태그를 설정하고,

아래 설명부분에서 <h2 id="bus">버스</h2>태그를 설정하였습니다.

목록에서 "버스"를 클릭하면 "버스"설명으로 바로 이동하는 기능입니다.

설명 아래쪽으로 "위로" 라는 글씨를 클릭하면 다시 목록으로 이동하는데,

소스을 적용하는 방법은 동일합니다.

직접 웹문서를 작성해 보면 쉽게 이해가 될 것이라 판단됩니다.

오늘은 여기까지입니다.