dtd 자바 스크롤 문제에 대한 답변 및 팁 정보
dtd 자바 스크롤 문제에 대한 답변 및 팁
첨부파일
본문
고민 주소 : http://sir.co.kr/bbs/board.php?bo_table=cm_agonize&wr_id=1778
비표준 문서에서 작동하던 스크롤을 dtd 지정후에도 오류0, 경고0이면서 웹표준 통과하면서
파이어폭스, 크롬, ie등에서 작동하게 재 수정 하였습니다.
위의 고민상담에 너무 좋은 예제라 제가 몇가지 팁을 드리려합니다 ㅎ.ㅎ
아래에 상세히 적은것은 이글을 읽는 분들중에 dtd, 웹표준에 관해 전혀 모르시는 분들도 계실꺼란 생각에
적은 것이니 질문자님 만을 위한 답변이 아니라는 것을 먼저 당부드립니다.
1. 첫번재로 스크롤이 작동하지 않는 부분은
tmp.left 를 alert(tmp.left)로 해보시면 숫자가 뜨는것이아니라 뒤에 'px'라는 단위도 같이 뜨는것을 확인할 수있습니다 ㅎ.ㅎ
이 단위를 숫자로 바꾸기위해서 parseInt()를 사용한것 이구요.
이 left 값을 다시 변경해서 tmp.left에 반영하기위해서는 뒤에 'px' 또는 단위를 같이 지정해주시면 됩니다.
수정전 : tmp.left = parseInt(tmp.left) - 1;
수정후 : tmp.left = (parseInt(tmp.left) - 1) + 'px';
수정전 : tmp.left = m_left*(ctnt_length-1);
수정후 : tmp.left = (m_left*(ctnt_length-1)) + 'px';
2. setTimeout("scroll_m()",bspeed) 와 같이 하게되면 차후 scroll_m(추가인수) 처럼 인수를 추가할 수 없게되므로
setTimeout(function(){scroll_m()},bspeed);과 같이 사용하시는 것을 추천드립니다.
3. onMouseover, onMouseout과 같이 대문자가 들어갈경우 파이어폭스에서 인식 못하는 문제가 있으므로
onmouseover, onmouseout 과 같이 소문자로만 사용하시기를 권합니다.
4. for 문장에 ctnt.length 로 매번 개수를 세는것 보다
var ctnt_length = ctnt.length; 로 한번만 세는 것을 권합니다.
5. <script> 또는<script language="JavaScript">는 모두 아래와같이 사용하시기를 권합니다.
<script type="text/javascript">
//<![CDATA[
스크립트내용작성
//]]>
</script>
6. 자바스크립트안의 스트링데이터(문자)들 중에 /(슬래쉬) 앞에 \(역슬래쉬를 모두 붙여야합니다.)
예)
수정전 : htmlstr_m+=ctnt[i]+'\n'+'</div>\n';
수정후 : htmlstr_m+=ctnt[i]+'\n'+'<\/div>\n';
7. 스타일적용에 0px 라는건 0자체가 값이 없으므로 단위또한 존재할 수 없습니다.(이것은 제 개인적으로는 반대이지만 0만 쓰시면 된답니다 ㅜ.ㅠ) 또한 상하좌우의 여백등의 값이 같을 경우 줄여쓰는것을 추천합니다.
수정전 : top: 0px;padding:0 0 0 0;
수정후 : top:0; padding:0;
8. 자바스크립트에서 만들어진 html 소스안의 따옴표는 큰따옴표로 생성되게 만드는것이 나중에 헤갈리지 않습니다 ㅎ.ㅎ 요곤 제 개인적인 추천입니다 ㅎ.ㅎ
수정전 : ctnt[0] = "<p style='display:inline; padding:0px 8px;'><img src='./data/banner/1' alt='?' /></p>";
수정후 : ctnt[0] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/1" alt="?" \/><\/p>';
9. 마우스를 올렸을대 내렸을때 멈췄다가 다시 작동하지 않는 부분은 변수에 대한 오타가 있었습니다.
수정전 : onMouseover="mouse=0" onMouseout="mouse=1"
수정후 : onmouseover="bmouse=0" onmouseout="bmouse=1"
--------- 이하 완성본 --------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<!--DOCTYPE HTML-->
<!--
doctype 지정보다 윗줄에 주석이 있으면 오류가 발생 할 수 있습니다.
사용하지 않는 doctype을 주석 처리하시려면 문서 지정이 된 다음 아랫줄에
위와같이 주석처리를 해야 오류가 발생하지 않습니다.
-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>모든xhtml dtd지정상관없이 정상작동 및 경고0 오류0 </title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var
htmlstr_m = '',
bflag=true,
bmouse=1,
bspeed=1,
bwait=3000,
btemp=0,
m_amount=318,
m_left=106;
var ctnt=new Array(), i=0, j=0;
ctnt[0] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/1" alt="1" \/><\/p>';
ctnt[1] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/2" alt="22" \/><\/p>';
ctnt[2] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/3" alt="333" \/><\/p>';
ctnt[3] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/4" alt="4444" \/><\/p>';
ctnt[4] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/5" alt="55555" \/><\/p>';
ctnt[5] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/6" alt="666666" \/><\/p>';
ctnt[6] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/7" alt="7777777" \/><\/p>';
var ctnt_length = ctnt.length;
function startText_m() {
for (i=0; i<ctnt_length; i++) insertText_m(i);
window.setTimeout(function(){scroll_m();},bwait);
}
function scroll_m() {
if (bmouse && bflag) {
for (i=0;i<ctnt_length;i++) {
btemp++;
tmp = document.getElementById('scroll_area'+i).style;
tmp.left = (parseInt(tmp.left) - 1) + 'px';
if (parseInt(tmp.left) <= m_left*(-1)) {
tmp.left = (m_left*(ctnt_length-1)) + 'px';
}
if (btemp>(m_amount-1)*ctnt_length) {
bflag=false;
btemp=0;
window.setTimeout(function(){bflag=true;btemp=0;},bwait);
}
}
}
window.setTimeout(function(){scroll_m();},bspeed);
}
function insertText_m(i) {
htmlstr_m='<div style="left:'+((m_left)*i)+'px; width:'+(m_amount+0)+'px; position: absolute; top:0; padding:0" id="scroll_area'+i+'">\n';
htmlstr_m+=ctnt[i]+'\n'+'<\/div>\n';
document.write(htmlstr_m);
//alert(i + " " + htmlstr_m);
}
//]]>
</script>
<div style="height:110px; width:750px; position:absolute; overflow:hidden;" onmouseover="bmouse=0" onmouseout="bmouse=1">
<script type="text/javascript">
//<![CDATA[
startText_m();
//]]>
</script>
</div>
</body>
</html>
비표준 문서에서 작동하던 스크롤을 dtd 지정후에도 오류0, 경고0이면서 웹표준 통과하면서
파이어폭스, 크롬, ie등에서 작동하게 재 수정 하였습니다.
위의 고민상담에 너무 좋은 예제라 제가 몇가지 팁을 드리려합니다 ㅎ.ㅎ
아래에 상세히 적은것은 이글을 읽는 분들중에 dtd, 웹표준에 관해 전혀 모르시는 분들도 계실꺼란 생각에
적은 것이니 질문자님 만을 위한 답변이 아니라는 것을 먼저 당부드립니다.
1. 첫번재로 스크롤이 작동하지 않는 부분은
tmp.left 를 alert(tmp.left)로 해보시면 숫자가 뜨는것이아니라 뒤에 'px'라는 단위도 같이 뜨는것을 확인할 수있습니다 ㅎ.ㅎ
이 단위를 숫자로 바꾸기위해서 parseInt()를 사용한것 이구요.
이 left 값을 다시 변경해서 tmp.left에 반영하기위해서는 뒤에 'px' 또는 단위를 같이 지정해주시면 됩니다.
수정전 : tmp.left = parseInt(tmp.left) - 1;
수정후 : tmp.left = (parseInt(tmp.left) - 1) + 'px';
수정전 : tmp.left = m_left*(ctnt_length-1);
수정후 : tmp.left = (m_left*(ctnt_length-1)) + 'px';
2. setTimeout("scroll_m()",bspeed) 와 같이 하게되면 차후 scroll_m(추가인수) 처럼 인수를 추가할 수 없게되므로
setTimeout(function(){scroll_m()},bspeed);과 같이 사용하시는 것을 추천드립니다.
3. onMouseover, onMouseout과 같이 대문자가 들어갈경우 파이어폭스에서 인식 못하는 문제가 있으므로
onmouseover, onmouseout 과 같이 소문자로만 사용하시기를 권합니다.
4. for 문장에 ctnt.length 로 매번 개수를 세는것 보다
var ctnt_length = ctnt.length; 로 한번만 세는 것을 권합니다.
5. <script> 또는<script language="JavaScript">는 모두 아래와같이 사용하시기를 권합니다.
<script type="text/javascript">
//<![CDATA[
스크립트내용작성
//]]>
</script>
6. 자바스크립트안의 스트링데이터(문자)들 중에 /(슬래쉬) 앞에 \(역슬래쉬를 모두 붙여야합니다.)
예)
수정전 : htmlstr_m+=ctnt[i]+'\n'+'</div>\n';
수정후 : htmlstr_m+=ctnt[i]+'\n'+'<\/div>\n';
7. 스타일적용에 0px 라는건 0자체가 값이 없으므로 단위또한 존재할 수 없습니다.(이것은 제 개인적으로는 반대이지만 0만 쓰시면 된답니다 ㅜ.ㅠ) 또한 상하좌우의 여백등의 값이 같을 경우 줄여쓰는것을 추천합니다.
수정전 : top: 0px;padding:0 0 0 0;
수정후 : top:0; padding:0;
8. 자바스크립트에서 만들어진 html 소스안의 따옴표는 큰따옴표로 생성되게 만드는것이 나중에 헤갈리지 않습니다 ㅎ.ㅎ 요곤 제 개인적인 추천입니다 ㅎ.ㅎ
수정전 : ctnt[0] = "<p style='display:inline; padding:0px 8px;'><img src='./data/banner/1' alt='?' /></p>";
수정후 : ctnt[0] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/1" alt="?" \/><\/p>';
9. 마우스를 올렸을대 내렸을때 멈췄다가 다시 작동하지 않는 부분은 변수에 대한 오타가 있었습니다.
수정전 : onMouseover="mouse=0" onMouseout="mouse=1"
수정후 : onmouseover="bmouse=0" onmouseout="bmouse=1"
--------- 이하 완성본 --------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<!--DOCTYPE HTML-->
<!--
doctype 지정보다 윗줄에 주석이 있으면 오류가 발생 할 수 있습니다.
사용하지 않는 doctype을 주석 처리하시려면 문서 지정이 된 다음 아랫줄에
위와같이 주석처리를 해야 오류가 발생하지 않습니다.
-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>모든xhtml dtd지정상관없이 정상작동 및 경고0 오류0 </title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var
htmlstr_m = '',
bflag=true,
bmouse=1,
bspeed=1,
bwait=3000,
btemp=0,
m_amount=318,
m_left=106;
var ctnt=new Array(), i=0, j=0;
ctnt[0] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/1" alt="1" \/><\/p>';
ctnt[1] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/2" alt="22" \/><\/p>';
ctnt[2] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/3" alt="333" \/><\/p>';
ctnt[3] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/4" alt="4444" \/><\/p>';
ctnt[4] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/5" alt="55555" \/><\/p>';
ctnt[5] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/6" alt="666666" \/><\/p>';
ctnt[6] = '<p style="display:inline; padding:0 8px;"><img src=".\/data\/banner\/7" alt="7777777" \/><\/p>';
var ctnt_length = ctnt.length;
function startText_m() {
for (i=0; i<ctnt_length; i++) insertText_m(i);
window.setTimeout(function(){scroll_m();},bwait);
}
function scroll_m() {
if (bmouse && bflag) {
for (i=0;i<ctnt_length;i++) {
btemp++;
tmp = document.getElementById('scroll_area'+i).style;
tmp.left = (parseInt(tmp.left) - 1) + 'px';
if (parseInt(tmp.left) <= m_left*(-1)) {
tmp.left = (m_left*(ctnt_length-1)) + 'px';
}
if (btemp>(m_amount-1)*ctnt_length) {
bflag=false;
btemp=0;
window.setTimeout(function(){bflag=true;btemp=0;},bwait);
}
}
}
window.setTimeout(function(){scroll_m();},bspeed);
}
function insertText_m(i) {
htmlstr_m='<div style="left:'+((m_left)*i)+'px; width:'+(m_amount+0)+'px; position: absolute; top:0; padding:0" id="scroll_area'+i+'">\n';
htmlstr_m+=ctnt[i]+'\n'+'<\/div>\n';
document.write(htmlstr_m);
//alert(i + " " + htmlstr_m);
}
//]]>
</script>
<div style="height:110px; width:750px; position:absolute; overflow:hidden;" onmouseover="bmouse=0" onmouseout="bmouse=1">
<script type="text/javascript">
//<![CDATA[
startText_m();
//]]>
</script>
</div>
</body>
</html>
추천
5
5
댓글 5개
좋은팁 감사합니다.^^
감사합니다 ^^ 시간이 안되서 적용이 될런지가 문제인데.. 슈쿠마님 챗방에서 본후 또 뵙네요 ㅎ 구글정책때문에 스크롤을 사용하면 짤리기 때문에 ㅠ_ㅠ 또 좋은팁 공유바랍니다~
감사합니다~
구글정책에 스크롤 사용 금지군요
감사합니다.
