Scroll Follow Box
August 6, 2013 12:49 PM
I am a novice at html, but I have found code that I've used to create placeholders for images on the right side of my page that don't move when I scroll down. I want to hyperlink each of five images in that scroll follow box to a different audio file. Each audio file corresponds to one of five explanations grouped together on the left side of the page. There are dozens of five explanation groupings and the follow box helps users remember what the terms mean by clicking a close by box when they need to.
I am using Serif WebX6 to build the website. And I've been referring to a book I have on .html. I found lots of code that uses .css or javascript, but I have no training with these, and when I pasted them in, the website didn't accept or run them. I do have a better understanding of .html though. And I have been able to move the box I made around, and create placeholders for my images, but no images.
This is the code I found.
#fixme {
position: absolute;
right: 250px;
top:400px
}
div > div#fixme { position: fixed; }
pre.fixit {
overflow:auto;
border-left:1px dashed #000;
border-right:1px dashed #000;
padding-left:2px; }
#header {
top:200px;
left:20px;
height:200px;
}
<><>
div#fixme {
right: 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' );
}
<><>
function reposition(){
var el = document.getElementById('fixme');
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0)
{
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
if(ScrollTop < 200)
el.style.top = 200 - ScrollTop + "px";
else
el.style.top = "0px";
}
>>>>
header
long content
long content
long content
long content
long content
This is the code I found.
#fixme {
position: absolute;
right: 250px;
top:400px
}
div > div#fixme { position: fixed; }
pre.fixit {
overflow:auto;
border-left:1px dashed #000;
border-right:1px dashed #000;
padding-left:2px; }
#header {
top:200px;
left:20px;
height:200px;
}
<><>
div#fixme {
right: 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' );
}
<><>
function reposition(){
var el = document.getElementById('fixme');
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0)
{
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
if(ScrollTop < 200)
el.style.top = 200 - ScrollTop + "px";
else
el.style.top = "0px";
}
>>>>
header
long content
long content
long content
long content
long content