PDA

View Full Version : how to create a div over horizontal scroll bar



pankaj.ghadge
11-07-2008, 05:45 AM
Hello,
how to create a Div over horizontal scroll bar. Like in the given gmail web browser example div chat window is created over horizontal scroll bar

(Can u please tell me how to insert image in this post. I have sent the image to my mail id & by using insert image option i have given that path but it is still not displaying any thing)

In the given code how to create a div over over horizontal scroll bar please tell me ....................

(Please click on below link to see div is created over horizontal scroll bar)
http://www.freeimagehosting.net/image.php?ae1824902d.png

In above picture that chat window is created using div but how google has placed that div over scroll bar


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.class-div
{
overflow-y: auto;
overflow-x: hidden;
word-wrap: break-word;
//-moz-binding: url('./wordwrap.xml#wordwrap');
}
</style>
<script type="text/javascript">
function openDiv()
{
try
{
document.body.removeChild(document.getElementById("divEntry"));
}
catch(e)
{

}
var newDiv = document.createElement('div'), s = newDiv.style;
var D= document.documentElement;
var Swidth=D.clientWidth;
var Sheight=D.clientHeight;

newDiv.setAttribute('id',"divEntry");
newDiv.className="class-div";
s.border = '1px solid gray';
s.color = '#ccc';
s.width = '200px';
s.height = '200px';
s.backgroundColor = '#488be8';
s.top = Sheight-200-10+'px';
s.left = Swidth-200-10+'px';
s.position = 'fixed';
document.body.appendChild(newDiv);
};
function entervalue(evt)
{

var charCode = (evt.which) ? evt.which : window.event.keyCode;

if(charCode==13)
{
document.getElementById("divEntry").innerHTML+=document.getElementById("txtEnter").value+"<br>";
document.getElementById("txtEnter").value="";
}

}
onload=openDiv;
onresize=openDiv;
</script>
</head>
<body>
<input type="text" id="txtEnter" onkeypress="entervalue(event)"> enter a value in this text box and press Enter
</body>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>

</html>