0

I have been asked to write some code which holds, or scrolls a bit of content at a fixed location on the screen. I have seen this done but I have not located the starter code to place this in my project. I hope someone can point me in the right directions.
Thanks!
WBR

5
Contributors
6
Replies
7
Views
10 Years
Discussion Span
Last Post by FC Jamison
0

put your content in a div block then write a function like this :
function x()
{
document.getElementById('your div id').style.top = number;
document.getElementById('your div id').style.left= number;
}

0

The overflow attribute causes scroll bars if the content overflows the width of the div.

<div id="fixedContent" style="position: absolute; top: 50px; left: 50px; width: 280px; height: 150px; overflow: auto;">
<p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p>
</div>
0

Hollystyles:
Thanks for your assistance.
What I am trying to construct is to locate an object within a body tag that holds a fixed position for the viewer.
Imagine a page that is vertically larger than the browser window. When you scroll vertically the object stays at the same location within the viewers screen.
WBR

0

Here is a sample page with the stripped down code for fixed divs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Making Internet Explorer use position: fixed;</title>
    <style type="text/css">
      #fixme { position: absolute; left: 10px; top: 10px; }
      #fixmetoo { position: absolute; right: 100px; bottom: 100px; }
      div > div#fixme { position: fixed; }
      div > div#fixmetoo { position: fixed; }
    </style>
    <!--[if gte IE 5.5]>
      <![if lt IE 7]>
        <style type="text/css">
          div#fixme { 
            left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
            top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
          }
					
          div#fixmetoo {
            right: auto; bottom: auto;
            left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
            top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
          }
        </style>
      <![endif]>
    <![endif]-->

  </head>
  <body>
	
    <div id="content">
		
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
      <p>Test</p>
			
      <div id="fixme" style="border:2px solid #000;background-color:#fff;text-align:center;padding:10px;">
        F<br>
        i<br>
        x<br>
        &nbsp;<br>
        M<br>
        e
      </div>
			
      <div id="fixmetoo" style="border:2px solid #000;background-color:#fff;text-align:center;padding:10px;">
        F<br>
        i<br>
        x<br>
        &nbsp;<br>
        M<br>
        e<br>
        &nbsp;<br>
        T<br>
        o<br>
        o
      </div>
			
    </div>
	
  </body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.