Forum
![]() |
Öffentliche Foren |
FORUM: Spiele & Computer THEMA: [JS] Frage zu bestehendem JS | |
AUTOR | BEITRAG |
Benny-Ray
RANG Prophet of Clanintern |
#1 - 11.11 09:02 hallo,ich bastel hier gerade an einer HP rum, die ich als fertiges Gerundgerüst bekommen habe. Ich fülle sie vor allem mit Text auf. Das Nav-Menü wird durch ein Java-Script zusammengebaut, in dem ich auch schnell rausgefunden habe, wie ich die Menü-Punkte verändern kann. Allerdings nur vom Namen und der Verlinkung her. Nur habe ich jetzt noch das Problem der Schriftfarbe. Ich hab leider von JS keine Ahnung und hab auch bis jetzt durch mehrfaches durchlesen nichts im Script gefunden, mit dem ich die Schriftfarbe von weiß auf eine andere umsetzen kann. Ich hoffe ihr könnt mir da jetzt helfen. *edit: irgendwie hats mir gerade den text zerrissen. Jetzt stimmt er wieder code: <script language="JavaScript" type="text/javascript"> /************************************************** * Copyright (C) 2001 Thomas Brattli * www.bratta.com ***************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>") function makeMenuObj(obj,nest){ nest=(!nest) ? "":'document.'+nest+'.' this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0; this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0; this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft; this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0; this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this"); this.clipTo=b_clipTo; return this } function b_showIt(){this.css.visibility="visible"; this.status=1} function b_hideIt(){this.css.visibility="hidden"; this.status=0} function b_movey(y){this.y=y; this.css.top=this.y} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y} function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y} function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url('"+img+"')" else this.css.background.src=img } function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r this.css.clip.bottom=b;this.css.clip.left=l }else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}} function SlideMenuInit(){ oSlideMenu=new makeMenuObj('divSlideCont') oSlideMenu.moveIt(menux,menuy) oSlide=new Array() for(i=0;i<menus.length;i++){ oSlide[i]=new makeMenuObj('divSlide'+i,'divSlideCont') oSlide[i].subs=menus[i].subs oSlide[i].sub=new Array() oSlide[i].moveIt(0,mainheight*i) oSlide[i].starty=oSlide[i].y if(bw.opera) oSlide[i].css.paddingLeft="10px" if(!menus[i].seperator) oSlide[i].bgImg(level0_regular) for(j=0;j<oSlide[i].subs;j++){ oSlide[i].sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont') oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between) oSlide[i].sub[j].starty=oSlide[i].sub[j].y oSlide[i][j]=new Array() oSlide[i][j].subs=menus[i][j].subs oSlide[i][j].sub=new Array() img=level1_round if(oSlide[i][j].subs!=0){ if(j!=oSlide[i].subs-1) img=level1_sub else img=level1_sub_round oSlide[i].sub[j].css.color="white" }else{ if(j!=oSlide[i].subs-1)img=level1_regular } oSlide[i].sub[j].origimg=img oSlide[i].sub[j].bgImg(img) for(a=0;a<oSlide[i][j].subs;a++){ oSlide[i][j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont') oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2) oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y oSlide[i][j][a]=new Array() oSlide[i][j][a].subs=menus[i][j][a].subs oSlide[i][j][a].sub=new Array() if(a!=oSlide[i][j].subs-1) img=level2_regular else img=level2_round oSlide[i][j].sub[a].origimg=img oSlide[i][j].sub[a].bgImg(img) } } } oSlideMenu.showIt() } /******************************************************************************** Variables ********************************************************************************/ var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1 /******************************************************************************** Switch menu function. ********************************************************************************/ function swmenu(num,snum,s2num){ if(snum!=-1){ if(oSlide[num][snum].subs==0) return } if(s2num!=-1){ if(oSlide[num][snum][s2num].subs==0) return } if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)} } /******************************************************************************** Moving the menus upward to their original position. ********************************************************************************/ function moveUp(num,snum){ if(snum==-1){ for(i=0;i<oSlide.length;i++){ if(oSlide[i].y>oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed) else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty); isthere=i} } if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed) else swmenu2(num,snum) }else{ if(num==oSlide.length-1) isthere=num if(sactive!=-1){ //Is out! //Slide subs j=0 for(i=sactive+1;i<oSlide[num].sub.length;i++){ j++ if(oSlide[num].sub[i].y>oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed) else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i} } //Slide main for(i=num+1;i<oSlide.length;i++){ if(oSlide[i].y>oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide[i].moveBy(0,-pxspeed) else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i} } }else{ //Slide to the one clicked for(i=num+1;i<oSlide.length;i++){ if(oSlide[i].y>oSlide[i].starty + snum*between+between) oSlide[i].moveBy(0,-pxspeed) else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + snum*between+between); isthere=i} } } if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed) else swmenu2(num,snum) } } /******************************************************************************** Switch menu 2, stuff that happens before the menus are moved down again. ********************************************************************************/ function swmenu2(num,snum){ isthere=0; sisthere=0; if(active>-1 && snum==-1){ //Hiding submenus for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()} oSlide[active].bgImg(level0_regular) oSlide[active].moveIt(0,oSlide[active].starty) } if(sactive>-1){ //Hiding submenus for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()} oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg) oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty) //Move back to place for(i=sactive+1;i<oSlide[active].sub.length;i++){ oSlide[active].sub[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].starty) } } active=num //Showing submenus if(snum>-1){ sactive=snum for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()} oSlide[num].sub[snum].moveBy(10,3) oSlide[num].sub[snum].bgImg(level1_round2) }else{ sactive=-1 for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()} oSlide[num].moveBy(10,3) oSlide[num].bgImg(level0_round) } if(num!=oSlide.length-1) moveDown(num,snum) else{ isthere=num moveDown(num,snum) } } /******************************************************************************** Moving the menus down ********************************************************************************/ function moveDown(num,snum){ //if(num==oSlide.length-1) isthere=num for(i=num+1;i<oSlide.length;i++){ if(snum==-1){ if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed) else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i} }else{ if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide[i].moveBy(0,pxspeed) else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i} } } if(snum!=-1){ for(i=snum+1;i<oSlide[num].sub.length;i++){ if(oSlide[num].sub[i].y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed) else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between); sisthere=i} } } if(snum==-1){ if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed) else going=false }else{ if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed) else going=false } } var test=0 /******************************************************************************** Functions to write out the layers... ********************************************************************************/ menus=new Array(); var a=0; var b=0; var c=0; var d=0 function makeMenu(type,text,lnk,target,end){ str=""; tg=""; if(target) tg='target="'+target+'"' if(!lnk) lnk="#" if(a==0) str='<div id="divSlideCont">\n' if(type=="top"){ menus[a]=new Array(); if(text=="seperator"){ str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n' menus[a].seperator=1 }else{ str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); ' if(lnk=="#") str+='return false' str+='" class="clSlideLinks"> '+text+'</a><br></div>\n' } menus[a].subs=0; a++; b=0 }else if(type=="sub"){ str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b)+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); ' if(lnk=="#") str+='return false' str+='" href="'+lnk+'" class="clSlideSubLinks"> '+text+'</a><br></div>\n' b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0 }else if(type=="sub2"){ str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links"> '+text+'</a><br></div>\n' c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0 } if(end) str+="</div>" document.write(str) } function preLoadBackgrounds(){ for(i=0;i<arguments.length;i++){ this[i]=new Image() this[i].src=arguments[i] } return this } </script> Der teil steht im Header code: <script> between=28 //The pixel between the menus and the submenus mainheight=24 //The height of the mainmenus subheight=21 //The height of the submenus pxspeed=13 //The pixel speed of the animation timspeed=20 //The timer speed of the animation menuy=100 //The top placement of the menu. menux=5 //The left placement of the menu //Images - Play with these level0_regular="level0_regular.gif" level0_round="level0_round.gif" level1_regular="level1_regular.gif" level1_round="level1_round.gif" level1_sub="level1_sub.gif" level1_sub_round="level1_sub_round.gif" level1_round2="level1_round2.gif" level2_regular="level2_regular.gif" level2_round="level2_round.gif" //Leave this line preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_round,level1_round2,level2_regular,level2_round) //top = Main menus //sub = Sub menus //sub2 = SubSub menus makeMenu('top','Startseite','mainFrame.htm','mainFrame') makeMenu('top','BMA','melder.htm','mainFrame') makeMenu('sub','Wächtersbach','melder/wächtersbach/wächtersbach.htm','mainFrame') makeMenu('sub','Aufenau','melder/aufenau/aufenau.htm','mainFrame') makeMenu('sub','Leisenwald','melder/leisenwald/leisenwald.htm','mainFrame') makeMenu('top','Rettungsleitfäden','rettungsleitfaden.htm','mainFrame') makeMenu('sub','PKW','rettungsleitfaden/pkw/rettungsleitfaden_pkw.htm','mainFrame') makeMenu('sub','LKW','rettungsleitfaden/lkw/rettungsleitfaden_lkw.htm','mainFrame') makeMenu('sub','Schienenfahrzeuge','rettungsleitfaden/bahn/rettungsleitfaden_schiene.htm','mainFrame') makeMenu('top','Gefahrgut','gefahrgut.htm','mainFrame') makeMenu('top','Einsatzpläne','er_plaene.htm','mainFrame') makeMenu('top','Pläne','plaene.htm','mainFrame') makeMenu('top','Kommunikation','kommunikation.htm','mainFrame') onload=SlideMenuInit; </script> Der Teil steht im Body |
vaest´ark // patrick *circle of confusion*
RANG Master of Clanintern |
#2 - 11.11 09:23 Ohne das JS gelesen zu haben: CSS? |
Benny-Ray
RANG Prophet of Clanintern |
#3 - 11.11 09:47 ähm: wie?einfach einen CSS-Stil definieren und das JS dazwischen packen? Hatte ich schon probiert, aber ohne erfolg. |
vaest´ark // patrick *circle of confusion*
RANG Master of Clanintern |
#4 - 11.11 11:06 Hm?Das JS baut dir ganz normale <a>-Nodes mit verschiedenen CSS-Klassen zusammen. Beim überfliegen hab ich folgende gefunden: .clSlideSub2 .clSlideSub #divSlideCont .clSlide . sind Klassen, # sind IDs. Die kannst du einfach per CSS formatieren... a.clSlide, a.clSlideSub, a.clSlideSub2, a#divSlideCont{ background-color: #cc00ff; color: #ffcc00; } |
Benny-Ray
RANG Prophet of Clanintern |
#5 - 11.11 13:57 Also dieser Anbau wie du ihn formuliert hast; so ganz versteh ich es nicht![]() ich hab da aber diese Zeile gefunden: [php]A.clSlideLinks{font-family:Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:#FFCC00}[/code] Und da am Farbcode rumspielen hat geholfen. Jetzt muss ich nur noch eine lesbare Farbe finden. Danke ![]() |
vaest´ark // patrick *circle of confusion*
RANG Master of Clanintern |
#6 - 11.11 14:25 Genau das ist das, was ich meinte.![]() |