Results 1 to 1 of 1

Thread: how to create a div over horizontal scroll bar

  1. #1
    Join Date
    Oct 2008
    Posts
    40
    Thanks
    3
    Thanked 1 Time in 1 Post

    Smile 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>
    Last edited by pankaj.ghadge; 11-07-2008 at 10:32 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •