Tutorial: Draggable Div
Creating a div is, as you already (should) know, is very easy. A div is a great way to layout a website for many reasons. In this tutorial, I will show you how to create a div that lays on top of your content, and then the user can move it around the screen as they see fit. Also, you can see how to add a link within your website that will open the div and a link to close it. If you want to learn more, read this tutorial.
The first thing you want to do is create a new HTML file, or use a file that you are working with right now. You want to add the following CSS to the stylesheet. If you do have the stylesheet, be sure not to include the <style type=”text/css”> and the </style>. If you do not have an external stylesheet, add the below after the head section and before the body section.
<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>
Next you want to add the Javascript. Below is the code.
<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>
Now you want to put the following code in the <body> script like so:
<body onMouseMove="mousepos(event)" >
And finally, enter the following HTML code into the body section of your website.
<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>
Here is the full code:
<!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>
HELP SPREAD THE WORD!
Posted in CSS Tutorials, JavaScript Tutorials, Tutorials / How To's
1 Comment »
Related Posts
(No Ratings Yet)
Loading ...
yeah sooooooooooooooooooo - alright bye!
Please leave your comment!