hilfdirselbst.ch
Facebook Twitter gamper-media
Tipps und Tricks zu Adobe GoLive von Dirk Levy, GoLive FAQ's von Randolph Sterna
cannibal_ox
Beiträge: 7
13. Mär 2003, 11:01
Beitrag #1 von 12
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!



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...
(Dieser Beitrag wurde von cannibal_ox am 13. Mär 2003, 14:02 geändert)
Top
 
X
gpo p
Beiträge: 5500
13. Mär 2003, 13:36
Beitrag #2 von 12
Beitrag ID: #27963
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


Hi,

ich habe mir zwar nicht die Mühe gemacht....deine zeilen auswendig zu lernen, aber.....

hatt mal ne ähnliche "naviagtion".....
habe die oben in eine Seite gebaut....
die komplett als "Vorlage" gespeichert....

und immer wieder drauf zugegriffen....
um sie mit neuen namen zu speichern,fettich...das funzte:))
Mfg gpo
als Antwort auf: [#27930] Top
 
cannibal_ox
Beiträge: 7
13. Mär 2003, 13:53
Beitrag #3 von 12
Beitrag ID: #27969
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


ja ok, danke für den tipp aber wenn ich dann in der navi was ändern will kann ich das dann nicht mehr zentral machen sondern muss jede einzelne seite ändern, oder nicht?
als Antwort auf: [#27930] Top
 
cannibal_ox
Beiträge: 7
13. Mär 2003, 13:59
Beitrag #4 von 12
Beitrag ID: #27971
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


an gpo: ausserdem hab ich noch das problem das meine seite zentiert ist, d.h. bei voll geöffnetem browser-fenster sieht das dann noch ok aus, wenn man das fenster aber verkleiner verschiebt sich der inhalt meiner seite nach zentral, die navi orientiert sich aber nach den im js-script angegebene ausrichtungskordinaten. d.h. inhalt meiner seite ist dan zentriert im fenster, navi zu weit rechts verschoben da sie sich immer noch an die pixelabstände die im script hinterlegt sind hält. deshalb wollte ich das auch mit einer komponente in tabellenzelle lösen.
als Antwort auf: [#27930] Top
 
WolfJack
Beiträge: 2851
13. Mär 2003, 14:30
Beitrag #5 von 12
Beitrag ID: #27977
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


Was ist denn hier los? Da muss man ja einen km horiz. scrollen um den Txt zu lesen!!
;-(

Also ich finde an diesen Menüs nichts Nachahmenswertes oder gar Übernehmbares! Sieht voll krass nach 0/8/15 aus, braucht ewig, bis es geladen ist und öffnet die Menüs, die man garnicht will! Soll ja Geschmackssache sein - diese scripts sind doch vollgesch. mit Werbung..
Da scheint mir die Menü-Machine für ein paar Euro die bessere Lösung zu sein!

---
mfG WolfJack
http://www.webdesignausberlin.de
[VerNetsages und mehr..]
http://www.eierschale-berlin.de
[Hommage an die Kellerkinder]
als Antwort auf: [#27930] Top
 
Hanü
Beiträge: 219
13. Mär 2003, 15:09
Beitrag #6 von 12
Beitrag ID: #27986
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


oje...

muss meinem vorgänger leider recht geben, du machst es komplizierter als es ist. Schlage vor, nimm entweder die Menü-Maschine ;) oder bastel dir deine Navigation ganz einfach selber mit den GoLive-"Rahmen" (3. Symbol in der Objekte-Palette).

Selbiges Menü kannst du als Komponente speichern und überall einsetzen. So ähnlich hab ich es auf meiner ABI-Site gemacht (link siehe unten). Also, überleg's dir lieber nochmal. Es is gar nicht so kompliziert mit den Rahmen und GL-Aktionen. Wenn du Hilfe brauchst: ins Forum hast du ja schon gefunden :)

MfG Andreas


http://abi.hanue.de
als Antwort auf: [#27930] Top
 
cannibal_ox
Beiträge: 7
13. Mär 2003, 16:00
Beitrag #7 von 12
Beitrag ID: #28008
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


danke fürs feetback.

leider hab ich kein gl6, also das mit der mm kann man knicken oder?
bin ausserdem nicht sicher obs nicht villeicht doch ein bisschen schneller geht so ein script kurz anzupassen, mit den eigenen links zu versehen etc., als eigenhändig mit frames eine drop-down menu zusammenzubasteln.
...geschweige denn extra die mm zu kaufen und dafür noch auf gl6 updaten.

dazu kommt, dass es mich einfach tierisch stresst dass diese verdammte navi auf einer seite problemlos einzusetzen ist, als komponente aber nicht zu gebrauchen, das kann ja wohl nicht sein oder?

...die werbung aus dem js entfernen ist ja wohl auch kein problem.

und ps: nichts gegen eure navis auf euren sites, aber an dieses geile drop-down menu kommt man ja wohl optisch so nicht ran oder?

thanx anyway
als Antwort auf: [#27930] Top
 
Urs Gamper  A  p
Beiträge: 3672
13. Mär 2003, 16:39
Beitrag #8 von 12
Beitrag ID: #28019
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


das ist richtig. alles was im headbereich einer seite ist, kann nicht über die komponente gemacht werden. dies kannst du in gl 6 mit der musterseite umgehen.
alle navigation mit layer sind in gl 5-komponenten nicht verwendbar.

--------------------------------------
http://www.gamper.ch
Gamper Internet-Auftritte und Schulung
als Antwort auf: [#27930] Top
 
cannibal_ox
Beiträge: 7
14. Mär 2003, 10:03
Beitrag #9 von 12
Beitrag ID: #28089
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


alles klar, da ist die logische erklärung die ich suchte.
thanx urs, dann werd ich wohl auf gl6 updaten...
als Antwort auf: [#27930] Top
 
nepomuk
Beiträge: 71
17. Mär 2003, 09:01
Beitrag #10 von 12
Beitrag ID: #28328
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


@ hanue: die seite sieht edel aus! aber dein navi? hier ein screen shoot:

http://www.schulzbenjamin.de/...selbst/abihanue.html

ps: benutze mac + ie 5.1
als Antwort auf: [#27930] Top
 
Hanü
Beiträge: 219
17. Mär 2003, 23:00
Beitrag #11 von 12
Beitrag ID: #28465
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


Hi. Ja, ich weiß, dass es im Moment noch Probleme mit der Website gibt (wurde schon in div. anderen Threads angeschnitten ;) - mit NN4 kann man z.B. die Site ganz vergessen (siehe http://hanue.de/nn4-problem.jpg )

Ich bin auch schon seit ein paar Wochen dran, sie komplett zu überarbeiten. Habe jetzt mal zwei Seiten testweise online gestellt. Kannst du mir sagen, ob die Seite/Navi dort richtig angezeigt wird? Also im IE6, NN7 und NN4.7 konnte ich mit WinXPprof keine Fehler mehr finden... aber vielleicht sieht es bei dir ja anders aus.

Testseiten:
http://abi.hanue.de/...eckblick/index.shtml
http://abi.hanue.de/...ick/1990/index.shtml
(Anmerkung: die verlinkten Seiten einfach ignorieren)

Gruß & Danke für den Hinweis.
Andreas
als Antwort auf: [#27930] Top
 
nepomuk
Beiträge: 71
18. Mär 2003, 01:38
Beitrag #12 von 12
Beitrag ID: #28477
Bewertung:
(1004 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

navigation als komponente verwenden (js), ich knall durch!


hallo andreas,
sieht sauber aus! (erste Seite sehr viel platz unten...)
das einzige was mir aufgefallen ist, der mauszeiger verändert sich nicht über einem link. das ist verwirend! solltest irgendwie deutlich machen ob man sich über einem link befindet oder nicht. (mind. rollover)

Gruß Benjamin
als Antwort auf: [#27930] Top
 
X