Jump to content

Problem with minimizing a Div

Venus

By Venus
in Javascript Help

 Share

Recommended Posts

Venus Newbie

Venus

Posted
Posted
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.
Link to comment
https://forums.phpfreaks.com/topic/16513-problem-with-minimizing-a-div/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.