Get the Top value

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • romepatel
    New Member
    • Nov 2009
    • 31

    Get the Top value

    Hi,

    I want to make the div tag , come along the screen as we scroll up, or down, left or right

    Can you help me out.

    Thanks in Advance.....!!! !
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    CSS – position: fixed; (along with top/left)

    Comment

    • romepatel
      New Member
      • Nov 2009
      • 31

      #3
      Hi,

      Thanks for your reply,

      but when i am changing the position to fixed, it is not reflected in IE6, on the other hand it is disturbing whole alignment., its working fine in Firefox 3.5

      For reference please check the following code


      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
      <script type="text/javascript">
      function show()
      {
      	document.getElementById('window').style.display='block';
      	document.getElementById('id_blank_div').style.display='block';
      	document.getElementById('id_blank_div').style.opacity='0.7'; 
      	document.getElementById('id_blank_div').style.background='#000000'; 
      }
      function hideEdit()
      	{
      		document.getElementById('window').style.display = 'none';
      		document.getElementById('id_blank_div').style.display='none';
      		document.getElementById('id_blank_div').style.opacity='0'; 		
      		document.getElementById('id_blank_div').style.background='none';
      	}
      </script>
      <style type="text/css">
      #id_blank_div{
      	top:0px;
      	border : 1px solid #525252;
      	background : #000000; 
      	width : 100%;
      	left:0px;
      	height:100%;
      	position:absolute;
      	padding-top:0px;
      	padding-bottom:0px;
      	display: none;
      	filter:alpha(opacity=50);
      	z-index:100;
      }
      
      #window
      {
      	border : 1px solid #525252;
      	background : #FFFFFF; 
      	width : 950px;
      	display : none;
      	left : 25px;
      	top : 250px;
      	height:auto;
      	position:absolute;
      	padding-top:0px;
      	padding-bottom:0px;
      	z-index:200;
      }
      </style>
      </head>
      
      <body>
      <table width="990" border="0" cellpadding="0" cellspacing="0" style="padding:0px">
      	
      	<tr>
      		<td>
      			<input type="button"  onclick="javascript:show();"  value="Click me"/>
      		</td>
      	</tr>
      	<tr>
      		<td>234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br />234<br /></td>
      		</tr>
      	<tr>
      		<td>
      			<div id="id_blank_div" ></div>
      			<div id="window" >
      				<div id="div_title"><span id="window_title">Update Details</span>
      							<span id="close"><a href="#" onClick="hideEdit()">Close X</a></span>
      				</div>
      				<table width="990" id="edit_window" > 
      					<tr style="text-align:center;" >
      						<td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td>
      					</tr>
      					<tr>
      						<td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
      					</tr>
      							</td>
      					</tr>
      						</table>
      </body>
      </html>
      <script type="text/javascript">
      var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
          //IE 4 compatible
          myWidth = document.body.clientWidth;
          myHeight = document.body.clientHeight;
        }
        document.getElementById('id_blank_div').style.height= (myHeight) + 'px';
      </script>

      I have also attached a zip file of what i am trying.......!! !

      Thanks in advance........ .!!!!
      Attached Files
      Last edited by gits; Jan 29 '10, 02:39 PM. Reason: fix bold to code tags

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        but when i am changing the position to fixed, it is not reflected in IE6,
        that’s stupid IE. you have to fix that manually (with JavaScript) or just ignore IE6.

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          Search for "position fixed ie6" and you should find a fix - that is if you really need to support that browser, of course.

          Comment

          Working...