latheesan
07-01-2007, 10:15 PM
I am working on a online editor like website for a custom programming language
Im trying to give the user the option to edit his/her code in fullscreen. This is how i tried to do it:
<html>
<head>
<title>Full Screen Test</title>
<script type="text/javascript">
function OpenFS()
{
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
b = document.getElementById("FullScreenBtn");
f = document.getElementById("Editor");
if(b.value == "Turn On Full Screen") {
b.value = "Turn Off Full Screen";
f.style.width = (w-2) + 'px';
f.style.height = (h-2) + 'px';
} else {
b.value = "Turn On Full Screen";
f.style.width = '300px';
f.style.height = '150px';
}
}
</script>
<style type="text/css">
<!--
body
{
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="Editor" style="width: 300px; height: 150px; border:solid; border-width: 1px;">
<input name="FullScreenBtn" type="button" id="FullScreenBtn" value="Turn On Full Screen" onclick="OpenFS();" />
<br /><br />
Code Here~</div>
</body>
</html>
Because this is a test, it worked fine. On the actual implementation of this fullscreen function, it failed, because the editing is inside a table cell, and when u click on "Turn On Full Screen Mode", i assumed the Div's Width/Height would be set, so it covers the entire screen, instead, only it's width was set for some wierd reason and it pushed the cell left-right, it didnt go into proper full screen mode...
How can i do an fullscreen function, when u click it, the DIV comes out of the table cell and properly goes into fullscreen mode ?
Im trying to give the user the option to edit his/her code in fullscreen. This is how i tried to do it:
<html>
<head>
<title>Full Screen Test</title>
<script type="text/javascript">
function OpenFS()
{
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
b = document.getElementById("FullScreenBtn");
f = document.getElementById("Editor");
if(b.value == "Turn On Full Screen") {
b.value = "Turn Off Full Screen";
f.style.width = (w-2) + 'px';
f.style.height = (h-2) + 'px';
} else {
b.value = "Turn On Full Screen";
f.style.width = '300px';
f.style.height = '150px';
}
}
</script>
<style type="text/css">
<!--
body
{
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="Editor" style="width: 300px; height: 150px; border:solid; border-width: 1px;">
<input name="FullScreenBtn" type="button" id="FullScreenBtn" value="Turn On Full Screen" onclick="OpenFS();" />
<br /><br />
Code Here~</div>
</body>
</html>
Because this is a test, it worked fine. On the actual implementation of this fullscreen function, it failed, because the editing is inside a table cell, and when u click on "Turn On Full Screen Mode", i assumed the Div's Width/Height would be set, so it covers the entire screen, instead, only it's width was set for some wierd reason and it pushed the cell left-right, it didnt go into proper full screen mode...
How can i do an fullscreen function, when u click it, the DIV comes out of the table cell and properly goes into fullscreen mode ?