PS: die navi ist auch auf http://www.scriptbreaker.com/examples/sb_menu.asp zu finden.



hallo zusammen

ich will folgende js navigation in gl als komponente speichern und diese dann auf verschiedenen seiten in einer tabellenzelle einsetzen.

bestehend aus 2 js und 1 css:



ScriptBreaker_items.js:


var prop = [
90, // transparancy of the items
230, // left position of the whole menu
280, // top position of the whole menu
120, // width of the head items of the menu
22, // top of the head items of the menu
3, // space between the head items
1, // width of the border of the head items
'black',//bordercolor of the head items
0, // 1 to set the head items bold , 1 to set the head items normal
11, // font-size of the head items
'verdana', // font-family of the head items
'solid', // border style of the head items
3, // space between the header and the items
150, // width of the items
22, // heigth of the items
1, // width of the border items
'black', // color of the item border
'solid', // border style of the items
10,//font size of the items
'verdana', // font-family of the items
2, // space between the item panels (multi-level)
3, //left padding in the head item block
10, // top padding in the head item block
'icons/folder2.gif' // icon at the left when there are subitems
];

//link ==> [text,url,target,text_color,background_color,text_color_onmouseover,background_color_onmouseover]
//link with items ==> [text,url,target,text_color,background_color,text_color_onmouseover,background_color_onmouseover,[items]]
var link =[
['<b>Home</b>','http://
['BookMark','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue'],
['Site Traffic','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue',
[
['Unique visitors','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue'],
['Total hits','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue',[['HomePage','http:/...,'red','lightblue'],
['BookMark','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue'],
['Site Traffic','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue',
[
['Unique visitors','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue'],
['Total hits','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue']
]]]]
]],
['Contact','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue']
]],
['Scripts',null,'_top','white','#336699','darkblue','lightblue',
[
['Asp','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue'],
['JavaScript','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue',

[
['Asp','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue'],
['JavaScript','http://www.ScriptBreaker.com','_blank','darkblue','#9999BB','red','lightblue']

]]

]],
['Websites',null,'_top','white','#336699','darkblue','lightblue'],
['<u>Forum</u>',null,'_top','white','#336699','darkblue','lightblue',
[
['How do I...',null,'_top','white','#336699','darkblue','lightblue'],
['Script Help',null,'_top','white','#336699','darkblue','lightblue'],
['Script request',null,'_top','white','#336699','darkblue','lightblue'],
['Site forum',null,'_top','white','#336699','darkblue','lightblue',
[
['How do I...',null,'_top','white','#336699','darkblue','lightblue'],
['Script Help',null,'_top','white','#336699','darkblue','lightblue']
]]
]]
];



ScriptBreaker_menu.js:


//Free JavaScript at http://www.ScriptBreaker.com
var delay = 300;

var N = (document.all) ? 0 : 1;
var count = 0;
var count_open = 0;
var open_items = new Array();
var head = new Array();
var item_arr = new Array();
var T1 = null;
var hcc = 0;

var container = new Array();
var ctc = 0;

var screenw = screen.width;

function create_menu(mid,a_id,prop_id)
{
l_men = prop_id[1];
for(i=0;i<a_id.length;i++)
{
if(a_id[7]) {id = count_open;count_open++;}
else id = -1;
height = prop_id[4];
if(N) height -= 4;
width = prop_id[3];
if(N) width -= 12;
if(a_id[1] != null)
{document.write("<a href='"+a_id[1]+"' ");
if(a_id[2] != null) document.write("target='"+a_id[2]+"' style='text-decoration:none'");
document.write(">");
}
document.write("<div style=\"position:absolute;top:"+prop_id[2]+";left:"+l_men);
document.write(";padding:"+prop_id[21]+"px 0px 0px "+prop_id[22]+"px;cursor:hand");
document.write(";width:"+width);
document.write(";height:"+height);
document.write(";font-size:"+prop_id[9]+"px");
document.write(";font-family:"+prop_id[10]);
document.write(";background-color:"+a_id[4]);
document.write(";color:"+a_id[3]);
document.write(";border:"+prop_id[6]+"px "+prop_id[11]+" "+prop_id[7]);
if(prop_id[8] == 1) document.write(";font-weight:bold;");
document.write("\" onmouseout=\"head_out("+id+",-1,"+hcc+",-1,'','')\" onmouseover=\"head_over(this.id,'"+a_id[5]+"','"+a_id[6]+"',"+id+",-1,"+hcc+",-1,'','')\" id="+mid+"_"+hcc+">");
document.write("&nbsp;"+link[0]+"</div>");
if(a_id[1] != null) document.write ("</a>");
head[hcc] = new Array(a_id[3],a_id[4],a_id[5],a_id[6],mid,"none");
if(a_id[7])
{
topv = prop_id[2] + height + prop_id[12];
if(N) topv += 2
left = l_men;
arr = a_id[7];
if(N) topv += prop_id[6] + prop_id[15];
iid = ""+id
add_col(topv,left,arr,prop_id,mid,iid,hcc,"","","","r");
}
l_men += (prop_id[5] + prop_id[3]);
//if(N) l_men += (2*(prop_id[6] + prop_id[21] +2));
hcc++;
}
empty_container();
}
function head_out(open,confirm,header,way,lst_items,item)
{
if(T1 != null) clearTimeout(T1)
if(item != "") item_arr[parseInt(item)][6] = "none";
if(lst_items != "") {
lb = lst_items.split("/");
for (i=0;i<lb.length;i++)
{
item_arr[lb][6] = "none";
}
}
if(way != -1){
la = way.split("/");
for (i=0;i<la.length;i++) open_items[la][0] = 'none';
}
if(confirm != -1) {open_items[confirm][0] = 'none'}
if(open != -1) {open_items[open][0] = 'none';}
head[header][5] = "none";
T1 = setTimeout("close_items()",delay);
}

function head_over(id,text,bg,open,confirm,header,way,lst_items,item)
{
if(T1 != null) clearTimeout(T1)
if(item != "") item_arr[item][6] = "";
head[header][5] = "";
if(lst_items != "") {
lb = lst_items.split("/");
for (i=0;i<lb.length;i++)
{
item_arr[lb][6] = "";
}
}
if(way != -1){
la = way.split("/");
for (i=0;i<la.length;i++) open_items[la][0] = '';
}
if(open != -1)
{
len = open_items[open][4] - open_items[open][3];
for(i=0;i<=len;i++)
{
name = open_items[open][2] +"_s"+(open_items[open][3]+i);
document.getElementById(name).style.display = '';
}
open_items[open][0] = '';
}
if(confirm != -1) open_items[confirm][0] = '';
document.getElementById(id).style.backgroundColor = bg;
document.getElementById(id).style.color = text;
T1 = setTimeout("close_items()",0);


}

function add_col(top,left,arr,prop_id,mid,iid,from,way,citems,lst_item,dir)
{
if(way == ""){vway = iid;}
else vway = way + "/" + iid;
if(citems != "") vcitems = citems +"/"+ lst_item;
else vcitems = lst_item;
t=top;
ll = left;
if(dir == "r")
{
if((ll+(prop_id[13]+prop_id[20]+50)) > screenw)
{
ll -= 2*(prop_id[13] + prop_id[20])
dir = "l";
}
}
else
{
if(ll < 0)
{
ll += 2*(prop_id[13] + prop_id[20])
dir = "r";
}
}
start = count
for(j=0;j<arr.length;j++)
{
if(arr[j][7]){tid = count_open;count_open++;}
else tid = -1;
height = prop_id[14];
if(N) {height -= 5;t+=4;}
width = prop_id[13]
if(N) {width -= 7;}
if(arr[j][1] != null)
{document.write("<a href='"+arr[j][1]+"' ");
document.write("style='text-decoration:none;color:"+arr[j][3]+"'");
if(arr[j][2] != null) document.write("target='"+arr[j][2]+"' style='text-decoration:none'");
document.write(">");
}
document.write("<div class='item_class' style=\"display:none;position:absolute;left:"+ll+";top:"+t);
document.write(";filter:alpha(opacity="+prop_id[0]+"); -moz-opacity:"+prop_id[0]+"%;");
document.write(";width:"+width);
document.write(";height:"+height);
document.write(";font-size:"+prop_id[18]+"px");
document.write(";font-family:"+prop_id[19]);
document.write(";background-color:"+arr[j][4]);
document.write(";color:"+arr[j][3]);
document.write(";cursor:hand");
document.write(";border:"+prop_id[15]+"px "+prop_id[16]+" "+prop_id[17]);
document.write("\" onmouseover=\"head_over(this.id,'"+arr[j][5]+"','"+arr[j][6]+"',"+tid+","+iid+","+from+",'"+vway+"','"+vcitems+"','"+count+"')\" onmouseout=\"head_out("+tid+","+iid+","+from+",'"+vway+"','"+vcitems+"','"+count+"')\" id="+mid+"_s"+count+">&nbsp;"+arr[j][0]);
if(arr[j][7]){
ileft = prop_id[13] - 20;
document.write("<img src='"+prop_id[23]+"' border=0 style='position:absolute;left:"+ileft+";top:3;'>");
}
document.write("</div>")
if(arr[j][1] != null)document.write("</a>");
item_arr[count] = new Array(arr[j][3],arr[j][4],arr[j][5],arr[j][6],mid,from,"none",count);
if(arr[j][7]) {
if(dir == "r") l = ll + prop_id[13] + prop_id[20];
else l = ll - prop_id[13] - prop_id[20];
if(N) t-=4;
container[ctc] = new Array(0,t,l,arr[j][7],prop_id,mid,tid,from,vway,vcitems,count,dir);
if(N) t+=4;
ctc++;
}
count++;
t += height -1;
if(N) t+= 1*(prop_id[15]);
}
end = count-1;
open_items[iid] = new Array("none",iid,mid,start,end,from,vway,vcitems,count);
vway = "";
way = "";
vcitems= "";
}
//Free JavaScript at http://www.ScriptBreaker.com
function empty_container()
{
for(i=0;i<container.length;i++)
{
if (container[0] == 0)
{
add_col(container[1],container[2],container[3],container[4],container[5],container[6],container[7],container[8],container[9],container[10],container[11]);
container[0] = 1;
}
}

}

function close_items()
{
T1 = null;
for(i=0;i<open_items.length;i++)
{
id = open_items[2] +"_s"+open_items[3];
if(document.getElementById(id).style.display != open_items[0])
{
len = open_items[4] - open_items[3];
for(j=0;j<=len;j++)
{
name = open_items[2] +"_s"+(open_items[3]+j);
document.getElementById(name).style.display = open_items[0];
}
}
}
for (j=0;j<item_arr.length;j++)
{
i = parseInt(item_arr[j][7]);
name = item_arr[4] + "_s" + i;
if(item_arr[6] == "")
{
document.getElementById(name).style.color = item_arr[2];
document.getElementById(name).style.backgroundColor = item_arr[3];
}
else
{
document.getElementById(name).style.color = item_arr[0];
document.getElementById(name).style.backgroundColor = item_arr[1];
}
}
for(k=0;k<head.length;k++)
{
name = head[k][4]+"_"+k;
if(head[k][5] == "")
{
document.getElementById(name).style.color = head[k][2];
document.getElementById(name).style.backgroundColor = head[k][3];
}
else
{
document.getElementById(name).style.color = head[k][0];
document.getElementById(name).style.backgroundColor = head[k][1];
}
}
}



ScriptBreaker_menu.css:


.menu {
OVERFLOW: visible; POSITION: absolute
}
.head_items {
PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 0px; PADDING-TOP: 3px
}
.item_class {
OVERFLOW: hidden; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 0px; PADDING-TOP: 3px
}



ausserdem sind auf der ScriptBreaker-Beispiel-Site folgende 2 scipts/befehle an der stelle in der tabelle plaziert wo die navigation schlussendlich hinkommt:

<script language=JavaScript>
create_menu('ScriptBreaker',link,prop);
</script>

<script language=JavaScript>
function goToURL() { history.go(-1); }
</script>


...wie gesagt, ich will einfach nur die gesamte navigation als komponente speichern. Ausrichtung oben und links auf 0. Dann will ich diese als komponente abgespeicherte navigation auf verschiedenen Seiten in tabellen-zellen einsetzen.

Bis jetzt kann ich die navigation zwar problemlos anhand der scripts ausrichten und als komponente abspeichern, diese funzt dann auch prächtig. Wenn ich dann aber auf einer andern Seite die Komponente einsetze bekomm ich immer die Meldung: 'link' ist undefiniert. Und auf der seite geht dann nix.

Die kompenente selbst läuft grandios, nur der einsatz dieser auf anderen pages bereitet mir übelkeit.

PLEASE HELP!

Danke bestens im voraus, wers knackt ist für mich der hero...