By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,297 Members | 1,429 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,297 IT Pros & Developers. It's quick & easy.

Get the Top value

P: 31
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.....!!!!
Jan 29 '10 #1
Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
CSS – position: fixed; (along with top/left)
Jan 29 '10 #2

P: 31
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


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. function show()
  8. {
  9.     document.getElementById('window').style.display='block';
  10.     document.getElementById('id_blank_div').style.display='block';
  11.     document.getElementById('id_blank_div').style.opacity='0.7'; 
  12.     document.getElementById('id_blank_div').style.background='#000000'; 
  13. }
  14. function hideEdit()
  15.     {
  16.         document.getElementById('window').style.display = 'none';
  17.         document.getElementById('id_blank_div').style.display='none';
  18.         document.getElementById('id_blank_div').style.opacity='0';         
  19.         document.getElementById('id_blank_div').style.background='none';
  20.     }
  21. </script>
  22. <style type="text/css">
  23. #id_blank_div{
  24.     top:0px;
  25.     border : 1px solid #525252;
  26.     background : #000000; 
  27.     width : 100%;
  28.     left:0px;
  29.     height:100%;
  30.     position:absolute;
  31.     padding-top:0px;
  32.     padding-bottom:0px;
  33.     display: none;
  34.     filter:alpha(opacity=50);
  35.     z-index:100;
  36. }
  37.  
  38. #window
  39. {
  40.     border : 1px solid #525252;
  41.     background : #FFFFFF; 
  42.     width : 950px;
  43.     display : none;
  44.     left : 25px;
  45.     top : 250px;
  46.     height:auto;
  47.     position:absolute;
  48.     padding-top:0px;
  49.     padding-bottom:0px;
  50.     z-index:200;
  51. }
  52. </style>
  53. </head>
  54.  
  55. <body>
  56. <table width="990" border="0" cellpadding="0" cellspacing="0" style="padding:0px">
  57.  
  58.     <tr>
  59.         <td>
  60.             <input type="button"  onclick="javascript:show();"  value="Click me"/>
  61.         </td>
  62.     </tr>
  63.     <tr>
  64.         <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>
  65.         </tr>
  66.     <tr>
  67.         <td>
  68.             <div id="id_blank_div" ></div>
  69.             <div id="window" >
  70.                 <div id="div_title"><span id="window_title">Update Details</span>
  71.                             <span id="close"><a href="#" onClick="hideEdit()">Close X</a></span>
  72.                 </div>
  73.                 <table width="990" id="edit_window" > 
  74.                     <tr style="text-align:center;" >
  75.                         <td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td>
  76.                     </tr>
  77.                     <tr>
  78.                         <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>
  79.                     </tr>
  80.                             </td>
  81.                     </tr>
  82.                         </table>
  83. </body>
  84. </html>
  85. <script type="text/javascript">
  86. var myWidth = 0, myHeight = 0;
  87.   if( typeof( window.innerWidth ) == 'number' ) {
  88.     //Non-IE
  89.     myWidth = window.innerWidth;
  90.     myHeight = window.innerHeight;
  91.   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  92.     //IE 6+ in 'standards compliant mode'
  93.     myWidth = document.documentElement.clientWidth;
  94.     myHeight = document.documentElement.clientHeight;
  95.   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  96.     //IE 4 compatible
  97.     myWidth = document.body.clientWidth;
  98.     myHeight = document.body.clientHeight;
  99.   }
  100.   document.getElementById('id_blank_div').style.height= (myHeight) + 'px';
  101. </script>

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

Thanks in advance.........!!!!
Attached Files
File Type: zip temp.zip (1.5 KB, 41 views)
Jan 29 '10 #3

Dormilich
Expert Mod 5K+
P: 8,639
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.
Jan 29 '10 #4

acoder
Expert Mod 15k+
P: 16,027
Search for "position fixed ie6" and you should find a fix - that is if you really need to support that browser, of course.
Feb 1 '10 #5

Post your reply

Sign in to post your reply or Sign up for a free account.