Get the Top value

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • romepatel
    New Member
    • Nov 2009
    • 31
    #1

    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.....!!! !
    Tags: None
    • 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

                    Previous template Next
                    Working...