how to create a div over horizontal scroll bar
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/imag...ae1824902d.png
In above picture that chat window is created using div but how google has placed that div over scroll bar
Code:<!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> testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> </html>
CSS Codes
Reply With Quote
Bookmarks