faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

14 of 50 people (28%) answered Yes
Recently 5 of 10 people (50%) answered Yes

Entry

How can I make a picture follow the scrolling?

Apr 5th, 2008 19:10
ha mo, Colin Fraser, pef torf,


There is no easy answer to this question, it can be confusing. I have 
never gotten a scrolling layer to work in earlier browsers than 
*v4, and I doubt they are supported in a lot of other browsers. I think 
I got this from the Dynamic Duo, a site that I was not sure still 
existed until I noticed in the links on the front page. It is a little 
dated, but it should work with a bit of extra work, however, this code 
worked for me when I needed it.      
Firstly, in the page:
the <HEAD> 
    <SCRIPT LANGUAGE="JavaScript" SRC="remote.js"     
    TYPE="text/JavaScript">
    </script>
This places the script off page, which makes it accessible to all your 
pages. Such reusability should be a function of a lot more pages than is 
currently the case.  
In the <body>
     <body bgcolor="#ffffff" text="#000000" vlink="#cacaca"             
     OnLoad="setPostn();checkPostn();checkBrowser()";>
You can also place background images and all that in the same position, 
but just make sure the other calls are in place as well. 
The very next tag after the body tag is 
    <div id="obPic" class="postn"> 
which creates the layer. The style provides the layer with all the 
attributes you require it to have.
In the layer then I used a table. 
    <table width="12%" border=0 cellspacing=0 cellpadding=5             
     bgcolor="#D8D8BF">
      <tr>
          <td><img src="myimage.gif"></td> 
      </tr>
    </table>
Then close the layer
    </div>
Then the rest of the document follows inside a gutter. 
    <div id="obGutter" class="gutter">
        .............
In an associated style sheet : 
    div.gutter { margin-left:125; }
    div.postn { position:absolute; 
		visibility:show; 
		left:0px; 
		top:0px; 	
		width:13%;
		z-index:1;   }
You can change the position of the layer by changing the left and top 
values. 
In the remote *.js file you can place this code:
//     Begin
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
          if (ns4) block = document.ltitle
          if (ie4) block = ltitle.style
}
//navigator.appName == "Netscape")
function setPostn() {
if (ns4) {
    a=".top=";
    adoc="document.";
    docs="";
    b="window.pageYOffset";
    }
else {
    a=".pixelTop=";
    adoc="";
    docs=".style";
    b="document.body.scrollTop";
   }
}
function checkPostn() {
    object="obPic";
    c=eval(b);
    eval(adoc+object+docs+a+c);
    setTimeout("checkPostn()",5);
}
These functions provide the actual movement, making sure that the div 
always remains in the same position in relation to the browser window. I 
needed the image to appear in the top left corner of the screen and the 
image would scroll down in the gutter. However, you may want to do 
something different  
Bear in mind that I knew what environment this was going to appear in, 
what screen resolutions and all that. While it worked for me, you may 
need to tweak it to suit newer browsers.  
Good luck
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com