Floating div

[johnrb87]

Hello

 

I have been editing the following script

 

<style type="text/css">
div.dm
{
    visibility: hidden;
    position:absolute;
    left:100px;
    top:200px;
    font-family:verdana;
    font-weight:bold;
    padding:40px;
background-color:#066;
border:2px solid #009;

}
</style>
<script>
function buildDimmerDiv()
{
    document.write('<div id="dimmer" class="dm">Quick Help<br>To use this page...</div>');
}
</script>
If you need help <a onClick="buildDimmerDiv()">click here</a>
<br><br>
<strong>Introduction</strong>
<br>
Welcome to the....

 

But I can't seem to get it to react how I want.

 

1: It does not seem to load the CSS called "dm"

 

2: It seems to replace all page content rather than floating ontop of content

 

Basically when I click the "click here" link, I wanted it to display a floating div so I can provide a quick help guide

 

Can anyone help?

[.josh]

that's because document.write() will overwrite the current document.  You should either hardcode the div on the page somewhere and make it initially hidden and then change the content of the div (and the styling to make it visible etc...) or create an object and append it to the current dom (research document.append).