Want to show a div and center it in the window?

@solafideFeb 10.2005

I am trying to have a onclick that shows the div, but it won’t center it. It displays as a paragraph instead of a div, and I can’t move it around. Help please!

Billy

to post a comment

JavaScript

7 Comments(s) _↴

@JPnycFeb 10.2005 — #Post the code.

@eraserFeb 12.2005 — #not sure what you want exactly, but try <center><div>...</div></center>.

@solafideauthorFeb 12.2005 — #<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Webpagemaker</title>

<style type="text/css">

.button{cursor:default;}

</style>

<script>

var ns4 = document.layers;

var ns6 = document.getElementById && !document.all;

var ie4 = document.all;

offsetX = 0;

offsetY = 20;

var toolTipSTYLE="";

function initToolTips()

{

if(ns4||ns6||ie4)

{

if(ns4) toolTipSTYLE = document.toolTipLayer;

else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;

else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;

if(ns4) document.captureEvents(Event.MOUSEMOVE);

else

{

toolTipSTYLE.visibility = "visible";

toolTipSTYLE.display = "none";

}

document.onmousemove = moveToMouseLoc;

}

}

function toolTip(msg, fg, bg, fontsiz)

{

if(toolTip.arguments.length < 1) // hide

{

if(ns4) toolTipSTYLE.visibility = "hidden";

else toolTipSTYLE.display = "none";

}

else // show

{

if(!fg) fg = "#777777";

if(!bg) bg = "#FFFFFF";

var content =

'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +

'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +

'"><td align="center"><font face="sans-serif" color="' + fg +

'" size="'+fontsiz+'"> ' + msg +

' </font></td></table></td></table>';

if(ns4)

{

toolTipSTYLE.document.write(content);

toolTipSTYLE.document.close();

toolTipSTYLE.visibility = "visible";

}

if(ns6)

{

document.getElementById("toolTipLayer").innerHTML = content;

toolTipSTYLE.display='block'

}

if(ie4)

{

document.all("toolTipLayer").innerHTML=content;

toolTipSTYLE.display='block'

}

}

}

function moveToMouseLoc(e)

{

if(ns4||ns6)

{

x = e.pageX;

y = e.pageY;

}

else

{

x = event.x + document.body.scrollLeft;

y = event.y + document.body.scrollTop;

}

toolTipSTYLE.left = x + offsetX;

toolTipSTYLE.top = y + offsetY;

return true;

}

function creatable()

{document.getElementById('tablePop').style.display='none';}

function table()

{document.getElementById('tablePop').style.left='300';

document.getElementById('tablePop').style.top="300";

document.getElementById('tablePop').style.display='block';

}

</script>

</head>

<BODY>

<div id="toolTipLayer" style="position:absolute; display: none"></div>

<TABLE width="81" HEIGHT="30" BORDER=3 CELLPADDING=0 CELLSPACING=0 COLS=1 BGCOLOR="#FFCC33" >

<TR>

<TD width="60" class="button" onclick="table()" onMouseOver="toolTip('Click this to insert a table', 'black', '#ffffff',0)" onMouseOut="toolTip()">Table</TD>

<td width="157" onClick="list()">Hi!</td>

</TR>

</TABLE>

<div id="tablePop" style="z-index:500; left:300; top:200; display:none;"><form name="insTable">

<table border=1>

<tr onMouseOver="toolTip('The table title is not necessary, and may not look right in some browsers, but it looks good when it does', 'black', '#ffffff',0)" onMouseOut="toolTip()">

 <td class="button">
   <div align="right">Enter table title:
   </div></td>
   <td>
   <input type="Text" accept="text/html" name="tilte">
   </td>
   </tr>
   <tr onMouseOver="toolTip('The number of rows is important. Rows are side-to-side.', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <td class="button">
 
   <div align="right">Enter number of rows:
   </div></td>
   <td>
   <input name="row" type="Text" size="5" maxlength="3" width="4">
   </td>
   </tr>
   <tr onMouseOver="toolTip('You must enter a number of columns. Columns are up and down.', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <td class="button">
   Enter number of columns:
   </td>
 
   <td>
   <input name="col" type="Text" size="5" maxlength="3" width="4">
   </td>
   </tr>
   <tr onMouseOver="toolTip('The following attributes are optional.', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <td colspan="2" class="button">
   <div align="center">(Optional)
   </div></td>
   </tr>
 
   <tr onMouseOver="toolTip('Optional: This is the width of the table. If you do not specify %, pixels will be used', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <td class="button">
   <div align="right">Table Width:
   </div></td>
   <td>
   <input type="text" maxlength="4" name="widt">
   </td>
   </tr>
   <tr onMouseOver="toolTip('Optional: This is the height of the table. If you do not specify %, pixels will be used as the unit. Some browsers do not render this correctly, or if the table is too long, it will disregard this', 'black', '#ffffff',0)" onMouseOut="toolTip()">
 
   <td class="button">
   <div align="right">Table Height
   </div></td>
   <td>
   <input type="text" maxlength="3" name="heigh">
   </td>
   </tr>
   <tr onMouseOver="toolTip('Optional:The border is the width between the cells, the width of the framework that aligns the cells', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <td class="button">
 
   <div align="right">Border
   </div></td>
   <td>
   <input type="text" name="borde">
   </td>
   </tr>
   <tr onMouseOver="toolTip('Optional:This is the color of the border', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <td class="button">
   <div align="right">Border Color
   </div></td>
 
   <td onMouseOver="toolTip('Enter a properly-capitalized color name, or a hexadecimal value', 'black', '#ffffff',0)" onMouseOut="toolTip()">
   <input type="text" name="colo">
   </td>
   </tr>
   <tr>
   <td colspan="2">
   <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0 COLS=1 HEIGHT="30" BGCOLOR="#FFCC33" align="center">
   <TR>
   <TD onMouseOver="toolTip('Ready? Click to finalize!', 'black', '#ffffff',0)" onMouseOut="toolTip()" class="button" onClick="creatable()">Create!</TD>
 
   </TR>
   </TABLE>
   </td>
   </tr>
  </table>

</form>

</div>

<div align="right">

<script language="JavaScript">

initToolTips();

//initTable();

</script>

</div>

</BODY>

</html>

Sorry about the tooltip script confusing, but it is really hard to take it all out.

Thank you!!!?

Billy

@eraserFeb 12.2005 — #Changed your code a little bit. Added the width property to BODY and CENTER your DIV. Hope that's what you want, since your createTable function doesn't do much so I assume that 'tablepop' is what you want to center.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Webpagemaker</title>

<style type="text/css">

.button{cursor:default;}

</style>

<script>

var ns4 = document.layers;

var ns6 = document.getElementById && !document.all;

var ie4 = document.all;

offsetX = 0;

offsetY = 20;

var toolTipSTYLE="";

function initToolTips()

{

if(ns4||ns6||ie4)

{

if(ns4) toolTipSTYLE = document.toolTipLayer;

else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;

else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;

if(ns4) document.captureEvents(Event.MOUSEMOVE);

else

{

toolTipSTYLE.visibility = "visible";

toolTipSTYLE.display = "none";

}

document.onmousemove = moveToMouseLoc;

}

}

function toolTip(msg, fg, bg, fontsiz)

{

if(toolTip.arguments.length < 1) // hide

{

if(ns4) toolTipSTYLE.visibility = "hidden";

else toolTipSTYLE.display = "none";

}

else // show

{

if(!fg) fg = "#777777";

if(!bg) bg = "#FFFFFF";

var content =

'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +

'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +

'"><td align="center"><font face="sans-serif" color="' + fg +

'" size="'+fontsiz+'"> ' + msg +

' </font></td></table></td></table>';

if(ns4)

{

toolTipSTYLE.document.write(content);

toolTipSTYLE.document.close();

toolTipSTYLE.visibility = "visible";

}

if(ns6)

{

document.getElementById("toolTipLayer").innerHTML = content;

toolTipSTYLE.display='block'

}

if(ie4)

{

document.all("toolTipLayer").innerHTML=content;

toolTipSTYLE.display='block'

}

}

}

function moveToMouseLoc(e)

{

if(ns4||ns6)

{

x = e.pageX;

y = e.pageY;

}

else

{

x = event.x + document.body.scrollLeft;

y = event.y + document.body.scrollTop;

}

toolTipSTYLE.left = x + offsetX;

toolTipSTYLE.top = y + offsetY;

return true;

}

function creatable()

{document.getElementById('tablePop').style.display='none';}

function table()

{document.getElementById('tablePop').style.left='300';

document.getElementById('tablePop').style.top="300";

document.getElementById('tablePop').style.display='block';

}

</script>

</head>

<BODY style="width:100%;">

<div id="toolTipLayer" style="position:absolute; display: none"></div>

<TABLE width="81" HEIGHT="30" BORDER=3 CELLPADDING=0 CELLSPACING=0 COLS=1 BGCOLOR="#FFCC33" >

<TR>

<TD width="60" class="button" onclick="table()" onMouseOver="toolTip('Click this to insert a table', 'black', '#ffffff',0)" onMouseOut="toolTip()">Table</TD>

<td width="157" onClick="list()">Hi!</td>

</TR>

</TABLE>

<center><div id="tablePop" style="z-index:500; left:300; top:200; display:none;"><form name="insTable">

<table border=1>

<tr onMouseOver="toolTip('The table title is not necessary, and may not look right in some browsers, but it looks good when it does', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

<div align="right">Enter table title:

</div></td>

<td>

<input type="Text" accept="text/html" name="tilte">

</td>

</tr>

<tr onMouseOver="toolTip('The number of rows is important. Rows are side-to-side.', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

<div align="right">Enter number of rows:

</div></td>

<td>

<input name="row" type="Text" size="5" maxlength="3" width="4">

</td>

</tr>

<tr onMouseOver="toolTip('You must enter a number of columns. Columns are up and down.', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

Enter number of columns:

</td>

<td>

<input name="col" type="Text" size="5" maxlength="3" width="4">

</td>

</tr>

<tr onMouseOver="toolTip('The following attributes are optional.', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td colspan="2" class="button">

<div align="center">(Optional)

</div></td>

</tr>

<tr onMouseOver="toolTip('Optional: This is the width of the table. If you do not specify %, pixels will be used', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

<div align="right">Table Width:

</div></td>

<td>

<input type="text" maxlength="4" name="widt">

</td>

</tr>

<tr onMouseOver="toolTip('Optional: This is the height of the table. If you do not specify %, pixels will be used as the unit. Some browsers do not render this correctly, or if the table is too long, it will disregard this', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

<div align="right">Table Height

</div></td>

<td>

<input type="text" maxlength="3" name="heigh">

</td>

</tr>

<tr onMouseOver="toolTip('Optional:The border is the width between the cells, the width of the framework that aligns the cells', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

<div align="right">Border

</div></td>

<td>

<input type="text" name="borde">

</td>

</tr>

<tr onMouseOver="toolTip('Optional:This is the color of the border', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<td class="button">

<div align="right">Border Color

</div></td>

<td onMouseOver="toolTip('Enter a properly-capitalized color name, or a hexadecimal value', 'black', '#ffffff',0)" onMouseOut="toolTip()">

<input type="text" name="colo">

</td>

</tr>

<tr>

<td colspan="2">

<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0 COLS=1 HEIGHT="30" BGCOLOR="#FFCC33" align="center">

<TR>

<TD onMouseOver="toolTip('Ready? Click to finalize!', 'black', '#ffffff',0)" onMouseOut="toolTip()" class="button" onClick="creatable()">Create!</TD>

</TR>

</TABLE>

</td>

</tr>

</table>

</form>

</div></center>

<div align="right">

<script language="JavaScript">

initToolTips();

//initTable();

</script>

</div>

</BODY>

</html>

@solafideauthorFeb 13.2005 — #But why isn't my CSS left:300; top:200; working??

Thank you though!!!

@FangFeb 13.2005 — #

style="z-index:500;[COLOR=green]position:absolute;[/COLOR] left:300[COLOR=green]px[/COLOR]; top:200[COLOR=green]px[/COLOR]; display:none;"

Or position:relative;

[i]toolTipLayer[/i] must have a higher z-index than [i]tablePop[/i]

@solafideauthorFeb 13.2005 — #THANK YOU!!!!!!!!!!!!!!!!!? ? ? ? ? ? ? ? ?

You would think I would remember such an elementary thing....

Billy

Also in #JavaScript _↴

Back button fails if there is hash in the previously clicked URL inlog Expanding Menu

Success!

Help @solafide spread the word by sharing this article on Twitter...

Tweet This

Want to show a div and center it in the window?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Want to show a div and center it in the window?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴