open anchored point offset by 200px

[BillR]

I found a javascript that someone had put together (I have been looking in many places and don't know who made it) that will open a div 200px down the screen from the top of the browser window. This only has four links. My page currently has a growing number of links that open on a new page and 14 links that I open on the same page and want them to open down 200px. Here is the javascript that I found:


<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>


The HTML that uses THIS code 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>


I tested this and it worked, then I tried to modify it, and my modification does not work. Nothing happens to modify the link in my code. You can see it in action (actually no action) at: http://www.roberson-family.com/testing/test_offset.html

Please help this NOVICE understand a little javascript.

[rangana]

I still remember this script. It was a response from lavaboy's thread (http://www.htmlforums.com/showpost.php?p=652971&postcount=6). ;)

Anyway, for your problem, try to give the p element that contains your link a unique identifier:

<p class="alphalink" id="mylink">


And replace your script with this instead:

var def=0, // Default padding of your divs
divs;
window.onload=function()
{
var links=document.getElementById('mylink').getElementsByTagName('a'),
baselink='lttr', // Prefix of your anchor
distance='200px'; // Distance you wish when the anchor is choosen
for(var i=0;i<links.length;i++)
{
links[i].onclick=function()
{
reset();divs=baselink+i;
document.getElementById(divs).style.paddingTop=distance;
this.href='#'+divs;
}
}
}
function reset()
{
divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){divs[i].style.paddingTop=def+'px';}
}


See if it helps.

[BillR]

Rangana,

That changes what happens. Now I can see that the script is actually doing something.

Any link I click on results in moving to the last link and inserting a 200px blank space above the anchor location. If I hover the mouse above the links, they are all just #, until they are clicked, then they are all #lttr14.

What should I do now?

[rangana]

What do you expect the script to do :confused:

It's purpose is to add Npx above the target div, where N is the distance variable in the script.

So if you click on A link, which as an index of 1, then you'll go to div lttr1, but with Npx padding at the top.

What's the problem on it, you might want to give us a link.

[BillR]

Rangana,

Sorry, The link is the same, I have updated the code to reflect what you gave me. http://www.roberson-family.com/testing/test_offset.html

The 200px was just a comment that I can see it working. But should it reset when I click on another link?

The links all go to lttr14. If I click on any link, the result will be lttr14.

If I click on each of the links, when I hover over the link, I can see #lttr14 at the bottom of my firefox browser, almost as if they are not getting reset??

[rangana]

Why not just assign the <a> tags to the designated div id you want them to link to:

<p class="alphalink" id="mylink"><a href="#lttr1">No_Surname</a>, A, <a href="#lttr2">B</a>, <a href="#lttr3">C</a>, <a href="#lttr4">D</a>, E, F, <a href="#lttr5">G</a>, <a href="lttr6">H</a>, I, <a href="#lttr7">J</a>, <a href="#lttr8">K</a>, <a href="#lttr9">L</a>, <a href="#lttr10">M</a>, N, O, P, Q, <a href="#lttr11">R</a>, <a href="#lttr12">S</a>, <a href="#lttr13">T</a>, U, <a href="#lttr14">V</a>, W, X, Y, Z, </p>


and just this script:

window.onload=function()
{
var links=document.getElementById('mylink').getElementsByTagName('a'),
distance='200px'; // Distance you wish when the anchor is choosen
for(var i=0;i<(links.length-1);i++)
{links[i].onclick=function()
{reset();document.getElementById(divs).style.paddingTop=distance;}}}
function reset()
{
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){divs[i].style.paddingTop='0px';}}


See if it helps.

[BillR]

I can manually set the links on my link line and will do so. The issues is that I am not currently using all the letters as links, and was hoping for an automatic way to set them, but manually works.

The script does not seem to be doing what I want done (insert a 200px padding). I have noticed that the script seems to be changing the settings on my top section and shrinking it vertically a few px. I removed the background from my top section so I could see what is happening. Clicking on a link is going to the top of the browser window instead of adding the 200px padding to move it down to the visible area.

Link to the page is http://www.roberson-family.com/testing/test_offset.html

[BillR]

I have set all the links on my page, and the page now works as it did before I started trying to use javascript to pad the text down to where I need it to be.

I think I copied the script exactly. The link to the javascript file is http://www.roberson-family.com/testing/offset2.js

The page link is http://www.roberson-family.com/testing/test_offset.html