마음보자기 HEART-WRAPPER ::

드래그 가능한 다중 레이어 팝업창 띄우기

컴퓨터/JavaScript 2007/10/08 15:39

다중 레이어 팝업창을 띄우고 드래그를 할 수 있는 자바스크립트 소스를 찾다가 못찾아서
한번 만들어 봤습니다.

<html>
<head>
<title> New Document </title>
<script language="JavaScript1.2">
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  hotDog=isIE ? event.srcElement : e.target;
  idx=hotDog.id.substr(hotDog.id.length-1,1);
  whichDog=isIE ? eval("document.all.divpop" + idx) : document.getElementById("divpop" + idx);  
  while (hotDog.id!=hotDog.id&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  }  
  if (hotDog.id){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd;
  }
}
function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  
}
function ddN4(whatDog){
  if (!isN4) return;
  N4=eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}
function hideMe(id){
  if ( document.getElementById('chkbox'+id).checked ) {
    setCookie( "mainPop"+id, "done" , 1 );
 document.getElementById('chkbox'+id).checked = false;
  }
  if (isIE||isNN) document.getElementById('divpop'+id).style.visibility="hidden";
  else if (isN4) document.divpop.visibility="hide";  
}
function setCookie( name, value, expiredays ) {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>
<style type="text/css">
<!--
td {
  font-family: Tahoma, 돋움, Dotum, sans-serif;
  font-size: 11px;
  line-height: 145%;
  color: #000000;
}
-->
</style>
</head>
<body>
<div id="divpop0" style="position:absolute;width:450px;left:100;top:100;visibility:hidden;z-index:1">
<table border="0" width="450" bgcolor="#0084FF" cellspacing="0" cellpadding="5">
<tr>
    <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
        <tr>
            <td id="titleBar0" style="cursor:move" width="100%">
            <ilayer width="100%" onSelectStart="return false">
            <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop0)" onMouseout="isHot=false">
            <font face="Arial" color="#FFFFFF">메세지 0</font>
            </layer>
            </ilayer>
            </td>
            <td style="cursor:hand" valign="top">
            <a href="#" onClick="hideMe(0);return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
            </td>
        </tr>
        <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:14px" colspan="2">
            마음보자기 레이어 팝업창 입니다.<br>
            이곳에 공지 또는 광고 내용을 입력하세요..<br>
            팝업창은 무한대로 열수있고<br>
            특정 팝업창만 드래고, 닫기, 오늘 하루 안열기가 됩니다. *^^*
            </td>
        </tr>
  <tr>
         <td align="right" bgcolor="#EFEFEF" width="100%" height="25" colspan="2" style="padding:5px"><input type="checkbox" name="chkbox0" id="chkbox0" value="checkbox" onfocus="this.blur();" onclick="hideMe(0);"> 하루 동안 이 창을 열지 않습니다. </td>
      </tr>
        </table> 
    </td>
</tr>
</table>
</div>
<div id="divpop1" style="position:absolute;width:450px;left:130;top:130;visibility:hidden;z-index:2">
<table border="0" width="450" bgcolor="#0084FF" cellspacing="0" cellpadding="5">
<tr>
    <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
        <tr>
            <td id="titleBar1" style="cursor:move" width="100%">
            <ilayer width="100%" onSelectStart="return false">
            <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop1)" onMouseout="isHot=false">
            <font face="Arial" color="#FFFFFF">메세지 1</font>
            </layer>
            </ilayer>
            </td>
            <td style="cursor:hand" valign="top">
            <a href="#" onClick="hideMe(1);return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
            </td>
        </tr>
        <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:14px" colspan="2">
            마음보자기 레이어 팝업창 입니다.<br>
            이곳에 공지 또는 광고 내용을 입력하세요..<br>
            팝업창은 무한대로 열수있고<br>
            특정 팝업창만 드래고, 닫기, 오늘 하루 안열기가 됩니다. *^^*
            </td>
        </tr>
  <tr>
         <td align="right" bgcolor="#EFEFEF" width="100%" height="25" colspan="2" style="padding:5px"><input type="checkbox" name="chkbox1" id="chkbox1" value="checkbox" onfocus="this.blur();" onclick="hideMe(1);"> 하루 동안 이 창을 열지 않습니다. </td>
      </tr>
        </table> 
    </td>
</tr>
</table>
</div>
<div id="divpop2" style="position:absolute;width:450px;left:160;top:160;visibility:hidden;z-index:3">
<table border="0" width="450" bgcolor="#0084FF" cellspacing="0" cellpadding="5">
<tr>
    <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
        <tr>
            <td id="titleBar2" style="cursor:move" width="100%">
            <ilayer width="100%" onSelectStart="return false">
            <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop2)" onMouseout="isHot=false">
            <font face="Arial" color="#FFFFFF">메세지 2</font>
            </layer>
            </ilayer>
            </td>
            <td style="cursor:hand" valign="top">
            <a href="#" onClick="hideMe(2);return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
            </td>
        </tr>
        <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:14px" colspan="2">
            마음보자기 레이어 팝업창 입니다.<br>
            이곳에 공지 또는 광고 내용을 입력하세요..<br>
            팝업창은 무한대로 열수있고<br>
            특정 팝업창만 드래고, 닫기, 오늘 하루 안열기가 됩니다. *^^*
            </td>
        </tr>
  <tr>
         <td align="right" bgcolor="#EFEFEF" width="100%" height="25" colspan="2" style="padding:5px"><input type="checkbox" name="chkbox2" id="chkbox2" value="checkbox" onfocus="this.blur();" onclick="hideMe(2);"> 하루 동안 이 창을 열지 않습니다. </td>
      </tr>
        </table> 
    </td>
</tr>
</table>
</div>
<script language="JavaScript">
<!--
cookiedata = document.cookie;
for (i=0;i<3;i++){
 if ( cookiedata.indexOf("mainPop"+i+"=done") < 0 ) {
   document.all['divpop'+i].style.visibility = "visible";
 }
 else {
 document.all['divpop'+i].style.visibility = "hidden";
 }
}
//-->
</script>
</body>
</html>

javascript, 다중 레이어, 레이어, 팝업창

NO TRACKBACK AND COMMENT 3

getElementById()와 getElementsByName()의 차이

컴퓨터/JavaScript 2007/04/13 14:33

getElementById 와 getElementsByName 의 차이는
리턴 값이 단일값이냐 배열값이냐 의 차이일 것 같다.

<input id="test" value="뚱땡">

의 리턴값을 알고자 한다면,

var Obj = document.getElementById("test");
alert( Obj.value );                        // 요기서 "뚱땡"이 출력되겠삼

그럼 getElementsByName의 예는,

<input name="test" value="바불">
<input name="test" value="뚱땡">
<input name="test" value="말미잘">

<script language="javascript">
   var obj = document.getElementsByName("test");
   alert( obj[1].value);                  // 요기서도 역시 "뚱땡"이가 출력되겠삼
</script>

이상, 주저리 끝!

getElementById(), getElementByName(), javascript, 자바스크립트

NO TRACKBACK AND COMMENT 8

All that node stuff can be really tricky and vary on different browsers, but by combining the HTML id attribute with the getElementById() method of the document object, it is much easier to get a handle on any HTML object. The getElementById() method returns a reference to the HTML element that can then be manipulated by a JavaScript program. Suppose you have a <body> tag defined with an id attribute, as:

<body id="bdy1">

Now in JavaScript you can reference the body element with the getElementById() method as follows:

bdyreference = document.getElementById("bdy1")

Before the DOM was standardized, Internet Explorer (version 4+) provided another mechanism for accessing all HTML elements within the document, called the all property of the document object. The statement shown above written for IE could be written:

bdyreference = document.all["bdy1"];

And Netscape 4 provided yet another format:

bdyreference = document.layers["bdy1"]

Starting with IE5+ and NN6+, the W3C's getElementID() method is used rather than the all or the layers property. The newer browsers support the W3C standardized DOM although many Web pages were written using the older formats.

Example 15.23

    <html>
    <head><title>The Dom and Id's</title></head>
1   <body id="body1">
2       <h1 id="head1">Heading Level 1</h1>
3       <p id="para1">
            This is a paragraph
        </p>
    </body>
    <script name="javascript">
4       var h1tag=document.getElementById("head1");
5       var bodytag=document.getElementById("body1");
6       var paratag = document.getElementById("para1");
7       h1tag.style.fontFamily="verdana";
        h1tag.style.fontSize="32";
        paratag.style.fontSize="28";
        paratag.style.color="blue";
        bodytag.style.backgroundColor="pink";
8       document.write(document.getElementById("body1")+"<br>");
        document.write(document.getElementById("head1")+"<br>");
        document.write(document.getElementById("para1")+"<br>");
    </script>
    </body>
    </html>

EXPLANATION

The <body> tag is given an id called "body1".
The <h1> tag is given an id called "head1".
The <p> tag is given an id called "para1".
In the JavaScript program, the getElementById() method returns a reference to an H1 element, and assigns that value to the variable called h1tag.
The getElementById() method returns a reference to a BODY element, and assigns that value to the variable called bodytag.
The getElementById() method returns a reference to a P element, and assigns that value to the variable called paratag.
Now, by using the style property (for a complete discussion, see "The style Object and CSS" on page 553), the elements are assigned new values for font size and color, causing them to change change dynamically.
The value returned by the getElementById() method is displayed for each of the elements by using their respective IDs. As shown in the output, each one of these HTML elements is an object.

getElementById(), javascript, 자바스크립트

NO TRACKBACK AND COMMENT 10

오브젝트에 대한 접근 - getElementById( )

컴퓨터/JavaScript 2007/04/13 12:38

Ajax로 구성된 어플리케이션을 분석하다보면, getElementById( )란 함수를 자주 보게 된다. 이것은 document 오브젝트에 내장된 함수로서, 현재 브라우저내의 오브젝트를 id 기준으로 찾아내고 해당 오브젝트에 대한 참조를 반환한다.

우선 간단히 살펴보자. 다음 예제는 input 텍스트를 찾아서 해당 내용을 경고창(alert)으로 출력하는 예제이다.

<body> 
<input id="input_txt" type="text" value="getElementId로 값 구하기" /> 
<script type="text/javascript"> 
var inputTxt = document.getElementById('input_txt'); 
alert(inputTxt.value); 
</script> 
</body>

위 코드에서 input 텍스트 필드에 id가 input_txt로 설정되어 있고, 텍스트 필드의 내용(value)으로 'getElementId로 값 구하기'라고 설정되어 있다. 그리고 자바스크립트에서 document.getElementById('input_txt')로 텍스트 필드의 참조를 구한다. 이 참조는 inputTxt에 저장되고 inputTxt.value는 텍스트 필드의 내용(value) 값을 가리키는 것이다.

getElementById( ) 이외에 getElementByTagName( )과 getElementByName( ) 함수를 통해 원하는 오브젝트에 대한 접근이 가능하다. 하지만 전자는 바로 유니크한 오브젝트에 접근하는 것이 아니고(태그의 연관배열을 리턴하고 getElementByTagName('TD').item(0)과 같이 접근해야 함), 후자는 IE에서만 가능하다. 따라서 id로 구별하여 접근할 수 있는 getElementById( )를 많이 쓴다.

innerHTML 속성

document.write( )를 사용하면 화면에 출력이 가능하다. 그런데 이것은 페이지가 로딩될 때에만 출력된다(지금까지 내가 알기론...). 예를 들어 이미 화면이 모두 로딩 된 다음 추가 텍스트를 특정 위치에 다시 뿌려줄 수 없다. 이런 상황에서는 <div>의 innerHTML 속성을 사용해서 화면출력을 할 수 있다.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>innerHTML 출력</title>
<script type="text/javascript"> 
  function printOut(){ 
    var inputTxt = document.getElementById('input_txt').value; 
    var outputForm = document.getElementById('output_form'); 
    outputForm.innerHTML = inputTxt; 
} 
</script>
</head> 
<body> 
<div> 출력할 문자열을 입력하세요 : <input id="input_txt" type="text" /> <input type="button" value="출력" onclick="printOut();" /> </div> 
<div id="output_form"> </div> 
</body> 
</html>

위 코드를 실행하면 getElementById('input_txt')로 입력한 텍스트의 값을 구하고, '출력' 버튼을 누르는 순간 getElementById('output_form')을 찾아서 outputForm으로 참조하고 innerHTML 속성을 바꾸어 입력 문자열을 출력한다.

getElementById(), InnerHTML, javascript, 오브젝트, 자바스크립트

NO TRACKBACK AND COMMENT 9

[자바스크립트] setInterval과 setTimeout의 차이

컴퓨터/JavaScript 2007/04/10 17:07

timer1 = setTimeout(a, b)는 b초후 a함수를 실행합니다.(1회 실행)
timer2 = setInterval(a, b)는 b초마다 a함수를 실행합니다.(loop)

모두 실행후 중단할때에는 clearTimeout(timer1) 과 clearInterval(timer2) 로 실행을 중단합니다.

timer는 setTimeout과 setInterval을 실행한 후에 리턴되는 타이머 ID이구요,
이 타이머ID로 타이머를 중단할 수 있습니다.

setTimeout 을 이용한 반복문:

<script>
cnt = 0;
function a(){
  if(cnt<10){
    cnt++;
    alert(cnt);
    timer=setTimeout(a, 1000); //1초 후에 a함수 실행 - 재귀호출
  }else{
    clearTimeout(timer);
  }
}
a();
</script>

setInterval 을 이용한 반복문:

<script>
cnt = 0;
function a(){
  if(cnt<10){
    cnt++;
    alert(cnt);
  }else{
    clearInterval(timer);
  }
  timer=setInterval(a, 1000); //1초 후에 a함수 실행 - 재귀호출
</script>

javascript, setInterval, setTimeout, 자바스크립트

NO TRACKBACK AND COMMENT ONE

BLOG ARTICLE javascript | 5 ARTICLE FOUND

드래그 가능한 다중 레이어 팝업창 띄우기

getElementById()와 getElementsByName()의 차이

The getElementById() Method

Example 15.23

오브젝트에 대한 접근 - getElementById( )

[자바스크립트] setInterval과 setTimeout의 차이

ARTICLE CATEGORY

ARCHIVE & SEARCH

RECENT ARTICLE

RECENT COMMENT

RECENT TRACKBACK

COUNTER