I wanted to make a code eaiser to use

I'm really not sure what I'm doing wrong I'm not sure how to set this up.

I started out with an object that holds all the vars for the Div tags in the code. then I needed to find out what link was clicked in a table.

So I tried to have only the links in the table by the name of navi checked with Wile.
if they were the link that was clicked it then moves the div down when it gets to a number down it stops. when the user moves the mouse away from the div a function is called to undo the movement.

there are other divs in this table so I was trying to make the code smaller.

I think I don't understand the this. property that well.
can some one tell me where the code is set up wrong. I'm sure there is a way to do this.
function siteNavi() {
this.UpValue = 70;
this.downValue = 20;
this.theDoc = document.getElementById('sectab').style;
this.theDocA = document.getElementById('sectab2').style;
this.theDocB = document.getElementById('sectab3').style;
this.theDocC = document.getElementById('sectab4').style;
this.theDocD = document.getElementById('sectab5').style;
this.theDocE = document.getElementById('sectab6').style;
this.theDocF = document.getElementById('sectab7').style;
}

function filink(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
return false;
}


if (links[i].parentNode.parentNode.parentNode.class==navbase)
{
switch (e){
case "links[0]":

this.theDoc.top=this.UpValue+'px'

UpValue++;

if (this.UpValue==76)
{this.theDoc.display='block'};

if (this.UpValue<90)
{setTimeout('show()',10)};

function clap(){
setTimeout('redo()',1000);

}

function redo(){


this.theDoc.top=this.downValue+'px';

this.downValue--;

if (this.downValue<69)
setTimeout('redo()',10);

if (this.downValue==1)
this.theDoc.display='none';


}



break;
case "links[1]":

break;
case "":

break;

}

} else{}


The table and Div never mind everything that is in the divs. the function only moves it. the links are in the table
<table class="navbase" align="center" summary="This table holds the links.
You need a browser to that handles java script" bgcolor="" cellpadding="2px" cellspacing="12px">
<tr>
<td bgcolor="#B69F01" ><a href="#" >Click me</a> </td>
</tr>
<tr>
<td bgcolor="#B69F01"> <a href="#" >Click me too</a> </td>

</tr></table>


<div id="sectab" onmouseover="" onmouseout=" clap()">
<ul class="navlinklist" >
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<!--end of sectab-->
<!--sectab2-->
<div id="sectab2" onmouseover="" onmouseout=" clap()">
<ul class="navlinklist">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>

look I just need to know if you can use a switch function, the find links object and the links array. to assign functions to links.

I confess I did not understand much of your problem(s). Nor the codes posted are of much help, as they are incomplete (for instance where is the loop which handle links[i] object?).

Can you isolate your problems/questions, please? What precisely is your final aim?

well I was hoping to

find out what link was clicked. check to see if it's parent. (td) .parent(tr). parent( table) id is navibase. so I used an if statement.

if (!document.getElementsByTagName) return false;
var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
for (var ty=0; ty < links.length; ty ++)

inside of the if statement is a switch function. the functions is to loops through all the links in the table called navibase.

switch (Mlinks[ty]) {
case " e=Mlinks[0]":

then asign a function to the link. the problem is the if statement and switch function use the var e that is used in the function to capture the clicked links. I'm not sure how it works but i've seen the code used before and it crossbrowser

function filink(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
return false;
}

Ignore that first function looking code I was trying to write an object and it wasn't working out so well. I'm not even sure i needed an object to do it I was just trying to but various document.getElementById.style. into Vars because I have many other divs that I wanted to do something with later. I can explain what I was trying to do but just want to work out his part first.

you should not need to loop through them like that.

the this keyword performs several roles in javascript depending on context.


a simpler way to make your objects:

function el(s){ return document.getElementById(s).style; }

siteNavi = {
UpValue : 70 ,
downValue : 20 ,
theDoc : el("sectab1"),
theDocA : el("sectab2"),
theDocB : el("sectab3"),
theDocC : el("sectab4"),
theDocD : el("sectab5"),
theDocE : el("sectab6"),
theDocF : el("sectab7")
}




something else i noticed:


if (!document.getElementsByTagName) return false;
var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
for (var ty=0; ty < links.length; ty ++)

might supposed to be:
if (!document.getElementsByTagName) return false;
var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
for (var ty=0; ty < Mlinks.length; ty ++)





i would also recommend looking into the javascript 1.6 array extras. you can find tiny compatibility libs for all browsers.

then you can write a simple function, and apply it to an entire array without the usual loop code.
i would not want to manage a large number of objects without using map and filter :



if (!Array.prototype.map) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array(len);var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}return res;};}

if (!Array.prototype.filter) { //from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:filter
Array.prototype.filter = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array;var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {var val = this[i];if (fun.call(thisp, val, i, this)) {res.push(val);}}}return res;};}

if (!Array.prototype.forEach) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:forEach
Array.prototype.forEach = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {fun.call(thisp, this[i], i, this);}}};}

yeah that is the way I learned to make objects. I was trying to decide how I was going to make it. but anyway I don't know what map and filer are.
I'll look it up.
I see the loop mistake I though I should look in to that issue. I'm going to test this with another function because I know my object isn't working yet.

why do you think I need to use map and filter. I used the switch function because I might decided to extend the table and add more divs

well I tried it out and replaced switch with if. it still doesn't work

is the last if statement not right. sould it be just be
if (targ.Mlinks[0]) or if (targ.Mlinks[0]==true) or if (e==targ.Mlinks[0)

by the way I read books on Javascript coding and I know the functions and statements but I don't know how to combine them very well. I wasn't able to find many good books. Is there a site I can go to to read stuff about how codes interact.

That would be great.

function filink(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
return false;
}



if (!document.getElementsByTagName) return false;
var Mlinks = document.getElementById('navebase').getElementsByTagName("a");
for (var ty=0; ty < Mlinks.length; ty ++) {


if (targ.Mlinks[ty]==targ.Mlinks[0]){alert ("The function works")}}