Tutorial: Draggable Div with Open and Close Links.
If you read my first draggable div tutorial, you would know that I had planned to show you how to add a close and open function for this. So within this tutorial, I plan to show you what the old code looked like, and how to add the two extra functions. At the bottom of the tutorial you will see a link to view it in action.
Here is the full code from the previous tutorial:
See it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#maindiv{
z-index:10;
background: #FFC;
color:#000;
width: 400px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
padding:10px;
}
#header{
color:#000000;
background: #CCC;
padding:5px;
text-align:center;
}
#header:hover{
color:#fff;
background:#000;
text-align:center;
}
</style>
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
</script>
</HEAD>
<BODY onMouseMove="mousepos(event)" >
<div id='maindiv'>
<div id='header' onclick="begindrag(event)" style="cursor:move">click in this region then move your mouse around</div>
<br />
Once you move it, then click on the mouse again to release it.... very easy and cool.This is perfect for advertising, or a website with stats. </div>
</body>
</html>
Now, it is very simple to add the open and close functions to this.
You want to add this into the Javascript code:
function closeit(){document.getElementById("maindiv").style.display="none"}
function loadwindow(){document.getElementById("maindiv").style.display="block"}
Your full Javascript code should look like this:
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
function closeit(){
document.getElementById("maindiv").style.display="none"
}
function loadwindow(){
document.getElementById("maindiv").style.display="block"
}
</script>
You now want to add the close div link into your HTML. To close the div, use the following HTML code:
Make sure to enter this code inside of the maindiv.
<p onClick="closeit()" style="cursor:pointer">close this div</p>
You now want to add the open div link into your HTML. To open the div, use the following HTML code:
Make sure this code is not inside of the maindiv.
<div onclick="loadwindow()" style="cursor:pointer">Load Div</div>
Here is the full code with the open and close links:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draggable Div</title>
</head>
<style type="text/css">
#maindiv{
z-index:10;
background: #FFC;
color:#000;
width: 400px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
padding:10px;
}
#header{
color:#000000;
background: #CCC;
padding:5px;|
text-align:center;
}
#header:hover{
color:#fff;
background:#000;
text-align:center;
}
</style>
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
function closeit(){
document.getElementById("maindiv").style.display="none"
}
function loadwindow(){
document.getElementById("maindiv").style.display="block"
}
</script>
</HEAD>
<BODY onMouseMove="mousepos(event)" >
<div id='maindiv'>
<div id='header' ononclick="begindrag(event)" style="cursor:move">click in this region then move your mouse around</div>
<p><br />
Once you move it, then click on the mouse again to release it.... very easy and cool.
<p> </p>
<p> </p>
<p onClick="closeit()" style="cursor:pointer">close this div</p>
</div>
<div onclick="loadwindow()" style="cursor:pointer">Load Div</div>
</body>
</html>
HELP SPREAD THE WORD!
Posted in CSS Tutorials, JavaScript Tutorials, Tutorials / How To's, gallery
1 Comment »
Related Posts
(No Ratings Yet)
Loading ...
I'mma be what I set out to be, without a doubt undoubtedly - And all those who look down on me I'm tearing down your balcony ~ Em.
Please leave your comment!