Member Avatar for rouse

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
  • 139 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by FC Jamison
Member Avatar for serkan sendur

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;
}

Member Avatar for hollystyles

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>
Member Avatar for DangerDev

thanx hollystyles its nice.

Member Avatar for rouse

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

Member Avatar for FC Jamison

That sounds like something that is going to require javascript.

Edit:
I did find something that might help you here.

Member Avatar for FC Jamison

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.