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





How do I get my images, add mp3 files and know what I can get rid of. I've gone to several discussion boards, but no help.

posted by CollectiveMind to Computers & Internet (6 answers total)

What you've got here is css, inline css (I guess that's what you'd call it), and javascript. You need to read up on how to properly place them (or link to them) within an html file.

Top hit for 'css in html' search.

W3Schools link for 'javascript in html'

Hope those help!
posted by destructive cactus at 12:58 PM on August 6, 2013

HTML, CSS, JS play wonderfully together but they can be kind of finicky if you really just don't know what you're doing.

You're better off posting a link. From the code you pasted - CSS declarations need to be encased in a style type attribute, and your Javascript needs to be inside of script tags. And the way you have it set up, this all has to take place in the header.

Sidenote: I find myself unable to respond with actual code using pre or code tags. Mods, is this a security thing?
posted by phaedon at 1:18 PM on August 6, 2013

This any good? I think the only thing you were really missing was the following line:

window.onscroll = reposition.
posted by urbanwhaleshark at 3:12 PM on August 6, 2013

So, have a look at this jsfiddle. The way I have it set up it's a fixed height thing, and will always sit dead center on the right hand side of browser window. Is this sort of what you're thinking of?

Also, looks like some of your html got munged when entering into MeFi, use a tool like http://www.htmlescape.net/htmlescape_tool.html to turn your code into something we can look at.
posted by artlung at 8:08 PM on August 6, 2013

Mod note: Here is the MetaFilter FAQ section on how to post code and other marked-up text in comments.
posted by LobsterMitten (staff) at 8:12 PM on August 6, 2013 [1 favorite]

Response by poster: I went all over the Internet until I found an explanation for .css and div and a bunch of other terms that I could understand. The W3Schools link was very helpful. I don't know how other people work through their trial and error problems, but I took what I had and pasted, tested and deleted my way through the script until I understood what each line was responsible for. What headache I have, but my script works exactly the way I want. Thank you for your help.
posted by CollectiveMind at 4:06 PM on August 7, 2013