dynamisches Menü funktioniert nicht von Henryk Plötz, 19.04.2000 00:26

dynamisches Menü funktioniert nicht

Markus Till 18.04.2000 23:27

dhtml

Hallo!

Ich bin gerade dabei, meine Startseite aufzubauen.
Als Navigationsmenü hätte ich gerne ein Gif eingebunden, welches in einen <div></div>-Container
eingefügt ist (zwecks Browser-Kompatibilität). Dieser "Layer" soll nun zu Beginn negativ nach links
eingerückt werden, damit nur noch der rechte Teil des Bildes am linken Rand des Fensters zu sehen ist.
Bewegt sich der Mauszeiger über das Bild, soll der "Layer" ins Fenster "schweben", bis er links mit dem
Fenster abschliesst. Bewegt sich die Maus wieder weg, soll er wieder zurückschweben. Das funktioniert
aber leider nicht so wie ich mir das überlegt habe. Leider bin ich auch noch kein Javascript-Profi :-( .

Nun zu meiner Frage: Habe ich nur irgendwelche Syntax-Fehler im Code oder habe ich einen generellen
Fehler gemacht?

Was mir auch noch aufgefallen ist, ist daß Netscape nur den Text-Hintergrund farbig macht und nicht so
wie gewünscht und wie auch der IE den kompletten Hintergrund des <div></div>-Containers.

Wäre wirklich schön wenn mir jemand helfen könnte. Vielen Dank schon mal im voraus.
Markus

Um den Code ohne Bild ausführbar zu machen, habe ich das Bild durch einen Mustertext ersetzt.

Hier also das Listing:

<html>

<head>
<title>ausziehlayer</title>
<style>
.navi{
   position:absolute;
     width:163px;
   height:139px;
   background-color:#00ABAB;
   }
</style>

if (document.all)
{ menue="document.all.navigate.style.left"; }

else { menue="document.navigate.left"; }

klappzuint = setInterval("klappzu()",50)
klappaufint = setInterval("klappauf()",50)

function klappzustop() { clearinterval(klappzuint) }
function klappaufstop() { clearinterval(klappaufint) }

function klappauf(){
klappzustop
if ( menue<0 )
menue+=5
else klappaufstop }

function klappzu(){
klappaufstop
if ( menue>-120 )
menue-=5
else klappzustop }

</script>

</head>

<div id="navigate" class=navi style="top:150; left:-120;"onMouseover="pull()" onMouseout="draw()"><center>Navigationstest.<br>Dieser Container soll sich bei mouseOver nach rechts bewegen</center></div>
</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

dynamisches Menü funktioniert nicht
Thomas S. 19.04.2000 00:15

dhtml
– Informationen zu den Bewertungsregeln
Hi Markus
als Alternative habe ich sowas wie Du vielleicht brauchst.

<BASE HREF="file:/D/Projekte/dhtml/slidemenu/">
<html>

<head>
<title>DHTML-Beispiel - Sliding Menu</title>
<style>

</style>
</head>

<body BGCOLOR="#FFFFFF" link="#800000" vlink="#800000" alink="#FF0000" topmargin="5"
background="../images/back2.gif">
<script language="JavaScript1.2">

/*
Sliding Menu Bar Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')

</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.dem>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR><A href=http://www.webmasternetz.de>Test</A><BR>
</LAYER>

<DIV align="center"><CENTER>

<TABLE border="0" width="566">
  <TR>
    <TD width="100%"><P align="center"><FONT face="Verdana"><BIG><STRONG>{<FONT

color="#000080">DHTML : Ausfahrbares Menü</FONT>}</STRONG></BIG></FONT></P>
    <P align="left"><FONT face="Verdana"><SMALL>Am linken Rand öffnet sich ein Menü, sobald
    man mit der Maus darüberfährt.</SMALL></FONT></P>
    <P align="left"><FONT face="Verdana"><SMALL> </SMALL></FONT></P>
    <HR width="80%" color="#000080" noshade size="1">
    <P align="center"><SMALL><SMALL><FONT color="#C0C0C0">© Christian Thiele - WebmasterNETZ
    - 5/99 - </FONT><A target="_top" href="http://www.web-art.de/webmasternetz"><FONT

color="#0000FF">http://www.webmasternetz.de</FONT></A></SMALL></SMALL></TD>
  </TR>
</TABLE>
</CENTER></DIV>
</BODY>
</HTML>

Viel Spass

Thomas S.
Beitrag melden

–
Informationen zu den Bewertungsregeln
dynamisches Menü funktioniert nicht
Henryk Plötz 19.04.2000 00:26

dhtml
– Informationen zu den Bewertungsregeln
Ich versuch, das mal zu kommentieren:

<html>

<head>
<title>ausziehlayer</title>
<style>

»»  .navi{

position:absolute;
     width:163px;
   height:139px;
   background-color:#00ABAB;
   }
</style>

<script language="JavaScript1.2">

if (document.all)

So, weit war nix falsch :-)

»»  { menue="document.all.navigate.style.left"; }

else  { menue="document.navigate.left"; }

Beim IE enthält der String jetzt "document.all.navigate.style.left", sonst den String "document.navigate.left". Nochmal zum Mitschreiben das sind _Strings_

klappzuint = setInterval("klappzu()",50)
klappaufint = setInterval("klappauf()",50)

Du setzt ein Interval? jetzt sofort?

function klappzustop() { clearinterval(klappzuint) }
function klappaufstop() { clearinterval(klappaufint) }

Eine Funktion zum Stoppen, sehr schön.

function klappauf(){

»»  klappzustop

Ich glaube hinter einen Funktionsaufruf, gehört immer noch ein () sowie ein ;

»»  if ( menue<0 )

menue+=5

Du kannst einen String doch nicht um 5 erhöhen, wieder das ;

»»  else klappaufstop }

Erwähnte ich die Funktionsschreibweise schon :-)

function klappzu(){

»»  klappaufstop
»»  if ( menue>-120 )

menue-=5

»»  else klappzustop }

Und noch mal dasselbe

</script>

</head>

<body bgcolor=#ABABAB MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onResize="history.go(0)">

Nur um nett zu sein: Alle Werte, die keine nur-Zahlen sind sollte man in Anführungsstriche setzen. Demnächst muß man sowieso alles in Anführungsstriche setzen.

<div id="navigate" class=navi style="top:150; left:-120;"onMouseover="pull()" onMouseout="draw()"><center>Navigationstest.

Wo kommt denn pull() und draw() auf einmal her?

Dieser Container soll sich bei mouseOver nach rechts bewegen</center></div>
</body>
</html>

Wenn ich das in NC oder IE lade, passiert rein garnichts. (BTW: es ist in beiden grün hinterlegt)

So jetzt kommt meine Version:

<html>

<head>
<title>ausziehlayer</title>
<style>
.navi{
   position:absolute;
     width:163px;
   height:139px;
   background-color:#00ABAB;
   }
</style>

<script>

if (document.all)
{ ie=true; }
else  { ie=false; }

klappzuint = null;
klappaufint = null;

function klappzustop() { clearTimeout(klappzuint); }
function klappaufstop() { clearTimeout(klappaufint); }

function klappauf(){
klappzustop();
klappaufint=setTimeout("klappauf()",50);
if(ie) linksrand=parseInt(document.all.navigate.style.left); else linksrand=document.navigate.left;
if ( linksrand<0 )
   linksrand+=5;
else klappaufstop();
if(ie) document.all.navigate.style.left=linksrand; else document.navigate.left=linksrand;
}

function klappzu(){
klappaufstop();
klappzuint=setTimeout("klappzu()",50);
if(ie) linksrand=parseInt(document.all.navigate.style.left); else linksrand=document.navigate.left;
if ( linksrand>-120 )
   linksrand-=5;
else klappzustop();
if(ie) document.all.navigate.style.left=linksrand; else document.navigate.left=linksrand;
}

</script>

</head>

<body bgcolor="#ABABAB" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onResize="history.go(0)">

<div id="navigate" class="navi" style="top:150; left:-120;" onMouseover="klappauf();"
onMouseout="klappzu();"><center>Navigationstest.<br>Dieser Container soll sich bei mouseOver nach
rechts bewegen</center></div>
</body>
</html>

Im NC passiert leider wieder nichts, aber da mußt du das Mouseover vielleicht nur woanders hinsetzen.

Das nächste mal, schau aber lieber noch ein bischen in SelfHTML vorbei, Stichwort Dynamisches HTML
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Markus Till: dynamisches Menü funktioniert nicht