Thomas’ Developer Blog

February 7, 2008

Emulating desktop windows through draggable divs

Filed under: HTML, javascript — Tags: , , , , , , , , — sanzon @ 3:37 am

Yes we hear about it all the time.  Draggable divs.  It’s probably one of the most amazing things you see when you start learning javascript and HTML.  Next to all those neat scroll effects and changing the color of your IE browser scrollbars… then of course you learn how lame you used to be.

 Well in this blog I’m going to show you how to create a draggable div that emulates a standard windows desktop window.  Of course I’m not going to include things like the top left context menu, file menus, minimizing/maximizing, or resizing windows. 

 All this script does is create a draggable div that is dragged by a titlebar and allows you to close it with an X icon or double click the top left icon to close it, just like in windows.  Also this script will prevent users from dragging outside the window and stop the draggin the second the client’s cursor leaves the browser window so it doesn’t result in a glitch.

Alright time for the code!

Basic Logic

The way the script works is actually fairly simple. Generally what happens is once a div is pressed with an onmousedown event, a javascript function activates and determines the exact position of the div. As the mouse moves the body tag runs an onmousemove event which tracks the position of the mouse and moves the div by the offset. Then once the mouse is let go it stops the draggining motion.

The key to this is a global variable called “GBL_drag_drag” which is basically my way of stating GLOBAL variable for FUNCTION SET drag, variable drag. It helps down the road when you have a huge script outside of the source code with a ton of functions.

Let’s start with basic HTML to get a better idea of how the logic works.


<body onmousemove="dragDiv(event)">
<a href="javascript:setVisibility('Div1','visible')" mce_href="javascript:setVisibility('Div1','visible')">Show window 1</a><br />
<div id="Div1" class="subWindow_CNTR" onmousedown="setzIndex('Div1')">
 <div class="subWindow_TitleBar_CNTR" onmousedown="startDrag(event,'Div1');" onmouseup="stopDrag();">
  <div class="subWindow_TitleBar_Icon" ondblclick="setVisibility('Div1','hidden')"></div>
  <div class="subWindow_TitleBar_Title">Div1</div>
  <div class="subWindow_TitleBar_Exit" onmousedown="setVisibility('Div1','hidden')"></div>
 </div>
 <div class="subWindow_CTNT">
  In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
 </div>
</div>
</body>
Generally what happens is once the the titlebar is selected with the mouse it sends off to start the function startdrag, once that is started, javascript will gather the information needed. In this case it sets GBL_drag_drag to true so it knows it can start dragging.The onmouse event then checks to see if the GBL_drag_drag flag is true, if it is, then it knows to move the div along with the mouse movements.Once the mouse is let go, the onmouseup event tells the client to set GBL_drag_drag to false, so once the mouse is moved again no window will move.

startdrag

We’ll start explaining the code with the startDrag function:

//Star drag event on mouse down
function startDrag(e,DestDOM){
 if(!e){var e=window.event};
if (GBL_drag_SetDragOpen==true) {GBL_drag_drag=true;}
 else if(GBL_drag_mytarg == DestDOM){GBL_drag_drag=false;GBL_drag_SetDragOpen=true;}
 else{GBL_drag_drag=true;}
GBL_drag_mytarg = DestDOM;var srcDOM = document.getElementById(GBL_drag_mytarg);GBL_drag_offSetX=e.clientX;
 GBL_drag_offSetY=e.clientY;
if(!srcDOM.style.left){srcDOM.style.left=srcDOM.offsetLeft+'px';}
 if(!srcDOM.style.top){srcDOM.style.top=srcDOM.offsetTop+'px';}

GBL_drag_coordX=parseInt(srcDOM.style.left);
 GBL_drag_coordY=parseInt(srcDOM.style.top);

//bring element to front
 GBL_drag_SetzIndex++;
 srcDOM.style.zIndex=GBL_drag_SetzIndex;
}

As explained before once the mouse is pressed down the following values are sent through the startDrag function: the Event and Div ID.

Let's go over some global variables used in this function and their purpose:


GBL_drag_drag
GBL_drag_SetDragOpen
GBL_drag_mytarg
GBL_drag_offSetX
GBL_drag_offSetY
GBL_drag_coordX
GBL_drag_coodY

We already went over the GBL_drag_drag so we’ll move onto GBL_drag_SetDragOpen and GBL_drag_mytarg.


 if(!e){var e=window.event};
if (GBL_drag_SetDragOpen==true) {GBL_drag_drag=true;}
 else if(GBL_drag_mytarg == DestDOM){GBL_drag_drag=false;GBL_drag_SetDragOpen=true;}
 else{GBL_drag_drag=true;}

Generally the first this this chunk does is set the event variable. Some browsers except event logically when sent to the browser, while others will fault out. So for those who do not accept event being passed as e, e will be set as window.event.

The next section checks to make sure drag is acceptable. The SetDragOpen simply prevents the window from being dragged once it is closed, as explained later on. Basically once SetDragOpen is opened it will go ahead and set GBL_drag_drag true to allow dragging. Otherwise it will check to see if destDOM and mytarg match. If they do.. it will set GBL_drag_drag to false, otherwise it will be true. This is to allow the browser to allow dragging once a div has been closed… as explained later on.

GBL_drag_mytarg = DestDOM;var srcDOM = document.getElementById(GBL_drag_mytarg);GBL_drag_offSetX=e.clientX;
 GBL_drag_offSetY=e.clientY;
if(!srcDOM.style.left){srcDOM.style.left=srcDOM.offsetLeft+'px';}
 if(!srcDOM.style.top){srcDOM.style.top=srcDOM.offsetTop+'px';}
GBL_drag_coordX=parseInt(srcDOM.style.left);
 GBL_drag_coordY=parseInt(srcDOM.style.top);

This next chunck of code is fairly simple. Generally we start off by setting the mytarg as the new element to be dragged.

As well we set a srcDOM so we can simplify code by using getElementById. Once that is done we find out the original position of the mouse and store it into a global variable offSetX and Y. These are used on the drag event so that the your mouse stays at the same point on the div as it moves.

Next we check to see if left and top has been set as a style. If not... we go ahead and set them. This is used the first time the element is dragged only.

This is very important. By using srcDOM.offset attributes we are able to find out where the client has placed the div! Meaning you’re looking at how the browser sees it! Not how the code is setup. This can be highly useful in the future so you might want to remember it.

Ok the final set is to now look at the style attributes left and top to get the original position. Again this is all setup for the next step!

On Drag function

Now that everything is setup it’s time for the user to start dragging the div! Let’s look at code to get started…


//Continue dragging on mouse movement
function dragDiv(e){
 if(!GBL_drag_drag){return};
 if(!e){var e=window.event};
var srcDOM = document.getElementById(GBL_drag_mytarg);//Checks for cross browser and sets client vars
 var winWidth = SetclientWidth();
 var winHeight = SetclientHeight();
 var winSrollLeft = SetscrollLeft();
 var winScrollTop = SetscrollTop();
 var srcWidth = srcDOM.clientWidth;
 var srcHeight = srcDOM.clientHeight;
//Checks Div location and prevents dragging outside window (left,top,right,bottom)
 if (GBL_drag_coordX+e.clientX-GBL_drag_offSetX < 0) {
  srcDOM.style.left="0px";
 }
 else {
  srcDOM.style.left=GBL_drag_coordX+e.clientX-GBL_drag_offSetX+'px';
 }
 if (GBL_drag_coordY+e.clientY-GBL_drag_offSetY < 0+winScrollTop) {
  srcDOM.style.top=winScrollTop+'px';
 }
 else {
  srcDOM.style.top=GBL_drag_coordY+e.clientY-GBL_drag_offSetY+'px';
 }
if (parseInt(srcDOM.style.left) > winWidth-srcWidth-5+winSrollLeft) {
  srcDOM.style.left=winWidth-srcWidth+winSrollLeft-5+'px';
 }
 if (parseInt(srcDOM.style.top) > winHeight-srcHeight-5+winScrollTop) {
  srcDOM.style.top=winHeight-srcHeight+winScrollTop-5+'px';
 }

//Checks Mouse location and prevents dragging outside window (left,top,right,bottom)
 if (e.clientY < 0) {GBL_drag_drag = false;}
 if (e.clientX < 0) {GBL_drag_drag = false;}
 if (e.clientX > winWidth-25) {GBL_drag_drag = false;}
 if (e.clientY > winHeight-25) {GBL_drag_drag=false;}

return false;
}

A bit more complex then the first one! Let's chunk this one up again to help explain it.


if(!GBL_drag_drag){return};
 if(!e){var e=window.event};
var srcDOM = document.getElementById(GBL_drag_mytarg);Well the first thing is to check to see if drag is setup. All the first line does is check to see if the GBL_drag_drag is true, if it's not it will return the function so nothing else happens.We already know what the next two lines do so we'll skip those. Now on to the complex part! Joy of cross browser mahem!
function SetclientWidth() {
 return CrossBrowserResults (
  window.innerWidth ? window.innerWidth : 0,
  document.documentElement ? document.documentElement.clientWidth : 0,
  document.body ? document.body.clientWidth : 0
 );
}
function SetclientHeight() {
 return CrossBrowserResults (
  window.innerHeight ? window.innerHeight : 0,
  document.documentElement ? document.documentElement.clientHeight : 0,
  document.body ? document.body.clientHeight : 0
 );
}
function SetscrollLeft() {
 return CrossBrowserResults (
  window.pageXOffset ? window.pageXOffset : 0,
  document.documentElement ? document.documentElement.scrollLeft : 0,
  document.body ? document.body.scrollLeft : 0
 );
}
function SetscrollTop() {
 return CrossBrowserResults (
  window.pageYOffset ? window.pageYOffset : 0,
  document.documentElement ? document.documentElement.scrollTop : 0,
  document.body ? document.body.scrollTop : 0
 );
}
function CrossBrowserResults(RsltinnerWidth, RsltdocElement, Rsltbody) {
 var SetRslt = RsltinnerWidth ? RsltinnerWidth : 0;
 if (RsltdocElement && (!SetRslt || (SetRslt < RsltdocElement)))
  SetRslt = RsltdocElement;
 return Rsltbody && (!SetRslt || (Rsltbody > SetRslt)) ? Rsltbody : SetRslt;
}

It’s a mess! This is simply another function outside of the drag function, but is called to set several variables. Generally all you need to know is that the script works by first testing one out of three potential methods for obtaining results. First it will test window based events followed by document.documentElement and finally document.body. Each one has different results depending on the browser. What these functions do is gather all 3 measure ments and send it as either 0 or whatever value it returns into the CrossBrowserResutls function.

Once the CrossBrowserResults function reads the values it will go ahead and set the correct value. Generally it takes the valid results and returns them in order and picks the highest value. It’s simple to understand if you want to take the time to decode it.

Anyway let’s move onto the next chunk.


 var winWidth = SetclientWidth();
 var winHeight = SetclientHeight();
 var winSrollLeft = SetscrollLeft();
 var winScrollTop = SetscrollTop();
 var srcWidth = srcDOM.clientWidth;
 var srcHeight = srcDOM.clientHeight;

Again all this chunk does is set the variables based on the returns from the external functions. srcWidth and srcHeight don’t need to use the cross browser test and simply are the clientWidth and clientHeight for the element div.

Next chunk:


//Checks Div location and prevents dragging outside window (left,top,right,bottom)
 if (GBL_drag_coordX+e.clientX-GBL_drag_offSetX < 0) {
  srcDOM.style.left="0px";
 }
 else {
  srcDOM.style.left=GBL_drag_coordX+e.clientX-GBL_drag_offSetX+'px';
 }
 if (GBL_drag_coordY+e.clientY-GBL_drag_offSetY < 0+winScrollTop) {
  srcDOM.style.top=winScrollTop+'px';
 }
 else {
  srcDOM.style.top=GBL_drag_coordY+e.clientY-GBL_drag_offSetY+'px';
 }
if (parseInt(srcDOM.style.left) > winWidth-srcWidth-5+winSrollLeft) {
  srcDOM.style.left=winWidth-srcWidth+winSrollLeft-5+'px';
 }
 if (parseInt(srcDOM.style.top) > winHeight-srcHeight-5+winScrollTop) {
  srcDOM.style.top=winHeight-srcHeight+winScrollTop-5+'px';
 }
Alright time for some math! Generally what this script does is check 4 positions. Left, Top, Right, and Bottom. Once we find out where the Div is we can either set it to stop dragging or to drag along with the mouse.We'll go ahead and explain two of them since the other two are the exact same execpt being for either the top or left.The first section will go ahead and find out where the element started at, and then add on where the mouse is now, then subtract the offset that was calculated before.

This can be difficult to understand, trust me it took a while to get the numbers right. Let’s say the mouse is at position 100px left but it started at 200px, and the mouse was at 250px to start off with. Well……. 200+100-250 is….. 150. Generally the Div is mosed over 100px and adjusted 50 because of where the mouse lays within the Div. Read that a few times and it’ll make sense once you think about it.

Next is the test for the bottom and right. Simply we check to see if the element’s left position is greater then the area allowed for the window. In other words this prevents the element from going outside the window. winWidth would be the width of the window… say … 500px…. srcWidth is how wide the Div is… say 200px… and winScrollLeft is how far the window has been srolled from the left… say 50px.

So…. we check the position of the div…. against…. 500-200+50-5, so it comes out to… 345px. The 5 at the end is just a margin to make sure it doesn’t cause the window to expand more open. Anyway if the Div goes pas 345px for it’s left position it will stop moving and “snap” to the edge. You can then just undrag it out from there of course. Just make sure both the 5s are set the same! Otherwise your Div will be stuck in place once it snaps.

Alright now we understand that let’s move onto the next part… don’t worry we’re almost done the hard stuff.


//Checks Mouse location and prevents dragging outside window (left,top,right,bottom)
 if (e.clientY < 0) {GBL_drag_drag = false;}
 if (e.clientX < 0) {GBL_drag_drag = false;}
 if (e.clientX > winWidth-25) {GBL_drag_drag = false;}
 if (e.clientY > winHeight-25) {GBL_drag_drag=false;}
return false;This next part simply makes sure the mouse is not outside of the window! Once your mouse reaches the edges of the page and leaves the window the GBL_drag_drag is stopped. This prevents the div from following you around once your mouse returns and is not pressed up. This prevents a minor glitch.Stop Drag Function
function stopDrag(){
 GBL_drag_drag=false;
}
Not muh to explain... just sets the drag to false so it doesn't drag anymore!

Seting up the Window


<div id="Div1" class="subWindow_CNTR" onmousedown="setzIndex('Div1')">
 <div class="subWindow_TitleBar_CNTR" onmousedown="startDrag(event,'Div1');" onmouseup="stopDrag();">
  <div class="subWindow_TitleBar_Icon" ondblclick="setVisibility('Div1','hidden')"></div>
  <div class="subWindow_TitleBar_Title">Div1</div>
  <div class="subWindow_TitleBar_Exit" onmousedown="setVisibility('Div1','hidden')"></div>
 </div>
 <div class="subWindow_CTNT">
  In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
 </div>
</div>

This is where we get back into HTML for a while. Generally we start by setting up the main Div, then within the div we setup a titlebar. This is where the onmousedown event starts the dragging as well as stops the drag. Inside with some CSS we float the divs so we can include the icon in the upper left as a background so it doesn’t glitch up as we try using an image and end up trying to drag the image instead of the div. Same for the bottom in the top right.

As well we include a dblclick event handler to close the window when it is double clicked just like in a real window! Give it a try if you never did it before, but just don’t use this window! Anyway we also do the same for the x button but it’s simply a onclick instead of double click.

As well we have the content bellow setup. Now let’s go over the closing function for hiding the div when the x is pressed or the icon double clicked.


//Closes & Opens div
function setVisibility(DestDOM,visStat) {
 document.getElementById(DestDOM).style.visibility=visStat;
//Prevents dragging after close
 GBL_drag_SetDragOpen=false;
}

Fairly simple. Gets the target as DestDOM, then sets the visibility as whatever vistStat is… in this case close.

Once it is closed we remove the dragging by setting GBL_drag_SetDragOpen to false. This is used to not only stop dragging but as well prevent dragging from occuring again! Remember we have a div on a div with the x botton so even if we set GBL_drag_drag to false it will reopen when the bottom layer is activated by the onmousedown event. So we simply use another trigger to replace it! You may went to relookup the code in the start drag to see how this plays out again!

The final code is for overlapping divs and when the user clicks outside of the titlebar. This simply sets the zIndex above the others.


//Brings Div to front
function setzIndex(DestDOM) {
 GBL_drag_SetzIndex++;
 document.getElementById(DestDOM).style.zIndex=GBL_drag_SetzIndex;
}

As you see it takes the DestDOM and sets the zIndex above the GBL_drag_SetzIndex! You can see how it continues to increase everytime the div is pressed! So it continues to set the zIndex higher and higher each time an element is pressed. So these windows will always be on top of the other elements on the page! What about doing an always on top option? You can do this if you want but you’ll have to hardcode and set the zIndex to something like…. “99999999999” and hope someone doesn’t get bored enough to press over that amount of time… if they do…. well they have no life and you can ignore their complaint.

Final CodeAlright know that you understand it all and took the time to read this all! Which had to of taken you quite a while so thanks for taking the time to read this. Anyway, bellow is the final cody! Just copy and paste it. No worry about credit just take it! Of course if someone asks for how it works you can always do me the favor of referencing them to this blog and leaving a comment about any glitches it might have.

Well enjoy the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>BASIC DRAG-AND-DROP DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
//Declare global vars for drag events
var GBL_drag_drag = false;
var GBL_drag_coordX;
var GBL_drag_coordY;
var GBL_drag_offSetX;
var GBL_drag_offSetY;
var GBL_drag_mytarg;
var GBL_drag_SetzIndex=9;
GBL_drag_SetDragOpen=true;
//test for cross browser compatability
function SetclientWidth() {
 return CrossBrowserResults (
  window.innerWidth ? window.innerWidth : 0,
  document.documentElement ? document.documentElement.clientWidth : 0,
  document.body ? document.body.clientWidth : 0
 );
}
function SetclientHeight() {
 return CrossBrowserResults (
  window.innerHeight ? window.innerHeight : 0,
  document.documentElement ? document.documentElement.clientHeight : 0,
  document.body ? document.body.clientHeight : 0
 );
}
function SetscrollLeft() {
 return CrossBrowserResults (
  window.pageXOffset ? window.pageXOffset : 0,
  document.documentElement ? document.documentElement.scrollLeft : 0,
  document.body ? document.body.scrollLeft : 0
 );
}
function SetscrollTop() {
 return CrossBrowserResults (
  window.pageYOffset ? window.pageYOffset : 0,
  document.documentElement ? document.documentElement.scrollTop : 0,
  document.body ? document.body.scrollTop : 0
 );
}
function CrossBrowserResults(RsltinnerWidth, RsltdocElement, Rsltbody) {
 var SetRslt = RsltinnerWidth ? RsltinnerWidth : 0;
 if (RsltdocElement && (!SetRslt || (SetRslt < RsltdocElement)))
  SetRslt = RsltdocElement;
 return Rsltbody && (!SetRslt || (Rsltbody > SetRslt)) ? Rsltbody : SetRslt;
}
//Star drag event on mouse down
function startDrag(e,DestDOM){
 if(!e){var e=window.event};
if (GBL_drag_SetDragOpen==true) {GBL_drag_drag=true;}
 else if(GBL_drag_mytarg == DestDOM){GBL_drag_drag=false;GBL_drag_SetDragOpen=true;}
 else{GBL_drag_drag=true;}
GBL_drag_mytarg = DestDOM;var srcDOM = document.getElementById(GBL_drag_mytarg);GBL_drag_offSetX=e.clientX;
 GBL_drag_offSetY=e.clientY;
if(!srcDOM.style.left){srcDOM.style.left=srcDOM.offsetLeft+'px';}
 if(!srcDOM.style.top){srcDOM.style.top=srcDOM.offsetTop+'px';}

GBL_drag_coordX=parseInt(srcDOM.style.left);
 GBL_drag_coordY=parseInt(srcDOM.style.top);

//bring element to front
 GBL_drag_SetzIndex++;
 srcDOM.style.zIndex=GBL_drag_SetzIndex;
}

//Continue dragging on mouse movement
function dragDiv(e){
 if(!GBL_drag_drag){return};
 if(!e){var e=window.event};

var srcDOM = document.getElementById(GBL_drag_mytarg);

//Checks for cross browser and sets client vars
 var winWidth = SetclientWidth();
 var winHeight = SetclientHeight();
 var winSrollLeft = SetscrollLeft();
 var winScrollTop = SetscrollTop();
 var srcWidth = srcDOM.clientWidth;
 var srcHeight = srcDOM.clientHeight;

//Checks Div location and prevents dragging outside window (left,top,right,bottom)
 if (GBL_drag_coordX+e.clientX-GBL_drag_offSetX < 0) {
  srcDOM.style.left="0px";
 }
 else {
  srcDOM.style.left=GBL_drag_coordX+e.clientX-GBL_drag_offSetX+'px';
 }
 if (GBL_drag_coordY+e.clientY-GBL_drag_offSetY < 0+winScrollTop) {
  srcDOM.style.top=winScrollTop+'px';
 }
 else {
  srcDOM.style.top=GBL_drag_coordY+e.clientY-GBL_drag_offSetY+'px';
 }

if (parseInt(srcDOM.style.left) > winWidth-srcWidth-5+winSrollLeft) {
  srcDOM.style.left=winWidth-srcWidth+winSrollLeft-5+'px';
 }
 if (parseInt(srcDOM.style.top) > winHeight-srcHeight-5+winScrollTop) {
  srcDOM.style.top=winHeight-srcHeight+winScrollTop-5+'px';
 }

//Checks Mouse location and prevents dragging outside window (left,top,right,bottom)
 if (e.clientY < 0) {GBL_drag_drag = false;}
 if (e.clientX < 0) {GBL_drag_drag = false;}
 if (e.clientX > winWidth-25) {GBL_drag_drag = false;}
 if (e.clientY > winHeight-25) {GBL_drag_drag=false;}

return false;
}

//Stops dragging on mouseup
function stopDrag(){
 GBL_drag_drag=false;
}

//Brings Div to front
function setzIndex(DestDOM) {
 GBL_drag_SetzIndex++;
 document.getElementById(DestDOM).style.zIndex=GBL_drag_SetzIndex;
}

//Closes & Opens div
function setVisibility(DestDOM,visStat) {
 document.getElementById(DestDOM).style.visibility=visStat;

//Prevents dragging after close
 GBL_drag_SetDragOpen=false;
}
</script>
<style type="text/css">
div.subWindow_CNTR {
 position: absolute;
 width: 250px;
 height: 200px;
 background-color: #fff;
 border: 1px solid #000;
 left:100px;
 top:100px;
 visibility:hidden;
}

div.subWindow_TitleBar_CNTR {
 width:250px;
 height:20px;
 background-color:#afbff3;
}
 div.subWindow_TitleBar_Icon {
  float:left;
  background-image:url(http://www.otakuelite.com/App_Themes/classic/images/system/iconHelp.png);
  background-repeat:no-repeat;
  background-position:top left;
  padding-left:16px;
  padding-top:20px;
 }
 div.subWindow_TitleBar_Title {
  background-repeat:no-repeat;
  float:left;
  height:20px;
  cursor:default;
 }
 div.subWindow_TitleBar_Exit {
  float:right;
  background-image:url(http://www.otakuelite.com/App_Themes/classic/images/system/btnClose.png);
  padding-right:16px;
  padding-top:19px;
  margin-top:1px;
  margin-right:1px;
  background-repeat:no-repeat;
  background-position:top right;
  cursor:pointer;
 }
div.subWindow_CTNT {
 overflow:auto;
 height:180px;
}

</style>
</head>
<body onmousemove="dragDiv(event)">
<a href="javascript:setVisibility('Div1','visible')" mce_href="javascript:setVisibility('Div1','visible')">Show window 1</a><br />
<a href="javascript:setVisibility('Div2','visible')" mce_href="javascript:setVisibility('Div2','visible')">Show window 2</a><br />
<a href="javascript:setVisibility('Div3','visible')" mce_href="javascript:setVisibility('Div3','visible')">Show window 3</a>

<div id="Div1" class="subWindow_CNTR" onmousedown="setzIndex('Div1')">
 <div class="subWindow_TitleBar_CNTR" onmousedown="startDrag(event,'Div1');" onmouseup="stopDrag();">
  <div class="subWindow_TitleBar_Icon" ondblclick="setVisibility('Div1','hidden')"></div>
  <div class="subWindow_TitleBar_Title">Div1</div>
  <div class="subWindow_TitleBar_Exit" onmousedown="setVisibility('Div1','hidden')"></div>
 </div>
 <div class="subWindow_CTNT">
  In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
 </div>
</div>
<div id="Div2" class="subWindow_CNTR" onmousedown="setzIndex('Div2')">
 <div class="subWindow_TitleBar_CNTR" onmousedown="startDrag(event,'Div2');" onmouseup="stopDrag();">
  <div class="subWindow_TitleBar_Icon" ondblclick="setVisibility('Div2','hidden')"></div>
  <div class="subWindow_TitleBar_Title">Div2</div>
  <div class="subWindow_TitleBar_Exit" onmousedown="setVisibility('Div2','hidden')"></div>
 </div>
 <div class="subWindow_CTNT">
  In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
 </div>
</div>
<div id="Div3" class="subWindow_CNTR" onmousedown="setzIndex('Div3')">
 <div class="subWindow_TitleBar_CNTR" onmousedown="startDrag(event,'Div3');" onmouseup="stopDrag();">
  <div class="subWindow_TitleBar_Icon" ondblclick="setVisibility('Div3','hidden')"></div>
  <div class="subWindow_TitleBar_Title">Div3</div>
  <div class="subWindow_TitleBar_Exit" onmousedown="setVisibility('Div3','hidden')"></div>
 </div>
 <div class="subWindow_CTNT">
  In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
 </div>
</div>

</body>
</html>

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: