'Javascript'에 해당되는 글 49건

  1. 2011.07.07 [Javascript] - Auto Td Row span
  2. 2011.07.01 [Javascript] - Iframe Auto Resize
  3. 2011.06.29 [Javascript] - Ajax로 페이지 Call하는법
  4. 2011.06.29 [Javascript] - 동영상 제어
  5. 2011.06.28 [Javascript] - 슬라이딩 터치
  6. 2011.06.28 [Javascript] - 달력(심플)
  7. 2011.06.28 [Javascript] - 페이지 로딩 소스
  8. 2011.06.28 [Javascript] - 레이어 Fade In & Fade Out
  9. 2011.06.28 [Javascript] - 클릭시 펼침 메뉴

[Javascript] - Auto Td Row span

Javascript 2011. 7. 7. 09:49
반응형

 

rowspanExample.html
rowspanExample-gundallove.htm
rowspan-gundallove.js
rowspan.js
예제 입니다.

<html>
<head>
<script language='javascript' src='./rowspan.js'></script>
<script language='javascript'> function init()
 {
  cellMergeChk(document.getElementById("dataList"), 1, 0);  //첫번째 td 처리
//  cellMergeChk(document.all.dataList, 1, 1);  //두번째 td 처리
 }
</script>
</head>
<body onload='init()'>
<table id='dataList' border='1'>
<tr>
 <td>학년</td>
 <td>반</td>
 <td>이름</td>
</tr>
<tr>
 <td>1</td>
 <td>1</td>
 <td>사람1</td>
</tr>
<tr> 
 <td>1</td>
 <td>2</td>
 <td>저사람2</td>
</tr>
<tr> 
 <td>1</td>
 <td>2</td>
 <td>저사람2</td>
</tr>
<tr> 
 <td>2</td>
 <td>1</td>
 <td>저사람3</td>
</tr>
<tr> 
 <td>2</td>
 <td>2</td>
 <td>저사람4</td>
</tr>
<tr>
 <td>1</td>
 <td>1</td>
 <td>사람1</td>
</tr>
<tr> 
 <td>1</td>
 <td>2</td>
 <td>저사람2</td>
</tr>
<tr> 
 <td>1</td>
 <td>2</td>
 <td>저사람2</td>
</tr>
<tr> 
 <td>2</td>
 <td>1</td>
 <td>저사람3</td>
</tr>
<tr> 
 <td>2</td>
 <td>2</td>
 <td>저사람4</td>
</tr>
</table>
</body>
</html>

 

반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 이미지 자동 슬라이드(Mouse Over Stop Mouse Down Play)  (0) 2011.07.07
[Javascript] - 이미지 슬라이드(Fade In & Fade Out & Prev Next Button)  (0) 2011.07.07
[Javascript] - Iframe Auto Resize  (0) 2011.07.01
[Javascript] - Ajax로 페이지 Call하는법  (0) 2011.06.29
[Javascript] - 동영상 제어  (0) 2011.06.29
:

[Javascript] - Iframe Auto Resize

Javascript 2011. 7. 1. 11:03
반응형
<head>
 <script> 
  function doResize() 
  { 
   changepage.height  = ifrm.document.body.scrollHeight; 
   changepage.width    = ifrm.document.body.scrollWidth;  
  } 
 </script>
</head>

사용법 ▼

<td id="changepage">                      
 <iframe id="ifrm" name="ifrm" onload="doResize();" src="/admin/board/list2.php?BOARDID=report" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
 </iframe>
</td>
반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 이미지 슬라이드(Fade In & Fade Out & Prev Next Button)  (0) 2011.07.07
[Javascript] - Auto Td Row span  (0) 2011.07.07
[Javascript] - Ajax로 페이지 Call하는법  (0) 2011.06.29
[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
:

[Javascript] - Ajax로 페이지 Call하는법

Javascript 2011. 6. 29. 17:12
반응형

<script>
function Callajax(url){

 try{
  if(window.XMLHttpRequest){
   tXhttp = new XMLHttpRequest();
  } else if(window.ActiveXObject) {
   try {
    tXhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e1) {
    try {
     tXhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
     
    }
   }
  }
 }catch(e3){
  try {
   tXhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e1) {
   try {
    tXhttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e2) {
         
   }
  }
 }

 if (tXhttp != null){
  tXhttp.open("GET", url, false);
  tXhttp.send();   
   if (tXhttp.readyState == 4) {
    menuText = tXhttp.responseText;    
   }
 }

 return menuText;
}


function moviestart(lnk){
 if (lnk == ""){
  var url = "./movie_form.php";
 }else{
  var url = lnk;
 }
 var rtn = Callajax(url);
 document.getElementById("movielist").innerHTML = rtn;
}


window.onload = function(){
 moviestart("");
}
</script>

반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - Auto Td Row span  (0) 2011.07.07
[Javascript] - Iframe Auto Resize  (0) 2011.07.01
[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
:

[Javascript] - 동영상 제어

Javascript 2011. 6. 29. 15:50
반응형

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 자바스크립트..동영상 제어..

 

1. 먼저 플레이어를 세팅한후에

2. controls.currentMarker 속성을 이용하여 마킹한 부분을 찾아 가면 됩니다.

 

<OBJECT id=MediaPlayer1 style="LEFT: 0px; TOP: 0px" codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 type=application/x-oleobject height=304 standby="Loading Microsoft? Windows? Media Player components..." width=320 classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
   <PARAM NAME="URL" VALUE='mms://파일명.wmv'>
   <PARAM NAME="autoStart" VALUE="-1">
   <PARAM NAME="currentMarker" VALUE="0">
   <PARAM NAME="volume" VALUE="50">
   <PARAM NAME="uiMode" VALUE="full">
   <PARAM NAME="fullScreen" VALUE="0">
  </OBJECT>

 

<a href="./javascript:setPlayMarker(1);">a위치<br>
<a href="./javascript:setPlayMarker(2);">b위치<br>


<script language="javascript">
  <!--//
    function setPlayMarker( m ){
      oPlayer = document.getElementById('MediaPlayer1');
      oPlayer.controls.currentMarker = m;
      oPlayer.controls.play();     
    }
  //-->
</script>

 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

동영상 이미지 버튼으로 재생하기, 그다지 어렵지 않습니다.

 

// 동영상 재생, 멈춤, 일시정지 스크립트 입니다.
// <head></head>사이에 넣는 것이 가장 이상적이겠죠~

<script language="JavaScript">
function OnPlay()
{
    if (MediaPlayer1.PlayState != 2)
       {
       MediaPlayer1.Play();
       }
}
function OnStop()
{
       MediaPlayer1.Stop();
       MediaPlayer1.CurrentPosition=0;
}
function OnPause()
{
         if (MediaPlayer1.PlayState == 2)
       {
       MediaPlayer1.Pause();
       }
}

</script>

 

// 동영상 삽입 부분입니다.
// ShowStatusBar값이 0이니까 밑에 상태바(재생,멈춤등의 버튼이 있는)가 생기지 않고 동영상만 나타납니다.
// AutoStart값이 1이니까 자동 실행됩니다.

<div id="vod" style="width:가로값; height:세로값; z-index:1">
<object id="MediaPlayer1" width="가로크기" height="세로크기" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft?Windows?Media Player components..." type="application/x-oleobject">
<param name="Filename" value="주소">
<param name="ShowStatusBar" value="0">
<param name="AutoStart" value="1">
<param name="ShowControls" value="0">
<param name="AllowChangeDisplaySize" value="0">
<param name="DisplaySize" value="0">
<PARAM NAME="DISPLAYMODE" VALUE="4">
</object>
</div>

 

// 동영상 재생, 멈춤, 일시정지의 버튼이 있는 이미지 입니다.
// 버튼을 하나씩 쪼개지 않고 통이미지에 이미지맵을 이용하는 경우지요.
// 이미지맵의 이름이 같아야 겠죠.(아래 소스에서는 mm이죠.)
// 각 버튼의 영역을 이미지맵으로 선택하고 onclick값을 넣어주면 됩니다.

<img src="./이미지주소" width="가로크기" height="세로크기" border="0" usemap="#mm">
<map name="mm" id="mm">
  <area shape="rect" coords="167,2,181,15" href="./#" onclick="OnPause()" alt="일시정지" title="pause">
  <area shape="rect" coords="152,2,166,15" href="./#" onclick="OnStop()" alt="멈춤" title="stop">
  <area shape="rect" coords="137,2,151,15" href="./#" onclick="OnPlay()" alt="재생" title="play">
</map>

출처 : http://design123.kr/bs/?document_srl=14946&mid=sub_designsource_ProgramTip&sort_index=readed_count&order_type=desc
반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - Iframe Auto Resize  (0) 2011.07.01
[Javascript] - Ajax로 페이지 Call하는법  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
:

[Javascript] - 슬라이딩 터치

Javascript 2011. 6. 28. 18:48
반응형

[Javascript] - Sliding Touch

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <script type="text/javascript">

if(window.addEventListener) {

 window.addEventListener('load', function() {

  setTimeout(scrollTo, 0, 0, 1);

 }, false);

}

 

// touch actions

var a = 0;

var b = 0;

 

document.addEventListener("touchstart", function(event){

var touch = event.touches[0];

  a = touch.pageX;

});

 

document.addEventListener("touchmove", function(event){

   var touch = event.touches[0];

  b = touch.pageX

 

 

}

 );

 

 

  document.addEventListener("touchend", function(event){

if(a <= 90 && a != 0 && b >= 150){

alert('왼쪽에서 오른쪽');

 

 

}else if(a >= 230 && b != 0 && b <= 230){

alert('오른쪽에서 왼쪽');

 

 

}

a = 0;

b = 0;

 

});

function roll_back(){

history.back();

return false;

a = 0;

b = 0;

}

</script>

터치 하세요


반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - Ajax로 페이지 Call하는법  (0) 2011.06.29
[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 레이어 Fade In & Fade Out  (0) 2011.06.28
:

[Javascript] - 달력(심플)

Javascript 2011. 6. 28. 18:46
반응형

[Javascript] - 달력(심플)

<html>

<head>

<script language="JavaScript">

function showCalendar(y, m) {

    var text = '<table>\n<tr><td colspan=7 style="text-align:center">';

    text += '<span onclick="showCalendar('+(y-1)+','+m+')"> Y- </span>';

    text += '<span onclick="showCalendar('+(m==1?(y-1)+','+12:y+','+(m-1))+')"> M- </span>';

    text += '[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']';

    text += '<span onclick="showCalendar('+(m==12?(y+1)+','+1:y+','+(m+1))+')"> M+ </span>';

    text += '<span onclick="showCalendar('+(y+1)+','+m+')"> Y+ </span>';

    text += '</td>';

    var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400

          +m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;

    for (i = 0; i < 42; i++) {

        if (i%7==0) text += '</tr>\n<tr>';

        if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30))

            text += '<td> </td>';

        else

            text += '<td' + (i%7 ? '' : ' style="color:red;"') + '>' + (i+1-d1) + '</td>';

    }

    document.getElementById('calendarDiv').innerHTML = text + '</tr>\n</table>';

}

</script>

</head>

<body onload="showCalendar(2006,8)">

</body>

</html>

 

<script language="JavaScript">

function showCalendar(y, m) {

    var text = '<table bgcolor="white" border="0">\n<tr><td colspan=7 style="text-align:center">';

    text += '<span onclick="showCalendar('+(y-1)+','+m+')" style="cursor:pointer;"> 작년 </span>';

    text += '<span onclick="showCalendar('+(m==1?(y-1)+','+12:y+','+(m-1))+')" style="cursor:pointer;"> 이전달 </span>';

    text += '[' + y + '/' + ((m < 10) ? ('0' + m) : m) + ']';

    text += '<span onclick="showCalendar('+(m==12?(y+1)+','+1:y+','+(m+1))+')" style="cursor:pointer;"> 다음달 </span>';

    text += '<span onclick="showCalendar('+(y+1)+','+m+')" style="cursor:pointer;"> 내년 </span>';

    text += '</td>';

    text += '<td>';

    text += '<font color="blue">닫기</font>';

    text += '</td>';

    var d1 = (y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400

          +m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;

    for (i = 0; i < 42; i++) {

        if (i%7==0) text += '</tr>\n<tr>';

        if (i < d1 || i >= d1+(m*9-m*9%8)/8%2+(m==2?y%4||y%100==0&&y%400?28:29:30))

            text += '<td> </td>';

        else

            text += '<td' + (i%7 ? '' : ' style="color:red;"') + '>' + (i+1-d1) + '</td>';

    }

    document.getElementById('calendarDiv').innerHTML = text + '</tr>\n</table>';

}

function opencal() {

 document.getElementById("calendarDiv").style.display="block";

}

function closecal() {

 document.getElementById("calendarDiv").style.display="none";

}

</script>

<body onload="showCalendar(<%=TYear%>,<%=TMonth%>)">

달력


반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 레이어 Fade In & Fade Out  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
:

[Javascript] - 페이지 로딩 소스

Javascript 2011. 6. 28. 18:17
반응형

<title>페이지 로딩 </title>

<!-- 로딩이 되면 로딩창이 사라져버립니다. -->

<script type="text/javascript">

function loading(){

 if(document.getElementById("loading").innerHTML < 100){

 document.getElementById("loading").innerHTML++;

 setTimeout("loading()","10"); // 오른쪽에 1씩오르는 주기를 써줍니다. 1000 = 1초 , [10권장]

 }else{

 document.getElementById("load").style.display="none";

 document.getElementById("wrapper").style.display="";

 // 쿠키사용으로 다른페이지로 이동할수잇지만 저는 Style 보여주기를 했습니다.

 }

}

</script>

</head>

<body onload="loading()">

<span id="loading">0</span>% / 100%

내용

</body>


반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 레이어 Fade In & Fade Out  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
:

[Javascript] - 레이어 Fade In & Fade Out

Javascript 2011. 6. 28. 18:17
반응형

[Javascript] - 레이어 Fade in & 레이어 Fade out

----------------- 레이어 Fade in -----------------

<script language="JavaScript1.2">

 i = 0;

 function showlayer () {  

   if (i == 0) {

    document.getElementById("Fade in될 레이어ID").style.display='block';

    document.getElementById("Fade in될 레이어ID").style.opacity = 0;

      document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity=0)";

    }

     i = i + 25;

     var op = i / 100;   

     //alert(op);

   document.getElementById("Fade in될 레이어ID").style.opacity = 1 + op;

     document.getElementById("Fade in될 레이어ID").style.filter = "alpha(opacity="+(0 + i)+")";

     //alert(document.getElementById("Fade in될 레이어ID").style.filter);

    if(i > 99){

     clearInterval(tid);

     i = 0;

    //alert(i);

    }

  }

function show(){

tid = setInterval(showlayer,50);

}

</script>

onclick = "show();"

----------------- 레이어 Fade out -----------------

<script language="JavaScript">

 i = 0;

 function hideLayer () {  

     i = i + 25;

     var op = i / 100;   

     //alert(j);

   parent.document.getElementById("Fade out될 레이어ID").style.opacity = 1 - op;

     parent.document.getElementById("Fade out될 레이어ID").style.filter = "alpha(opacity="+(100 - i)+")";

     //alert(document.getElementById("Fade out될 레이어ID").style.filter);

    if(i > 99){

     clearInterval(tid);

     parent.document.getElementById("Fade out될 레이어ID").style.display='none';

     i = 0;

    }

  }

function hide(){

tid = setInterval(hideLayer,50);

}

</script>

onclick = "hide();"



반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 클릭시 펼침 메뉴  (0) 2011.06.28
:

[Javascript] - 클릭시 펼침 메뉴

Javascript 2011. 6. 28. 18:16
반응형

[Javascript] - Onclick 메뉴 펼침

<script>

var old = '';

function menuclick(obj) {

 

  if(old != '' && old != obj){

   document.getElementById(old).style.display = 'none';

  }

  var target = document.getElementById(obj);

  if(target.style.display == ''){

   target.style.display = 'none';

  }

  target.style.display = (target.style.display=='none' ? 'block':'none');

  old = obj;

  reSize();

}

var Selected = ""

function SelectIcon(WhichIcon){

  if (Selected != "") {

    Selected.style.fontWeight = "normal";

  }

  Selected = WhichIcon;

  WhichIcon.style.fontWeight = "bold";

}

</script>


반응형
저작자표시

'Javascript' 카테고리의 다른 글

[Javascript] - 동영상 제어  (0) 2011.06.29
[Javascript] - 슬라이딩 터치  (0) 2011.06.28
[Javascript] - 달력(심플)  (0) 2011.06.28
[Javascript] - 페이지 로딩 소스  (0) 2011.06.28
[Javascript] - 레이어 Fade In & Fade Out  (0) 2011.06.28
:
◀ PREV : [1] : [2] : [3] : [4] : [5] : NEXT ▶

티스토리툴바