Jump to content

Archived

This topic is now archived and is closed to further replies.

Venus

Problem with minimizing a Div

Recommended Posts

Greetings I am creating "floating regions" and am having a problem with my javascript function.

I am trying to get rid of tables completely from my site layout, I want to make what I call a region (a window with a header on it) dissapear and reappear when you click the _ and + button respectively. (only the content part, not the header) The problem is this code seems to only work when the title bar element is a TD and not when it is a strait DIV

The error I am receiving is...Error in parsing value for property 'top'. Declaration dropped.

This is the code I am trying to make work...
[code]<script language="JavaScript">
<!--

//zIndex counter
var z=100;
var xleft=150;
var xright=150;

var ie=document.all;
var firefox=document.getElementById&&!document.all;

var isDrag=false;
var x,y;
var dobj;

function mouseMove(e)
{
  if (isDrag) //only move the box if the user is dragging it
  {
if (firefox)
{
dobj.style.left = e.clientX + (tx - x);
dobj.style.top  = e.clientY + (ty - y);
}
else
{ //IE
dobj.style.left = event.clientX + (tx - x);
dobj.style.top  = event.clientY + (ty - y);
}   
  }
}

//handle click on widget title bar
function selectMouse(e)
{
if (firefox){
//verify that user clicked the 'titlebar' element
var p=e.target;
if (p.attributes['id'] && p.attributes['id'].value.indexOf("titlebar")!=-1)
{
isDrag=true;
x=e.clientX;
y=e.clientY;
//get the widget coordinates from the widget root
var pstr=p.attributes['id'].value;
var temp=pstr.substring(pstr.indexOf('_')+1,pstr.length);
dobj=document.getElementById('Region_'+temp);
//record widget location
tx=parseInt(dobj.style.left);
ty=parseInt(dobj.style.top);
//change zIndex
dobj.style.zIndex=z; z++;
}
}
else{ //IE
//verify that user clicked the 'titlebar' element
var p=event.srcElement;
if (p.attributes['id'] && p.attributes['id'].value.indexOf("titlebar")!=-1)
{
isDrag=true;
x=event.clientX;
y=event.clientY;
//get the widget coordinates from the widget root
var pstr=p.attributes['id'].value;
var temp=pstr.substring(pstr.indexOf('_')+1,pstr.length);
dobj=document.getElementById('Region_'+temp);
//record widget location
tx=parseInt(dobj.style.left);
ty=parseInt(dobj.style.top);
//change zIndex
dobj.style.zIndex=z; z++;
}
}
}

function MinMax(ID)
{
Reg = document.getElementById('Content_'+ID)
MM = document.getElementById('MinMax_'+ID)

if (Reg.style.visibility == "hidden")
{
Reg.style.visibility = "visible";
MM.innerHTML = "<a href ='#' onclick='MinMax("+ID+")'>+</a>";
}
else
{
Reg.style.visibility = "hidden";
MM.innerHTML = "<a href ='#' onclick='MinMax("+ID+")'>_</a>";
}

}
document.onmousemove=mouseMove;
document.onmousedown=selectMouse;
document.onmouseup=function(){
isDrag=false;
dobj=null;
}
//-->
</script>
</head>

<body>
<?PHP

include 'Globals.php';
global $conn, $error;
if (!$conn)
  {exit("Connection Failed: " . $conn);} //SO it doesnt try to keep loading the page.
 
  $sql = "SELECT * FROM Regions";
$sqlconn =odbc_exec($conn,$sql);

if (!odbc_exec($conn, $sql))
{
die($error & ' problem occured LoadingRegions');
}
else
{
while (odbc_fetch_row($sqlconn))
{
CreateRegion(odbc_result($sqlconn,"ID"), odbc_result($sqlconn,"RegionName"), odbc_result($sqlconn,"Content"));
}
    }

function CreateRegion($RegionID, $RegionName, $RegionContent)
{
echo
"<div id='Region_".$RegionID."' style='position: absolute; width:100;'>
<div>
<b align=left id='titlebar_".$RegionID."'>".$RegionName."</b>
<b align=right id='MinMax_".$RegionID."'><a href ='#' onclick='MinMax($RegionID);'>_</a></b>
</div>
<div id='Content_".$RegionID."'style='padding: 5px; font-family: arial; font-size: 8pt; width: 100%'>".
$RegionContent."
</div>
</div>";
}
[/code]

And this is the region that worked before, its not in a function like the other one is, this is a backup copy from old code.

[code]
echo
"<div id='Region_".$RegionID."' style='position: absolute;'>
<div style='cursor: move; width: 100%; height: 16; background-color: #CCCCFF; border-bottom: 1px solid #CACACA; '>
<table  style='font-family: arial; font-size: 8pt;' width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=left id='titlebar_".$RegionID."' style='padding-left: 5px;'>".$RegionName."</td>
<td align=right id='MinMax_".$RegionID."'><a href ='#' onclick='MinMax($RegionID);'>_</a></td>
</tr>
</table>
</div>
<div id='Content_".$RegionID."'style='padding: 5px; font-family: arial; font-size: 8pt; width: 100%'>".
$RegionContent."
</div>
</div>";
[/code]


I have a feeling I misnamed something when I was editing, or I have to call a div's style in some different way than a td, but I can't find anything that says that would be true. If anyone could help me with this I would sincerely apreciate it. I have an entire site to write and staring at this for hours is not what I would consider productive.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.