DIV영역 하단부가 상하로 이동하는 예제

And here is my very slick menu!

Toggle

<html>
<head>
 <title>Javascript test</title>
 <script language="javascript">
 
  var active = 1;
  var height = 100;

  function toggle_visible() {
  
   if(active == 0) {
    
    active = 1;
    
    divPlusOne();    
   
   } else if(active == 1){
   
    active = 0; 
     
    divMinusOne();
   
   }
  
  }
  
  function divPlusOne() {
   
   if(height <= 100) {
   
    document.getElementById('testDiv').style.visibility="visible"; 
   
    height = height + 1;
    document.getElementById('testDiv').style.height=height + 'px';  
    
    window.setTimeout('divPlusOne()', 1);
    
   }
  
  }
  
  function divMinusOne() {
   
   if(height >= 20) {
   
    height = height - 1;
    document.getElementById('testDiv').style.height=height + 'px';
    
    window.setTimeout('divMinusOne()', 1);
    
   } else {
   
    document.getElementById('testDiv').style.visibility="hidden";
   
   }
  }
 </script>
</head>
<body>

 <div id="testDiv" style="border: #000000 1px solid; height: 100px;">And here is my very slick menu!</div>
<br />

 <a href="#" onClick="toggle_visible()">Toggle</a><br />
<br />

</body>
</html>

[출처]http://micropilot.tistory.com/category/Javascript?page=75#

팝업 윈도우에서 입력한 값을 부모 윈도우에 설정하기

부모 윈도우(parent.html)

<HTML>
 <HEAD>
  <TITLE> opener Window </TITLE>

 <script>
  function showChild(){
   popup = window.open("child.html", "popWnd", "width=500,height=200,toolbar=no,location=no,directories=no,status=no,menubar=no, scrollbars=no,resizable=yes,copyhistory=no");

   document.getElementById("div01").innerHTML = "팝업 윈도우에서 변경할 문자열";
  }
 </script>

 </HEAD>
 <BODY><CENTER><br><br>

 <div id="div01"> 
 아래의 버튼을 누르면 팝업 윈도우가 보입니다.<br>
 팝업 윈도우의 폼에 임의의 문자열을 입력해 보세요.
 </div>

 <br><br>
 <input type='button' value="팝업 윈도우 보이기" onClick="showChild();">

 </CENTER></BODY>
</HTML>

자식 윈도우(child.html)

<HTML>
 <HEAD>
  <TITLE> Child Window </TITLE>

 <script>
  function passToOpener(){
   opener.document.getElementById("div01").innerHTML=document.childForm.field01.value;
   window.close();
  }
 </script>

 </HEAD>

 <BODY><CENTER>

  <form name="childForm">
   입력:<input type="text" name="field01"><br><br>

   <input type="button" value="위에 입력한 내용을 부모 윈도우로 보내기" onClick="passToOpener()">
  </form>

 </CENTER></BODY>
</HTML>

[출처]http://micropilot.tistory.com/category/Javascript?page=78

innerHTML Example

document.getElementById("xxx").innerHTML="Hello World";
다음 2개의 라인 중 한개를 반복해서 클릭해 보세요.

1. Click (링크를 이용한 경우)

2.innerHTML Test (<div>태그를 이용한 경우)

<SCRIPT>
message = "<font color='red'><center>Hello World<br />";
message += "1<br />2<br />3<br />4<br />5</center></font>"; 

on=1;
function toggle(){
  if(on==1){
    document.getElementById("msg").innerHTML=message;
    on=0;
  }else{
    document.getElementById("msg").innerHTML="";
    on=1;
  }
}
</SCRIPT>

<CENTER><STRONG><FONT size=4>document.getElementById("xxx").innerHTML="Hello World";</FONT></STRONG> 
<P>
<br /> 다음 2개의 라인 중 한개를 반복해서 클릭해 보세요.
<br />
<br />1. <A href="javascript:toggle();">Click</A> (링크를 이용한 경우)<br /><br />
<DIV onclick=toggle();>2.innerHTML Test (<div>태그를 이용한 경우)</DIV><br />
<DIV id=msg> </DIV>
</CENTER>

[출처]http://micropilot.tistory.com/category/Javascript?page=79

자바스크립트를 이용하여 마우스 위치 구하기

<html>
<body>

<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>

<script language="JavaScript1.2">
<!--

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

//-->
</script>
</body>
</html>

메인 윈도우에서 생성한 팝업 윈도우에서 서버에 요청하고 그 응답을 메인 윈도우에서 받는 예제

main.html 이 브라우저에 로드되면 mainWnd라는 이름을 붙여주고 
현재 윈도우에서 생성된 팝업 윈도우(popup.html)가  웹서버에 요청하고 그 응답(response.html)이
mainWnd를 갱신하도록 한다.

main.html (Parent Window)

<HTML>
<HEAD><TITLE> Main.html </TITLE>
<script>
 function openWnd(){
  window.open("popup.html", "pop", "toolbar=no,menubar=no,width=300,height=200,resizable=yes,left=200,top=200");
 }
</script>
</HEAD>
<BODY onLoad="window.name='mainWnd'">
<input type="button" value="Winopen" onClick="openWnd();">
</BODY>
</HTML>

popup.html (Child Window)

<HTML>
<HEAD><TITLE> Popup window </TITLE></HEAD>
<BODY>  
<!--폼을 처리하는 response.html은 target이 mainWnd이므로
폼을 전송하면 그 결과가 mainWnd라는 이름의 브라우저 화면에 나타난다.-->

<form action="response.html" method="post" target="mainWnd" onSubmit="window.close();">
<input type="submit" value="Send">
</form>

</BODY>
</HTML>

response.html

<HTML>
<HEAD><TITLE> response.html</TITLE></HEAD>
<!--이 문서는 mainWnd라는 이름의 브라우저 화면에 나타난다-->
<BODY>
Acton.html
</BODY>
</HTML>

자바스크립트 타이머, 스타일시트를 이용하여 지정된 시간 경과후 내용 보여주기

<script language="javascript">

setTimeout("hello()", 4000);

function hello(){
   document.getElementById("answer").style.visibility="visible";
}

</script>

<div id="answer" style="visibility: hidden;">
<span style="color: red;">
</span>
<br />
<h1>
<span style="color: red;">Hello World</span></h1>
</div>

HTML TIP

margin과 padding의 차이
http://clason.tistory.com/321