Using div and css to position a textbox on an html page that can be opened and closed
I use this to position a bibTeX entry on a page so users can copy and paste the bibtex code into their bibliographies. I also use this in this blog to display struct definitions for calling arguments to a function.
First, we setup the javascript that will hide and show the textbox:
<script language="Javascript">
function showObject(id){
var myWindow = document.getElementById(id);
myWindow.style.visibility = "visible";
}
function closeObject(id){
var myWindow = document.getElementById(id);
myWindow.style.visibility = "hidden";
}
</script>
Then we put the css into ourstylesheet that will position our textbox. We use the position: fixed; tag to place the textbox on the page at a specific location regardless of scrolling. We set the visibility to hidden so that the box is hidden until the user clicks a link in the page to open it.
.struct {
background: #9f9;
color: #000;
position: fixed;
left: 100px;
top: 100px;
visibility: hidden;
margin: 5px;
padding: 10px;
border: 2px solid #036;
}
.struct a {
color: #000;
}
Next we define the div that will hold the textbox and give it an id.
<div id="test" class="struct">
this is the text of the textbox
<p>
This is the <a href="javascript:closeObject('test');">close</a> button
</div>
Finally we insert an appropriate <a> tag to display the box.
<a href="javascript:showObject('test');">test</a>


