4. JS: Kann mich jemand vor dem Selbstmord bewajhren ? Ich will weiter leben !

JS: Kann mich jemand vor dem Selbstmord bewajhren ? Ich will weiter leben !

  • ?

    Hi!
    Ich will auf meiner Homepage auch so ein schönes Pulldownmenü haben!
    So eines Tages entschloss ich mir ein paar Funktionnen zu schreiben um diese so ein Menu in meine Page zu Implementieren. So. fertig. Funktioniert Super 🙂
    Aber nicht ganz 😞

    Ich schreibe erst am Ende die Js Funktionen, da ich erstmal erleutern möche wo das Problem liegt.

    Ich habe x- "divs" für mein Menü, welche ich an die Positionen der Verschiedenen Menüpunkte setzte, die ich mit weiteren "divs" definiere.

    Verstanden ? Nein ? auch gut 😃

    Ok erstmal Code:

    <br>
<br>
<br>
<br> <!-- ein bisschen dynamik hineinbringen -->
<br>
<br>
<br>
<center>
<table>
 <tr>
  <td><div id=d1 style='position:relative;'><A href='' onmouseover="StopTimer(); Show(1);" onmouseout="StartTimer();" >Trismahaus</A></div></td>
  <td>     </td>
  <td><div id=d2 style='position:relative;'><A href='' onmouseover="StopTimer(); Show(2);" onmouseout="StartTimer();">Referenzen</A></div></td>
  <td>     </td>
  <td><div id=d3 style='position:relative;'><A href='' onmouseover="StopTimer(); Show(3);" onmouseout="StartTimer();">Suchen</A></div></td>
 </tr>
</table>

    So. Das ist erstmal der Code wie ich die Positionen der Menüpunkte herrausfinde !! ich umklammere jedes menü mit einem DIV und frage dann später das Atribut je nach Explorer ab.

    Das Funktioniert super. Das Menu taucht genau da auf wo es ein soll.
    --------------------------------------
    Nun, jetzt aber Der Code der nicht mehr geht!

    <br>
<br>
<br>
<table>
 <tr>
  <td> Line 1 </td>
 </tr>
 <tr>
  <td> Line 2 </td>
 </tr>
 <tr>
  <td> Line 3 </td>
 </tr>
 <tr>
  <td> Line 4 </td>
 </tr>
 <tr>
  <td><div id=d1 style='position:relative;'><A href='' onmouseover="StopTimer(); Show(1);" onmouseout="StartTimer();" >Trismahaus</A></div></td>
  <td>     </td>
  <td><div id=d2 style='position:relative;'><A href='' onmouseover="StopTimer(); Show(2);" onmouseout="StartTimer();">Referenzen</A></div></td>
  <td>     </td>
  <td><div id=d3 style='position:relative;'><A href='' onmouseover="StopTimer(); Show(3);" onmouseout="StartTimer();">Suchen</A></div></td>
 </tr>
</table>

    Hier sehen wird, oder besser gesagt, sollten wir sehen, dass hier weitere Zeilen in die Tabelle Implementiert werden. Nicht bessonderes oder ? ja das sehe ich auch so. Aber das sieht anscheinent der Explorer anders.

    Das PulldownMenu, welches NORMALERWEISE unter irgenteinme Menüpunkt auftauchen sollte, taucht etwas unterhalb vom Menüpunkt auf. Also nicht in die X Richtung sonder in der Y Richtung. In der X Richtung klappt alles wunderbar !!

    So ich habe dann durch ausprobieren herrausgefunden, dass je mehr Zeilen die tabelle hat ( "<tr><td> Line X</d></tr>" ), desto mehr ist die verschiebung der Y-Richtung ....

    Was haltet ihr davon ? Ich nicht sehr viel, da ich kurz davor bin aus dem Fenster zu springen, ich habe schon vieles versucht, klappt aber einfach nicht.

    Wen es also INteressiert, probiert die oberen bei Codes mit folgenden Javascript code aus!

    -- ihr müsst die function "PageInit()" ins OnLoad-Ereigniss vom body schreiben !!

    AChja hier noch die Pulldownmenüs, die dynmisch verschoben werden:

    <div id=m1 style='position:absolute; visibility:visible;'>
<table border='0' bgcolor='red' cellpadding=0 cellspacing=0>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item1</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item122131</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item312312</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item14</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item22225</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item612312312</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item7</A></td></tr>
</table>
</div>
<div id=m2 style='position:absolute; visibility:visible;'>
<table border='0' bgcolor='red' cellpadding=0 cellspacing=0>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item1</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item2</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item3</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item4</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item5</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item6</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item7</A></td></tr>
</table>
</div>
<div id=m3 style='position:absolute; visibility:visible;'>
<table border='0' bgcolor='red' cellpadding=0 cellspacing=0>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item1</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item2</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item3</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item4</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item5</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item6</A></td></tr>
 <tr><td><A href='' onmouseover='StopTimer();' onmouseout='StartTimer();' >Item7</A></td></tr>
</table>
</div>
y

    JsCode:

    <script type="text/javascript">

var DIVDOM      = '';
var browser     = '';
var NUMDIV      = 3;

// ---------------- Util ----------------------
function UTILGetNumDiv()
{
    return parseInt(NUMDIV);
}

// -------------- functions -------------------
function DIVInit()
{
    NUMDIV = 3;
    DIVDOM = 'NONE';

    if(document.getElementById) DIVDOM='DOM';
    else if(document.all)       DIVDOM='IE4';
    else if(document.layers)    DIVDOM='NN4';

    var appName = navigator.appName;
    var appVer = parseInt( navigator.appVersion );

    if( appName == 'Netscape' )
    {
        if( appVer == 5 ) 
            appVer=6;

        browser = 'NN'+appVer;
    }
    if( appName == 'Microsoft Internet Explorer' )
    {
        if( DIVDOM == 'DOM' && appVer == 4 ) 
            appVer=5; 

        browser ='IE'+appVer;
    }
    return 1;
}

function DIVGet( name )
{
    divID = null;

    switch( DIVDOM )
    {
        case 'DOM': divID=document.getElementById(name);break;
        case 'NN4': divID=document.layers[name]; break;
        case 'IE4': divID=document.all[name];break;
    }

    if( divID == null )
        alert( "ERROR: name nicht gefunden!" );
    return divID;
}

function DIVGetCmd( divID, cmd) 
{
  if (DIVDOM=='DOM') 
  {
    switch(cmd) 
    {
      case 'left': cmd='style.left'; break;
      case 'top': cmd='style.top'; break;
      case 'width': cmd='style.width'; break;
      case 'height': cmd='style.height'; break;
      case 'offsetLeft': cmd='offsetLeft'; break;
      case 'offsetTop': cmd='offsetTop'; break;
      case 'offsetRight': cmd='offsetLeft+divID.offsetWidth'; break;
      case 'offsetBottom': cmd='offsetTop+divID.offsetHeight'; break;
      case 'offsetWidth': cmd='offsetWidth'; break;
      case 'offsetHeight': cmd='offsetHeight'; break;
      case 'clip': cmd='style.clip'; break;
      case 'visibility': cmd='style.visibility'; break;
    }
  }
  else if (DIVDOM=='NN4') 
  {
    switch(cmd) 
    {
      case 'width': cmd='clip.width'; break;
      case 'height': cmd='clip.height'; break;
      case 'offsetLeft': cmd='pageX'; break;
      case 'offsetTop': cmd='pageY'; break;
      case 'offsetBottom': cmd='clip.bottom+divID.pageY'; break;
      case 'offsetRight': cmd='clip.right+divID.pageX'; break;
      case 'offsetWidth': cmd='clip.width'; break;
      case 'offsetHeight': cmd='clip.height'; break;
      case 'visibility': cmd='visibility'; break;
    }      
  }
  else if (DIVDOM=='IE4') 
  {
    switch(cmd) 
    {
      case 'left': cmd='style.left'; break;
      case 'top': cmd='style.top'; break;
      case 'width': cmd='style.width'; break;
      case 'height': cmd='style.height'; break;
      //case 'offsetLeft': cmd='offsetLeft'; break;
      //case 'offsetTop': cmd='offsetTop'; break;
      case 'offsetLeft': cmd='style.pixelLeft'; break;
      case 'offsetTop': cmd='style.pixelTop'; break;
      case 'offsetRight': cmd='style.pixelLeft+divID.style.pixelWidth'; break;
      case 'offsetBottom': cmd='style.pixelTop+divID.style.pixelHeight'; break;
      case 'offsetWidth': cmd='style.pixelWidth'; break;
      case 'offsetHeight': cmd='style.pixelHeight'; break;
      case 'clip': cmd='style.clip'; break;
      case 'visibility': cmd='style.visibility'; break;
    }      
  }

  return cmd;
}

function DIVMove( divID, x, y )
{
    if( divID == null ) divID = DIVGet( divID );
    if( divID == null ) return 0;   

    return 1;   
}

function DIVSetAttribute( divID, cmd, value )
{
    if( divID == null ) divID = DIVGet( divID );
    if( divID == null ) return 0;
    if (DIVDOM == 'NN4') 
    {
        if (value=='visible') value='show';
        if (value=='hidden') value='hide';
    }
    eval('divID.'+DIVGetCmd(divID,cmd)+'=\''+value+'\'');
    return 1;
}

function DIVGetAttribute( divID, cmd )
{
    if( divID == null ) divID = DIVGet( divID );
    if( divID == null ) return 0;
    var s=eval('divID.' + DIVGetCmd( divID, cmd ) );
    if( DIVDOM == 'NN4' )
    {
        if (s=='show') s='visible';
        if (s=='hide') s='hidden';
    }
    return s;
}

function DIVHide( divID )
{
    if( divID == null ) divID = DIVGet( divID );
    if( divID == null ) return 0;
    DIVSetAttribute(divID,'visibility','hidden');
    return 1;
}

function DIVShow( divID )
{
    if( divID == null ) divID = DIVGet( divID );
    if( divID == null ) return 0;
    DIVSetAttribute(divID,'visibility','visible');
    return 1;
}

function DIVToggle( divID )
{
    if( divID == null ) divID = DIVGet( divID );
    if( divID == null ) return 0;
    var s = DIVGetAttribute( divID, 'visibility' );
    if( s == 'show' || s == 'visible') 
        DIVHide( divID );
    else
        DIVShow( divID );
    return 1;
}

function DIVHideAllDiv()
{
    for( i=1; i <= UTILGetNumDiv(); i++ )
    {
        if( !DIVHide( DIVGet('m'+i) ) )
            return 0;
    }
    return 0;
}

function DIVInitEventHandler()
{
    /*Überwachung von Internet Explorer initialisieren*/
    if(!window.Weite && document.body && document.body.offsetWidth)
    {
        window.onresize = DIVOnResize;
    }
    /*Überwachung von Netscape initialisieren*/
    if(!window.Weite && window.innerWidth)
    {
        window.onresize = DIVOnResize;
    }
    return 1;
}

function DIVOnResize()
{
    for( i=1; i <= UTILGetNumDiv(); i++ )
    {
        divM = DIVGet('m'+i);
        divD = DIVGet('d'+i);
        DIVSetAttribute( divM, 'left', DIVGetAttribute( divD, 'offsetLeft') );
        DIVSetAttribute( divM, 'top',  DIVGetAttribute( divD, 'offsetTop') + DIVGetAttribute( divD, 'offsetHeight')  );
    }
    return 1;
}

// ------------------------------------------------------

var Timer = 0;

function PageInit()
{
    DIVInit();
    DIVInitEventHandler();
    DIVOnResize();
    DIVHideAllDiv();
    return 1;   
}

function Show(n)
{
    DIVHideAllDiv();
    DIVShow( DIVGet('m'+n) );
}

function Hide(n)
{
    DIVHideAllDiv();
    DIVHide( DIVGet('m'+n) );
}

function StartTimer()
{
    clearTimeout( Timer );
    Timer = setTimeout( "DIVHideAllDiv()", 1200 );
}

function StopTimer()
{
    clearTimeout( Timer );
}

 -->
</script>

Grüsse JS_CODER
    0
  • S
    Mod

    4 stunden lang keine antwort und du maulst rum?
    Wer kann mir bei meinem Problem helfen ?

    So nicht!

    Schon mal ueberlegt weniger Code zu posten - wir beantworten gerne Fragen, aber bitte nicht 100 Zeilen unkommentierten code hinklatschen und sagen: sucht den fehler!!

    0
  • ?

    hi!
    So ist das auch nicht gemeint.
    Ich glaube, dass bei solch einfachen Coding keine Kommentare nötig sind.
    Hm, ok ich bin für jede Hilfe dankbar ...

    Grüsse

    0
  • F

    Schau dir nochmal was über Tabellen an (z.B. http://selfhtml.teamone.de/html/tabellen/zellen_verbinden.htm )
    Stichwort colspan und bastel erstmal eine richtige Tabelle, bevor du mit solchen Scripts anfängst
    Wahrscheinlich hast du's ja eh nur irgendwo kopiert, denn ich kann mir nicht vorstellen, das du ein so umfangreiches Script schreiben aber keine richtige Tabellen erstellen kannst 😉

    0
  • ?

    hi!
    Ich habe den Code geschrieben !!
    Den findest du sicherlich nicht im Internet, und wenn ja dann nur aus reinem Zufall. Der ist zu 100% copyright (c) by me 🙂

    ? bitte wo hab ich meine Tabelle nicht sachgemäß angefangen, bzw. beendet ?

    Das mit dem colspan ist hier egal. Der Style kommt bei mir immer am Ende. ZU allerst kommt das funktionelle.
    ---

    Woran kann es denn liegen ?
    Am Code glaube ich es nicht, da es ohne meherere "tr"'s wunderbar funktioniert !

    Gerüsse JS_CODER

    0
  • F

    [code]<table>
    <tr>
    <td> Line 1 </td> <<-- Hier hast du nur eine Spalte
    </tr>
    <tr>
    <td> Line 2 </td> <<-- Hier hast du nur eine Spalte
    </tr>
    <tr>
    <td> Line 3 </td> <<-- Hier hast du nur eine Spalte
    </tr>
    <tr>
    <td> Line 4 </td> <<-- Hier hast du nur eine Spalte
    </tr>
    <tr> Hier hast du insgesamt 5 Spalte, daher brauchst du oben in deinen <td>-tags ein colspan=5
    <td><div id=d1 style='position:relative;'>...</div></td>
    <td>Hier war eine leere Zelle (sollte man nie machen)</td>
    <td><div id=d2 style='position:relative;'>...</div></td>
    <td> </td>
    <td><div id=d3 style='position:relative;'>...</div></td>
    </tr>
    </table>[/code]

    0
  • ?

    Hi!
    Das macht in diesem Fall nichts aus !!
    Ich habe dir eine E-Mail geschickt, mit dem anhang von 2 Dateien.

    Schau nach, und du wirst sehen was komisch ist !!
    Grüsse

    0
  • L

    probiers doch wenigstens mal mit colspan=5. mehr als nicht gehen kanns ja nicht.

    lw

    0
  • ?

    hi!
    Alles schon probiert !!!
    Das geht einfach nicht. Ich bekomm hier gleich die Krise !!!!

    0
  • F

    Schick's mir nochmal, dann kann ich's mir mal angucken!

    0
Anmelden zum Antworten