Hi
I want to center a div on the center off the browser screen. Somehow
I'm missing some points, I can not get it to work! can anybody help me
on the way again. I suspect I'm missing something simple!
try the following code in a browser, and click on the buttons a few
times to see what I mean!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta content="text/html; charset=us-ascii"
http-equiv="content-type" />
<title>
Test show/hide
</title>
<script type="text/javascript"
src="/scripts/MochiKit/mochikit.js"></script>
<style type="text/css">
/*<![CDATA[*/
.back {
margin:auto;
z-index:2000;
padding: 20px;
position: absolute;
width: 100%;
height: 100%;
visibility: visible;
background-color: #e1e2e3;
top: 0em;
left: 0em;
filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7;"
}
.disp {
background-color:white;
border:1px solid;
display:table;
margin-left:auto;
margin-right:auto;
padding:3px;
}
/*]]>*/
</style>
</head>
<body>
<input type='button' onclick='showDialog();' value='Show modal
dialog' />
<div id='back' class='back' style='display:none;'>
<div class='disp' id='myModalHolder'>
<div ID='myModalDialog'>
this is in a separate dialog
</div>
<br />
<input type='button' onclick='var
e=$("back");e.style.display="none";'value='Hide' />
</div>
</div>
<br/>
<input type='button' onclick='changeModal()' value='New Content in
modal dialog' />
<script>
var lSwap = true ;
function changeModal()
// small function to swap out the content off the div
representinf
the modal dialog.
// this will be replaced by a whole lot off different ajax
functions!
{
var e = $('myModalDialog')
if ( lSwap ) {
e.innerHTML = "This is a new content
for the dialog box, it's a
bit larger then the previous content<ul><li>test line 1</li><li>test
line 2</li><li>test line 3</li></ul>"
showDialog();
lSwap = false ;
} else {
e.innerHTML = "Alternate content!"
showDialog();
lSwap = true ;
}
} // changeModal
function showDialog( )
{
var e = $('myModalDialog') ;
$('back').style.display='block'; // make it
visible, otherwise
I don't get the needed coordinates
var h = elementDimensions(e).h ; // get the height
off the
model dialog box
var wh = getViewportDimensions().h ; // get the hight
off the
visible windows.
var newYpos = (wh-h)/2 ; // calculate the
new postion
off the dialog, this might still be off, can't really tell for sure
yet!
var newXpos = elementPosition(e).x // fetched the
current X
position
var newpos = Coordinates(newXpos, newYpos) // create a
new
coordinate to center the div
log('x-pos:'+newXpos);
log('y-pos:'+newYpos);
Move($('myModalHolder'), { y:newXpos, x: (newYpos)} )
//this
works almost (coords need recalculation!), but looks quirky
//setElementPosition($('myModalHolder'),newpos);
// this
gives me an '_41e has no properties' error.
} // showDialog
</script>
</body>
</html>
with kind regards
Sander Elias
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"MochiKit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/mochikit?hl=en
-~----------~----~----~----~------~----~------~--~---
