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>