java script "fensteröffner"

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • java script "fensteröffner"

    hallo, ich habe eben ein script gefunden, welches eine verstecktes fenster öffnet, in dem einige bider zu sehen sind. eigentlich könnte man dies auch mit css bewerkstellingen, nur hätte man dann nicht diese slide effekt. genau dieser macht mir etwas zu schaffen. ich würde eigentlich gern, dass die box nach oben slidet, statt nach unten. außerdem kann ich nicht die <div> box nicht verschieben. obwohl ich im css die angaben für top und left angegeben hatte:

    Quellcode

    1. <style type="text/css">
    2. /* the box on top of the box we wish to show - this one hide the second one
    3. we set the height as 0.1 to avoid an IE bug when the height is 0.
    4. */
    5. #coverlogin{
    6. top: 400px;
    7. left:200px;
    8. width: 220px;
    9. height: 220px;
    10. overflow:hidden;
    11. visibility: hidden;
    12. border:1px;
    13. }
    14. #loginbox{
    15. top: 400px;
    16. left:200px;
    17. width: 220px;
    18. height: 220px;
    19. border: 1px;
    20. }
    21. </style>
    22. <script type="text/javascript">
    24. var hh=0;
    25. var inter;
    27. //we show the box by setting the visibility of the element and incrementing the height smoothly
    28. function ShowBox()
    29. {
    31. //Depending on the amount of text, set the maximum height here in pixels
    32. if(hh==220)
    33. {
    34. clearInterval(inter);
    35. return;
    36. }
    38. obj = document.getElementById("coverlogin");
    39. obj.style.visibility = 'visible';
    40. hh+=2;
    41. obj.style.height = hh + 'px';
    42. }
    44. //same way as above but reversed
    45. function HideBox()
    46. {
    47. obj = document.getElementById("coverlogin");
    49. if(hh==2)
    50. {
    51. obj.style.visibility = 'hidden';
    52. obj.style.height = '220px';
    53. clearInterval(inter);
    54. return;
    55. }
    56. hh-=2;
    57. obj.style.height = hh + 'px';
    58. }
    59. </script>
    60. </head>
    62. <body>
    65. <!-- set an interval for the increment of the height by clicking onto this link -->
    66. <a href="#" onClick="inter=setInterval('ShowBox()',3);return false;">Click here to show the box</a>
    67. <div id="coverlogin">
    68. <div id="loginbox">
    70. <table width="220" border="0">
    71. <tr>
    72. <td width="100"><img src="bilder/Bild001.jpg" width="100" alt="bild"></td>
    73. <td width="20"></td>
    74. <td width="100"><img src="bilder/Bild002.jpg" width="100" alt="bild"></td>
    75. </tr>
    76. <tr>
    77. <td height="20"></td>
    78. <td><a href="#" onClick="inter=setInterval('HideBox()',3);return false;">X</a></td>
    79. <td></td>
    80. </tr>
    81. <tr>
    82. <td width="100"><img src="bilder/Bild003.jpg" width="100" alt="bild"></td>
    83. <td></td>
    84. <td width="100"><img src="bilder/Bild004.jpg" width="100" alt="bild"></td>
    85. </tr>
    86. </table>
    89. </div>
    90. </div>
    Alles anzeigen

  • Hi,

    ersteinmal zum positionieren. Für das positionieren, benötigt das div Element eine Positionsart, damit es weiss, wie es mit den top,left... etc. Werten umzugehen hat.
    Das kannst du erreichen indem du einfach die Positionsart mit "position" setzt.


    eigentlich könnte man dies auch mit css bewerkstellingen

    Das ist alles mit css realisiert, auch der slide Effekt :) JavaScript macht nichts anderes ausser die Style Werte on-the-fly zu manipulieren um die Effekte zu erzeugen, aber das ganze immer auf basis von CSS.



    Du hast 2 Funktionen showBox und hideBox. Beim klicken werden diese Funktionen sooft hintereinander aufgerufen, bis hh (was die Höhe des divs repräsentiert) einen bestimmten Wert erreicht.

    Beim öffnen wird die Box also jedesmal 2px größer.

    Quellcode

    1. hh+=2;
    2. obj.style.height = hh + 'px';


    und beim schließen, 2px kleiner:

    Quellcode

    1. hh-=2;
    2. obj.style.height = hh + 'px';



    Damit die Box von oben slidet müsstest du mit negativen Werten arbeiten, wobei mir grade nichts sinnvolles dazu einfällt :rolleyes: , aber der Ansatz sollte reichen.