The problem I am having is that when I click on an anchor to move down the middle section, the anchored text is hidden behind the top section. I found some javascript that should really help with this problem, but I can't get it to work when I modify it for my page.
Here is the code that works:
<script type="text/javascript">
var def=0; // Default padding of your divs
window.onload=function()
{
var links=document.getElementsByTagName('a'),
nos=4, // Amount of your links. This is important for the loop of our function.
baselink='room', // Prefix of your anchor
distance='200px'; // Distance you wish when the anchor is choosen
links[0].onclick=function()
{reset();divs=baselink+1;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
links[1].onclick=function()
{reset();divs=baselink+2;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
links[2].onclick=function()
{reset();divs=baselink+3;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
links[3].onclick=function()
{reset();divs=baselink+4;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
}
function reset()
{
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){divs[i].style.paddingTop=def+'px';}
}
</script>
var def=0; // Default padding of your divs
window.onload=function()
{
var links=document.getElementsByTagName('a'),
nos=4, // Amount of your links. This is important for the loop of our function.
baselink='room', // Prefix of your anchor
distance='200px'; // Distance you wish when the anchor is choosen
links[0].onclick=function()
{reset();divs=baselink+1;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
links[1].onclick=function()
{reset();divs=baselink+2;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
links[2].onclick=function()
{reset();divs=baselink+3;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
links[3].onclick=function()
{reset();divs=baselink+4;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
}
function reset()
{
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){divs[i].style.paddingTop=def+'px';}
}
</script>
The HTML that uses the javascript is:
<a href="#">Room1</a>
<a href="#">Room2</a>
<a href="#">Room3</a>
<a href="#">Room4</a>
<div id="room1" style="height:500px;">
Some Content div 1
</div>
<div id="room2" style="height:500px;">
Some Content div 2
</div>
<div id="room3" style="height:500px;">
Some Content div 3
</div>
<div id="room4" style="height:500px;">
Some Content div 4
</div>
<a href="#">Room2</a>
<a href="#">Room3</a>
<a href="#">Room4</a>
<div id="room1" style="height:500px;">
Some Content div 1
</div>
<div id="room2" style="height:500px;">
Some Content div 2
</div>
<div id="room3" style="height:500px;">
Some Content div 3
</div>
<div id="room4" style="height:500px;">
Some Content div 4
</div>
The page with the modified code is http://www.roberson-family.com/testing/test_offset.html and it acts as if the javascript is not working at all.
Learning javascript is on my short list of things to get done.
