Post by Fredy on Aug 24, 2005 18:30:02 GMT
this code makes your saybox dragable. i know its kinda ugly but who cares! its draggable!
preview: www.freewebs.com/cheesexcrackers/test.htm
now for the code:
<HEAD>
<style type="text/css">
.move {
width: 100%;
background-color: #004891;
border-bottom: 1px solid #004891;
font-size: 14px;
font-family: verdana;
font-color: #004891;
text-align: center;
}
.info
{
width: 100%;
background-color: #E9F0F8;
border-top: 1px solid #004891;
font-size: 13px;
font-family: verdana;
font-color: #004891;
}
.panel
{
width: 150px;
position: absolute;
border: 1px solid #004891;
left: 50;
top: 0;
font-size: 13px;
font-family: verdana;
}
.panel a:visited {color: #004891;}
.panel a {text-decoration: none; color: #004891}
.panel a:hover {text-decoration: none;}
#panel a.visited{
text-decoration: none;
}
.menu
{
width:100%;
background-color: #E9F0F8;
font-size: 13px;
font-family: verdana;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if (over)
{
if (N) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</head>
<BODY>
<div id="panel" class="panel" >
<script language="JavaScript">
function getArray(id)
{
var splitarray = link[id].split("|");
return splitarray;
}
function info(i,obj,col)
{
sublink = getArray(i);
infobar = document.getElementById("infob");
infobar.innerHTML = " "+sublink[2];
obj.style.backgroundColor=col;
}
function endi(obj,col)
{
obj.style.backgroundColor=col;
infobar = document.getElementById("infob");
infobar.innerHTML = "<br>";
}
var link = new Array();
link[0] = "<script type="text/javascript"
src="http://saybox2.co.uk/output.php?user=USERNAME HERE"></script><div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color = #ffffff><b>my saybox</b></font></div><div class='menu'><br></div><link.length;i++)
{
sublink = getArray(i);
document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'#ffffff')\" onmouseout=\"endi(this,'#E9F0F8')\" style='cursor:hand'> </div></a><div class='menu'><br></div><div class='info' id='infob' name='infob'><br></div>
</script>
<script type="text/javascript"
src="http://saybox2.co.uk/output.php?user=USERNAME HERE"></script>
</div>
</script>
EDIT: you'll need to edit a few things. first you need to put your saybox username in the 2 places where it says USERNAME HERE
preview: www.freewebs.com/cheesexcrackers/test.htm
now for the code:
<HEAD>
<style type="text/css">
.move {
width: 100%;
background-color: #004891;
border-bottom: 1px solid #004891;
font-size: 14px;
font-family: verdana;
font-color: #004891;
text-align: center;
}
.info
{
width: 100%;
background-color: #E9F0F8;
border-top: 1px solid #004891;
font-size: 13px;
font-family: verdana;
font-color: #004891;
}
.panel
{
width: 150px;
position: absolute;
border: 1px solid #004891;
left: 50;
top: 0;
font-size: 13px;
font-family: verdana;
}
.panel a:visited {color: #004891;}
.panel a {text-decoration: none; color: #004891}
.panel a:hover {text-decoration: none;}
#panel a.visited{
text-decoration: none;
}
.menu
{
width:100%;
background-color: #E9F0F8;
font-size: 13px;
font-family: verdana;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if (over)
{
if (N) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</head>
<BODY>
<div id="panel" class="panel" >
<script language="JavaScript">
function getArray(id)
{
var splitarray = link[id].split("|");
return splitarray;
}
function info(i,obj,col)
{
sublink = getArray(i);
infobar = document.getElementById("infob");
infobar.innerHTML = " "+sublink[2];
obj.style.backgroundColor=col;
}
function endi(obj,col)
{
obj.style.backgroundColor=col;
infobar = document.getElementById("infob");
infobar.innerHTML = "<br>";
}
var link = new Array();
link[0] = "<script type="text/javascript"
src="http://saybox2.co.uk/output.php?user=USERNAME HERE"></script><div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color = #ffffff><b>my saybox</b></font></div><div class='menu'><br></div><link.length;i++)
{
sublink = getArray(i);
document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'#ffffff')\" onmouseout=\"endi(this,'#E9F0F8')\" style='cursor:hand'> </div></a><div class='menu'><br></div><div class='info' id='infob' name='infob'><br></div>
</script>
<script type="text/javascript"
src="http://saybox2.co.uk/output.php?user=USERNAME HERE"></script>
</div>
</script>
EDIT: you'll need to edit a few things. first you need to put your saybox username in the 2 places where it says USERNAME HERE
