mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 23:40 Benutzername: Passwort: Auto-Login

Thema: JavaScript-Menü fixen vom 20.12.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> JavaScript-Menü fixen
Seite: 1, 2  Weiter
Autor Nachricht
sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 30
Geschlecht: Weiblich
Verfasst Di 20.12.2005 10:19
Titel

JavaScript-Menü fixen

Antworten mit Zitat Zum Seitenanfang

huhu!

habe folgendes problem. hab in meiner hp eine javascript-navigation, die durch folgendes definiert und auf der hp ausgerichtet wurde:

Code:
var nNumberOfMenus=3
var nMwidth=101
var nPxbetween=40
var nFromleft=277
var nFromtop=208
var nBgcolor='#003366'
var nBgcolorchangeto='#003366'
var nImageheight=25


problem ist jetzt, dass sich beim verkleinern des browserfensters die navigation natürlich wegen der pixelangabe nicht prozentual mitverschiebt.

auf dieser seite ist das irgendwie anders gelöst, komm nur ned drauf wie *Schnief*

klick mich

könnt ihr mir helfen?
  View user's profile Private Nachricht senden
Anti78

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 38
Geschlecht: Männlich
Verfasst Di 20.12.2005 10:22
Titel

Antworten mit Zitat Zum Seitenanfang

Also wenn ich mich nicht täusche, ist auf der Beispielseite das Menü im Container mit drin und der wird mittig ausgerichtet.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
caZpa
Account gelöscht


Ort: -

Verfasst Di 20.12.2005 10:40
Titel

Antworten mit Zitat Zum Seitenanfang

jup

Code:
<style type="text/css">
         #content { position:absolute; top:0%; left:20%; width:600; height:100%; z-index:0; }
</style>
...
<body>
<div id="content">
         <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#ffffff">
         ...
 
sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 30
Geschlecht: Weiblich
Verfasst Di 20.12.2005 10:46
Titel

Antworten mit Zitat Zum Seitenanfang

dankeschön Lächel
  View user's profile Private Nachricht senden
sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 30
Geschlecht: Weiblich
Verfasst Do 22.12.2005 09:56
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

habe, das mit dem container ausprobiert...nur funktioniert es immer noch nicht wirklich..

container im header:

Code:
<style type="text/css">
         #content { position:absolute; top:1%; left:0%; width:600; height:100%; z-index:0; }
      </style>


und dann die buttons im body in ner tabelle:

Code:
<div id="content">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td width="25%" align="center">
                  <div id="divTopMenu0" class="clTopMenu"><a href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); return false;" onFocus="if(this.blur)this.blur();"><img src="img/planungbau.gif" width=101 height=25 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText0" class="clTopMenuText"> Text1
               
               <br>Text2
                      <br>Text3
                 <br>
                 <br>
                      </div>
                    <div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
                  </div>
                </td>
                <td width="25%" align="center">
                  <div id="divTopMenu1" class="clTopMenu"><a href="#" onMouseOver="menuOver(1)" onMouseOut="menuOut(1)" onClick="topMenu(1); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=25 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText1" class="clTopMenuText"> Text1<br>
                      Text2<br>
                      Text3<br>
                      Text4<br>
                 <br>
                    </div>
                    <div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
                  </div>
                </td>
                <td width="25%" align="center">
                  <div id="divTopMenu2" class="clTopMenu"><a href="#" onMouseOver="menuOver(2)" onMouseOut="menuOut(2)" onClick="topMenu(2); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=25 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText2" class="clTopMenuText"> Text1
                <br>Text2
                <br>
                <br>
                    </div>
                    <div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
                  </div>
             
                </td>
                <td width="25%" align="center">
                  <div id="divTopMenu3" class="clTopMenu"><a href="#" onMouseOver="menuOver(3)" onMouseOut="menuOut(3)" onClick="topMenu(3); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=25 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText3" class="clTopMenuText"> Text1 <br>
                      Text2
                 <br>
                 <br></div>
                    <div id="divTopMenuBottom3" class="clTopMenuBottom"></div>
                  </div>
                </td>
              </tr>
            </table>
         </div>


letztendlich ändert sich am ergebnis nix, die buttons verschieben sich nicht mit...
liegt das evtl daran, dass sie jetzt doppelt definiert sind?
weil die pixelangabe durch

Code:
var nNumberOfMenus=3
var nMwidth=101
var nPxbetween=40
var nFromleft=277
var nFromtop=208


im header gibtz ja immernoch...nur wenn ich die weglassen gehts garnüschd mehr Lächel

*confused*

helft mir Lächel

liebe grüße, sunny


Zuletzt bearbeitet von sunshineXY am Mi 01.03.2006 11:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 30
Geschlecht: Weiblich
Verfasst Do 22.12.2005 12:20
Titel

Antworten mit Zitat Zum Seitenanfang

kann niemand helfen? *Schnief*
  View user's profile Private Nachricht senden
caZpa
Account gelöscht


Ort: -

Verfasst Do 22.12.2005 13:59
Titel

Antworten mit Zitat Zum Seitenanfang

zeig mal kompletten qt
 
sunshineXY
Threadersteller

Dabei seit: 28.11.2005
Ort: Heilbronn
Alter: 30
Geschlecht: Weiblich
Verfasst Do 22.12.2005 14:14
Titel

Antworten mit Zitat Zum Seitenanfang

hier der komplette code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.clTopMenu       {position:absolute; width:101px; height:150px; clip:rect(0px 101px 14px 0px); layer-background-color:#003366; background-color:; z-index:31; visibility:hidden;}
.clTopMenuBottom {
   position:absolute;
   width:101px;
   height:3px;
   clip:rect(0px 101px 3px 0px);
   top:34px;
   layer-background-color:#003366;
   background-color:#003366;
   z-index:2;
   left: 54px;
}
.clTopMenuText   {position:absolute; width:91px; left:5px; top:35px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#F5EBD3; z-index:1;}
</style>

<style type="text/css">
         #content { position:absolute; top:1%; left:0%; width:600; height:100%; z-index:0; }
      </style>

<script language="JavaScript" type="text/javascript">

function lib_bwcheck(){ //Browsercheck (needed)
   this.ver=navigator.appVersion
   this.agent=navigator.userAgent
   this.dom=document.getElementById?1:0
   this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
   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=lib_bwcheck()

nPlace=0

var nNumberOfMenus=3
var nMwidth=101
var nPxbetween=40
var nFromleft=277
var nFromtop=200
var nBgcolor='#003366'
var nBgcolorchangeto='#003366'
var nImageheight=35


function makeNewsMenu(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.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;         
   this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight
   this.moveIt=b_moveIt;this.bgChange=b_bgChange;
   this.slideUp=b_slideUp; this.slideDown=b_slideDown;
   this.clipTo=b_clipTo;
    this.obj = obj + "Object";    eval(this.obj + "=this")      
}


var px = bw.ns4||window.opera?"":"px";

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_bgChange(color){this.css.backgroundColor=color; this.css.bgColor=color; this.css.background=color;}
function b_clipTo(t,r,b,l){
   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+"px "+r+"px "+b+"px "+l+"px)";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
   if(!this.slideactive){
      if(this.y>ystop){
         this.moveIt(this.x,this.y-5); eval(wh)
         setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
      }else{
         this.slideactive=false; this.moveIt(0,ystop); eval(fn)
      }
   }
}
function b_slideDown(ystop,moveby,speed,fn,wh){
   if(!this.slideactive){
      if(this.y<ystop){
         this.moveIt(this.x,this.y+5); eval(wh)
         setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
      }else{
         this.slideactive=false; this.moveIt(0,ystop); eval(fn)
      }
   }
}

function newsMenuInit(){
   oTopMenu=new Array()
   zindex=10
   for(i=0;i<=nNumberOfMenus;i++){
      oTopMenu[i]=new Array()
      oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
      oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
      oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
      oTopMenu[i][1].moveIt(0,nImageheight)
      oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
      if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop)
      else{
         oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))
         oTopMenu[i][0].css.zIndex=zindex--
      }
      oTopMenu[i][0].css.visibility="visible"
   }
}
//Moves the menu
function topMenu(num){
   if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
   else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}

//Calls the init function onload if the browser is ok...
if (bw.bw) onload = newsMenuInit;


</script>
      
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="103%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="top">
      <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <tr>
          <td width="20%" height="100%" valign="top" bgcolor="#003366">&nbsp;</td>
          <td width="60%" height="100%" align="center" valign="top" bgcolor="#FFFFFF" style="background-image:url(img/hintergrund3.jpg); background-repeat:no-repeat;">
            <br>
            <br>

 <p>&nbsp;</p>
            <p>&nbsp;</p>

            <div id="content">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td width="25%" align="center">
                  <div id="divTopMenu0" class="clTopMenu"><a href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText0" class="clTopMenuText"> Text1
               
               <br>Text2
                      <br>Text3
                 <br>
                 <br>
                      </div>
                    <div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
                  </div>
                </td>
                <td width="25%" align="center">
                  <div id="divTopMenu1" class="clTopMenu"><a href="#" onMouseOver="menuOver(1)" onMouseOut="menuOut(1)" onClick="topMenu(1); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText1" class="clTopMenuText"> Text1<br>
                      Text2<br>
                      Text3<br>
                      Text4<br>
                 <br>
                    </div>
                    <div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
                  </div>
                </td>
                <td width="25%" align="center">
                  <div id="divTopMenu2" class="clTopMenu"><a href="#" onMouseOver="menuOver(2)" onMouseOut="menuOut(2)" onClick="topMenu(2); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText2" class="clTopMenuText"> Text1
                <br>Text2
                <br>
                <br>
                    </div>
                    <div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
                  </div>
             
                </td>
                <td width="25%" align="center">
                  <div id="divTopMenu3" class="clTopMenu"><a href="#" onMouseOver="menuOver(3)" onMouseOut="menuOut(3)" onClick="topMenu(3); return false;" onFocus="if(this.blur)this.blur();"><img src="img/bild.gif" width=101 height=35 alt="" border=0 align="top"></a>
                    <div id="divTopMenuText3" class="clTopMenuText"> Text1 <br>
                      Text2
                 <br>
                 <br></div>
                    <div id="divTopMenuBottom3" class="clTopMenuBottom"></div>
                  </div>
                </td>
              </tr>
            </table>
         </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p></td>
          <td width="20%" height="100%" bgcolor="#003366">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>


Zuletzt bearbeitet von sunshineXY am Mi 01.03.2006 12:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen javascript menü
Javascript menü
Javascript-Menü, wie dieses?
[JavaScript] Hilfe bei Menü
[javascript] menü anpassen
Suche Javascript Menü
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.