Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ein

  • Hallo zusammen,
    folgender Code ist gegeben (Ausschnitte)

    Code
    1. <div style="float: left; width: 30%; height: 100%;">
    2. </div>
    3. <div style="float: right; width: 70%; height: 100%;">
    4. </div>


    wie ist es Möglich, dass per Knopfdruck der Linke Bereich einklappt und der Rechte dann die ganze Breite nutzt?
    Das ganze muss dann auch wieder Ausfahrbar sein.


    Mit Freundlichen Grüßen,
    XtechniX

  • Hallo,


    für soetwas benutzt man JavaScript.
    Das ist eine Sprache die clientseitig läuft, sprich sie kann nach dem Laden der Seite ausgeführt werden.


    Um JavaScript in deine Seite einzubinden, verlinkst du entweder eine .js - Datei im head Bereich (oder am Ende deines bodys) deiner Seite:
    <script type="text/javascript" src="deinedatei.js"></script>


    oder du fügst direkt den Quellcode ein:
    <script type="text/javascript">// do something ..</script>


    Du kannst mit JavaScript deine CSS (style) Angaben verändern und die Klick-Funktion hinzufügen:



    Entweder (veraltet) über das HTML Attribut onclick="macheDieAnimation();" oder direkt über JavaScript (im script-Tag):
    document.getElementTagName('div')[0].onclick = function() {};


    Alternativ kannst du deinen divs auch eine Id geben (<div id="deineid" ..)
    Dann kannst du per document.getElementById('deineid').onclick .. die Funktion hinzufügen.


    Solltest du mehr solcher Dinge machen wollen, eignet sich die Bilbiothek jQuery für soetwas.


    Stylesheets kannst du per JS so ändern:
    var dom = document.getElementBy...
    dom.style.width = value;


    Deine Divs dürften jedoch sehr schwer klickbar sein, sie haben keine Farbe und sind wahrscheinlich weiß auf weißen Hintergrund.
    Du kannst auch das HTML Objekt button benutzen.
    <button id="deineid">Drück mich!</button>



    viel Erfolg ;)

  • Ja, es ging mir ehr um den genauen Animationscode und ich haben den Code auch stark gekürzt, damit er übersichtlicher ist, in echte ist er orange, mit einem Menü, welches halt einklappen soll, wenn man auf den dazugehörigen Knopf drückt. ;)

  • Das sieht stark nach einer Aufgabe aus, als eines deiner Projekte, richtig?
    Ich habe dir alle Informationen die du benötigst gegeben und du kannst/willst damit nichts anfangen?


    In 2Minuten (l.Aktivität vor deiner Antwort 19:23) hast du das gelsen und versucht umzusetzen oder wie? :)
    Wenn du liest, findest du sogar eigentlich den ganzen Quellcode :)
    Das ist das lustige dabei.


    Achso "lesen" kannst du CSS Attribute genauso wie "schreiben" in JS.
    var wdt = dom.style.width; gibt dir die Breite also beispielsweise zurück :)
    oder über dom.style.getAttribute('attr');
    Letzteres weiß ich aber nicht genau :)


    Kriegst du schon hin :)



    Und hier noch der erste Google-Eintrag zu diesem Thema: :)
    http://de.selfhtml.org/javascript/objekte/style.htm

  • Gut, ich habs jetzt so gelöst:


    Einziges Problem: Alles, was im popup Element ist, schwirrt, nachdem man es geschlossen hat, wild im Raum rum, wie kann ich das beheben?

  • OK du hast es versucht.
    Mit jQuery geht das eigentlich etwas einfacherer:


    Definiere 2 CSS Klassen pro Objekt:


    und wechsle dann mit jQuery einfach die Klassen bei der on-Click Funktion


    HTML Code dazu:

    HTML
    1. <button id="deineknopfid">Drück mich</button>
    2. <div id="popout" class="left-normal"></div>
    3. <div id="main" class="right-normal"></div>


    Hab das aber nicht getestet.
    Und damit hättest du auch keine Animation
    Wieso hast du 2x $(window).load() drin?