pankaj.ghadge Posted November 7, 2008 Share Posted November 7, 2008 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 In the given code how to create a div over over horizontal scroll bar please tell me ....................Please click on this link to see the example (Div is created over horizontal scroll bar)How google has placed that chat div window over scroll bar. please guide me ....................... <!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> Link to comment Share on other sites More sharing options...
jeffman Posted November 7, 2008 Share Posted November 7, 2008 Window-level scrollbars become the edge of the viewport. If there's a way around that, I don't know it.I can offer a clunky imitation.Disable scrolling in the html/body elements. Create a div exactly the size of the viewport. Set overflow to auto. Put most of your document's content inside this div. If you do this right, a user will not be able to distinguish the div from the window. So call this the "window" div.Your chat div should not be a child of the "window" div. It should have absolute positioning so it can be placed or moved anywhere in the actual window. This way, it should be able to float above the scrollbars. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.