[JavaScript] Draggable Window

programming web dev
1

I’ve been trying for the last 6 hours to get this to work with multiple windows… if anyone could help me out it would be greatly appreciated.


<html>
<head>


<script language="JavaScript1.2">
// Script Source: CodeLifter.com Copyright 2003 //
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.home : document.getElementById("home");  
  hotDog=isIE ? event.srcElement : e.target;  
  while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  }  
  if (hotDog.id=="titleBar"){
    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(win){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.win.visibility="hide";
}

function showMe(win){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.win.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>
<style type="text/css">
body{margin:0px;overflow: hidden;}
</style>
</head>

<body>
<div style="height:100%; width:100%; margin:0px;background: url(img/backgrad.jpg) repeat-x bottom;">
<!-- Home -->

<div id="home" style="position:absolute;width:100px;left:200px;top:300px;height:200px;visibility:visible">
  <ilayer width="100%" onSelectStart="return false">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="img/window_tl.gif"></td>
      <td id="titleBar" style="cursor:move" width="100%" background="img/window_tm.gif"><img src="img/title_home.gif"></td>
      <td><a href="#" onclick="hideMe('home');return false"><img src="img/option_x.gif" style="border:0px"></a></td>
      <td><img src="img/window_tr.gif"></td>
    </tr>
    <tr>
      <td background="img/window_ml.gif"></td>
      <td colspan="2" bgcolor="#F7F7F7"><span style="font-family:Verdana;font-size:10px">Basic text goes here... blah blah blah blah blah  blah  blah blah  blah  blah blah  blah blah blah blah blah blah  blah blah  blah blah  blah blah  blah v  blah v  blah blah  blah  blahv blah </span></td>
      <td background="img/window_mr.gif"></td>
    </tr>
    <tr>
      <td><img src="img/window_bl.gif"></td>
      <td colspan="2" background="img/window_bm.gif"></td>
      <td><img src="img/window_br.gif"></td>
    </tr>
  </table>
  </ilayer>
</div>

<div id="news" style="position:absolute;width:100px;left:400px;top:300px;height:200px;visibility:visible">
  <ilayer width="100%" onSelectStart="return false">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="img/window_tl.gif"></td>
      <td id="titleBar" style="cursor:move" width="100%" background="img/window_tm.gif"><img src="img/title_news.gif"></td>
      <td><a href="#" onclick="hideMe('news');return false"><img src="img/option_x.gif" style="border:0px"></a></td>
      <td><img src="img/window_tr.gif"></td>
    </tr>
    <tr>
      <td background="img/window_ml.gif"></td>
      <td colspan="2" bgcolor="#F7F7F7"><span style="font-family:Verdana;font-size:10px">Basic text goes here... blah blah blah blah blah  blah  blah blah  blah  blah blah  blah blah blah blah blah blah  blah blah  blah blah  blah blah  blah v  blah v  blah blah  blah  blahv blah </span></td>
      <td background="img/window_mr.gif"></td>
    </tr>
    <tr>
      <td><img src="img/window_bl.gif"></td>
      <td colspan="2" background="img/window_bm.gif"></td>
      <td><img src="img/window_br.gif"></td>
    </tr>
  </table>
  </ilayer>
</div>
<a href="javascript:showMe('home');">show</a>
<a href="javascript:hideMe('home');">hide</a>

<a href="javascript:showMe('news');">show</a>

<a href="javascript:hideMe('news');">hide</a>
</div>
</body>
</html>

http://www.templarian.com/newsite/index2.php

How do functions work like this whats the right way?


function hideMe(**win**){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.**win**.visibility="hide";
}

Thanks.