Ankündigung

Einklappen
Keine Ankündigung bisher.

Onclick Dropdown

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Onclick Dropdown

    Hallo alle zusammen, ein JavaScript-Anfänger hat ein Problem.
    Ich will per Onclick auf einen Link ne DIV box vergrößern... das funktioniert auch. Leider, sobald ich auf einen anderen Link gehe, der in der vergrößerten Box steht, wird sie wieder klein. hier mein code:
    PHP-Code:
    <script language="javascript" type="text/javascript">
    <!--     // JavaScript-Bereich für ältere Browser auskommentieren

    // Folgende Funktion ändert die X- und Y-Ausdehnung des DIV-Elements

    function set_dimensions (width, height) {
          document.getElementById ('navDropDown').style.width = width;
          document.getElementById ('navDropDown').style.height = height;
    }
    // -->

    <div id="navDropDown" onmouseout="this.style.height='36px';" style="background-image: url(http://www.kinopolis.de/img_filme/24152.jpg);position:absolute;left:0px;top:0px;z-index:3;background-color:#333333; height:36px; width:140px; overflow:hidden;">
           
    <    a href="javascript:set_dimensions(300, 300)">Uebersicht</a><br /><br />
    <    a href="#">Uebersicht</a><br /><br /> 

    </    div>
    </script> 
    Under Construktion
    Stichworte: -
  • #2
    Kann es sein, dass es an dem onmouseout liegt? Wahrscheinlich wird der "onmouseout"-Bereich beim Vergrössern des divs nicht mit vergrössert (kommt in bestimmten Browsern schonmal vor) und wenn dann der zweite Link ausserhalb des vorher sichtbaren Bereichs ist, gilt das wie ein "onmouseout". Gib mal beim onmouseout (nach dem this.style.height='26px' noch ein Alert aus! Dann merkst du, ob es daran liegt.

    Kommentar

    • #3
      ne, das funktioniert ja, aber das problem ist, dass wenn ich auf einen link gehe, das in dem neuen bereich liegt, wird es wieder klein...
      Under Construktion

      Kommentar

      • #4
        Achso, das ist ja logisch. Wenn du eine neue Seite aufmachst oder die gleiche Seite neu lädst, werden alle Änderungen, die du per Javascript vorgenommen hast, natürlich verworfen. Du kannst höchstens die Masse jeweils per Javascript in ein Cookie oder so speichern und dann beim Aufbauen der Seite überprüfen, ob ein Cookie existiert und wenn ja, die Werte neu setzen. Ich bin aber grundsätzlich kein Freund von Cookies, deshalb lass ich immer die Finger davon ^^

        Kommentar

        • #5
          neee ^^. also ich vergrößere mit dem onclick die div-höhe... kann in dem neuen ganzen div mit der mausrumfahren geht das, nur sobald da nen link drin ist und ich darüber geh, wird das div wieder klein...
          Under Construktion

          Kommentar

          • #6
            Zitat von Hu5eL Beitrag anzeigen
            neee ^^. also ich vergrößere mit dem onclick die div-höhe... kann in dem neuen ganzen div mit der mausrumfahren geht das, nur sobald da nen link drin ist und ich darüber geh, wird das div wieder klein...
            Das ist das normale Verhalten von onMouseOut....

            Wenn ich dir einen Tipp geben darf: Schau dir mal das JavaScript-Framework JQuery an. Da sähe eine Lösung so aus:

            Code:
            <html>
<head>
<title>Testseite</title>
<script type="text/javascript" src="jquery.js" ></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $('#navDropDown').hover(function(){}, function(){
        $(this).height('36px');
    });
    $('#makeMeBig').click(function(){
        $('#navDropDown').height('300px').width('300px');
    });
});
</script> 
</head>
<body>
<div id="navDropDown"  style="background-image: url(http://www.kinopolis.de/img_filme/24152.jpg); height:36px; width:140px; overflow:hidden;">
    <span id="makeMeBig">Klick mich groß</span>
    <a href="#">Uebersicht</a><br /><br /> 
    blabla
</div>
</body>
</html>
            [URL="https://www.quizshow.io/"]Create your own quiz show.[/URL]

            Kommentar

            • #7
              Ah alles klar. Jetzt verstehe ich es. Beim überfahren eines Links wird ein onmouseover beim Link-Objekt ausgeführt und vorher noch ein onmouseout beim div-Objekt, da du das div-Objekt ja verlässt und auf das Link-Objekt gehst.

              Der Vorshclag von agrajag ist meiner Meinung nach eine der optimalsten Lösungen.

              Kommentar

              • #8
                ok danke. werde es mal verscuehn
                Under Construktion

                Kommentar

                Vorherige Weiter
                Lädt...
                X