Google

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>

Leave a Reply