묻고답하기
페이지 전환에 관해서 여쭤봅니다.
2016.01.06 18:47
페이지가 전환될 때 페이드 효과가 나타나게 하고 싶은데, 제가 완전히 여기에 문외한이라 대충 검색해서 그럴 듯한 거를 찾아다가 적용시켰습니다.
그래서 레이아웃에는
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('body').fadeIn(400).removeClass('hidden');
이걸 추가하고
css에는
body.hidden{
display:none;
}
이걸 추가했더니 제가 원하는 효과가 나왔습니다.
그런데 이걸 적용한 다음부터 홈페이지가 제대로 안 굴러가더라고요. 글 작성 시에 소스를 눌러도 안 눌린다거나.. 새 창이 안 뜬다거나 하는 오류였습니다. 이 부분을 삭제했더니 원래대로 잘 됐고요.
나중에 언뜻 듣기로는 저 부분이 문제가 됐던 게 xe가 제이쿼리를 내장?하고 있어서 제가 제이쿼리를 또 불러왔기 때문에 충돌이 일어난 거다 이런 식의 설명을 들었거든요. 그래서 제이쿼리, 페이지 전환 등등의 검색어로 검색을 해봤지만 여전히 어떻게 저걸 적용시켜야 할 지 모르겠더라고요...ㅠㅠ 도와주세요ㅠㅠㅠㅠ
댓글 10
-
퍼니엑스이
2016.01.06 18:50
-
LadyJEn3cdfd
2016.01.06 19:38
가르쳐주신 대로 해봤는데 되질 않네요ㅠㅠㅠㅠ 바디 부분이 아예 사라져버립니다ㅠㅠ
-
퍼니엑스이
2016.01.06 19:39
혹시 브라우저에서 에러가 발생하는 게 있다면 알려주시겠어요?
-
LadyJEn3cdfd
2016.01.06 20:46
브라우저에서의 에러는 어떻게 찾나요ㅠㅠㅠ 오류는 크롬 요소검사를 통해서 찾는 거 같아서 요소검사 에러 요소검사 오류 이런 키워드로 찾아봐도 다들 요소검사로 오류를 찾으면 됩니다, 라고만 하지 그 방법에 대해서는 알려주지 않아서요ㅠㅠㅠ 번거롭게 해서 죄송합니다ㅠㅠ
-
퍼니엑스이
2016.01.06 22:12
크롬 최신 버전을 기준으로 개발자 도구(F12)의 Console 탭을 클릭하시면 나옵니다
-
LadyJEn3cdfd
2016.01.09 16:12
ㅠㅠ답 너무 늦게 드려서 죄송합니다ㅠㅠㅠ 며칠동안 일이 있었어서요..ㅠㅠㅠ 말씀하신 오류창 사진 첨부합니다!!ㅠㅠ
-
HowtoXE
2016.01.06 23:02
홈페이지 주소를 알려주시거나 아예 레이아웃의 해당하는 부분 코드를 통째로 올려주시거나 해주세요. 말씀하신 정보로는 위의 퍼니엑스이님 첫번째 댓글이 최선입니다.
-
LadyJEn3cdfd
2016.01.09 16:16
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title></title>
(function($) {
$(document).ready(function () {
$('body').fadeIn(400).removeClass('hidden');
});
})(jQuery);
<meta name="generator" content="Namo WebEditor(Trial)">
<style>
<!--
.a { text-decoration:none; }
-->
a,img,input,area {outline:none; select-dummy:expression(this.hidefocus=true);}
</style>
<p align="center" style="line-height:0; margin-top:0; margin-right:5;"><span style="letter-spacing:2; line-height:0; margin-top:0; margin-right:5;"><a href="http://aaa.com/bgm.html" target="top"><font size="4" face="맑은 고딕" color="black">♩</font></a><font size="2" face="맑은 고딕" color="black">/</font><a href="http://aaa.com/blank.html" target="top"><font size="4" face="맑은 고딕" color="black">♭</font></a></span></p>
<p align="right" style="line-height:0; margin-top:0; margin-right:5;"><font color="black"> </font></p>
<script type="text/javascript" src="http://wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "b9417be4062858";
wcs_do();
</script></head>
<body class="hidden" bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="http://aaa.com/5.png" style="background-attachment:fixed;background-repeat: no-repeat fixed center;background-size:cover"><center>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr><td><center><img align="middle" border="0"><img class="zbxe_widget_output" widget="login_info" skin="photo15" colorset="default" /></center></td></tr>
<tr><td><img align="middle" src="http://aaa.com/svtasp.png" border="0"></td></tr></table>
<table width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr height="400">
<td width="200"><img align="middle" src="http://aaa.com/svtpr.png" border="0" usemap="#ImageMap1"></td>
<td width="600" background="http://aaa.com/svtbg.png">
<table align="center" cellpadding="0" cellspacing="0" width="90%">
<tr>
<td><!-- CONTENT -->
<div class="content" id="content" style="height:400px;overflow-y:scroll;">
{$content}
</div>
<!-- /CONTENT --></td>
</tr></table>
</td></tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0"><tr><td><img align="middle" src="http://aaa.com/svtasp.png" border="0"></td></tr></table>
<p> </p>
<map name="ImageMap1">
<area shape="rect" coords="30, 315, 160, 335" href="http://aaa.com/xe/index">
<area shape="rect" coords="30, 345, 45, 355" href="http://aaa.com/xe/p1">
<area shape="rect" coords="50, 345, 60, 355" href="http://aaa.com/xe/p2">
<area shape="rect" coords="65, 345, 85, 355" href="http://aaa.com/xe/p5">
<area shape="rect" coords="90, 345, 110, 355" href="http://aaa.com/xe/p10">
<area shape="rect" coords="140, 345, 160, 355" href="http://aaa.com/xe/p7">
<area shape="rect" coords="115, 345, 135, 355" href="http://aaa.com/xe/p3">
<area shape="rect" coords="70, 205, 125, 215" href="https://twitter.com/aaa">
</map></body>
</html>해당하는 부분이 어딘지를 잘 모르겠어서 일단 레이아웃 html 통째로 복붙해봤습니다...ㅠㅠㅠ 제가 잘 몰라서 저 정보만으로는 부족할 거라고 미처 생각을 못했습니다 죄송해요ㅠㅠ
-
mindpainter
2016.01.07 10:50
body태그를 감추었다가 나타나게 하는것 보다는 레이아웃스킨 전체를 하나의 레이어로 감싸고 그걸 감추었다가 나타나게 하는게 그나마 안전(?)하리라고 봅니다. 다만 게시판등에서 전체 레이어가 페이드 인 되는 타이밍과 게시판의 js들이 로딩되는 타이밍이 안맞으면 여전히 오류가 생길수도 있을것 같습니다.
-
LadyJEn3cdfd
2016.01.09 16:18
ㅜㅠㅠ 죄송합니다 해주신 말씀이 제게는 너무 어려워서요ㅠㅠㅠㅠㅠㅠ 그래도 도움 주셔서 감사합니다!!ㅠㅠㅠ
별도로 jQuery를 불러오는 것은 제외해보시고, 아래와 같이 한 번 해보시기 바랍니다.
(function($) {
$(document).ready(function () {
$('body').fadeIn(400).removeClass('hidden');
});
})(jQuery);
XE에서는 jQuery와 다른 자바스크립트 프레임워크와의 충돌을 방지하기 위해 $ 변수를 직접 사용할 수 없습니다.