Click to See Complete Forum and Search --> : Page Follow Scrolling


danlohye
09-29-2004, 09:53 AM
Hi,

I'm a newbie to the web here and have just started building my site.

Can anyone teach me to create a javascript which will allow me to have a page in a small inline frame at the corner of the window which follows as the visitor scrolls down the page?

Thanks!

Daniel

Warren86
09-29-2004, 10:32 AM
Daniel:
I suspect you don't actually need to float an inline frame. Here's code to float an image at the top left, and code to float a simple text message box at the top left. By float, I mean it stays in position as the page is scrolled.

---------- Floating image -------------
<HTML>
<Head>
<Script Language=JavaScript>
//--- Begin Customizations ---------
var pctTop = "3%";
var pctLeft = "3%";
var imageIs = "niagara.jpg"; // put path and file name here
var nLeft = 0;
var nTop = 0;
//--- End Customizations -----------

var absStr = "Position:Absolute;Top:"+pctTop+";Left:"+pctLeft+"";

function stayHome(){

iL = document.body.scrollLeft;
iV = document.body.scrollTop;
isFloat.style.left = iL+nLeft;
isFloat.style.top = iV+nTop;
}

window.onscroll = stayHome;

function insertFloatIMG(){

styleStr = "<Style>.imgFloat {"+absStr+";Border-Style:Solid;Border-Width:1px;Padding-Top:20px;Padding-Right:20px;Padding-Bottom:20px;Padding-Left:20px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;Background-Color:Blue;Text-Indent:0px;}</Style>";

divStr = "<DIV class=imgFloat id=isFloat><input type=image src=null id=fIMG alt='Describe the Image'></DIV>"

document.write(styleStr);
document.write(divStr);
fIMG.src = imageIs;
nLeft = isFloat.offsetLeft;
nTop = isFloat.offsetTop;
}

</Script>
</Head>
<Body>
<p>Page Content Goes Here </p>
<Script>
insertFloatIMG();
</Script>
</Body>
</HTML>

------------- Floating Message -----------
<HTML>
<Head>
<Script Language=JavaScript>
// Begin Customizations-------
var pctTop = "3%";
var pctLeft = "3%";
var outLinecolor = "#FF6347";
var backColor = "#F0FFF0";
var isText = "Here is a floating Headline";
// End Customizations-------

var nLeft = 0;
var nTop = 0;

var absStr = "Position:Absolute;Top:"+pctTop+";Left:"+pctLeft+"";

function stayHome(){

iL = document.body.scrollLeft;
iV = document.body.scrollTop;
isFloat.style.left = iL+nLeft;
isFloat.style.top = iV+nTop;
}

window.onscroll = stayHome;

function insertFloatMsg(){

styleStr = "<Style>.floatMsg {"+absStr+";Border-Style:Solid;Border-Width:2px;Border-Color:"+outLinecolor+";background-color:"+backColor+";Font-Style:normal;Letter-Spacing:normal;Font-Weight:normal;Font-Size:18pt;Text-Align:None;Text-Decoration:none;Text-Indent:0px;Padding-Left:10px;Padding-Right:10px;Padding-Top:5px;Padding-Bottom:5px;Line-Height:100%;}</Style>";

divStr = "<DIV class=floatMsg id=isFloat>Null</DIV>"

document.write(styleStr);
document.write(divStr);
nLeft = isFloat.offsetLeft;
nTop = isFloat.offsetTop;
isFloat.innerHTML = isText;
}

</Script>
</Head>
<Body>
<p>Page Content Goes Here</p>
<Script>
insertFloatMsg();
</Script>
</Body>
</HTML>