Ergebnis 1 bis 7 von 7

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

  1. #1
    Youngster
    Registriert seit
    29.11.2013
    Beiträge
    11
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

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

    Hallo zusammen,
    folgender Code ist gegeben (Ausschnitte)
    Code:
            <div style="float: left; width: 30%; height: 100%;">
    	</div>
    
            <div style="float: right; width: 70%; height: 100%;">
    	</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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ei

    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


  3. #3
    Youngster
    Themenstarter

    Registriert seit
    29.11.2013
    Beiträge
    11
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ei

    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.

  4. #4
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ei

    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
    Geändert von Bleistift (02.12.2013 um 20:42 Uhr)


  5. #5
    Youngster
    Themenstarter

    Registriert seit
    29.11.2013
    Beiträge
    11
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ei

    Gut, ich habs jetzt so gelöst:
    Code:
    <html>
    <head>
    	<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    	<script type='text/javascript'>
    $(window).load(function(){
    $('#toggle').toggle(
    
    
    function () {
        $('#popout').animate({
            width: '29%'
        }, 'slow', function () {
            $('#toggle').html('Close');
        });
    },
    
    
    function () {
        $('#popout').animate({
            width: 0
        }, 'slow', function () {
            $('#toggle').html('Show');
        });
    })
    })
    
    
    $(window).load(function(){
    $('#toggle').toggle(
    
    
    function () {
        $('#main').animate({
            width: '70%'
        }, 'slow', function () {
            $('#toggle').html('Close');
        });
    },
    
    
    function () {
        $('#main').animate({
            width: '98%'
        }, 'slow', function () {
            $('#toggle').html('Show');
        });
    })
    })
    
    
    </script>
    </head>
    <body style="margin: 0px;">
    	<div style="background-color: #; width: 100%; height: 100%; margin: 0px;">
    			
    			<div id="toggle">Show</div>
    
    
    				<div id="popout" style="background-color: #; float: left; width: 29%; height: 100%; margin-right: 1%;">
                                               Inhalt
    				</div>
    				
    				<div id="main" style="background-color: #; float: right; width: 70%; height: 100%; margin: 0px;">
                                               Inhalt
    				</div>
    
    
    	</div>
    </body>
    </html>
    Einziges Problem: Alles, was im popup Element ist, schwirrt, nachdem man es geschlossen hat, wild im Raum rum, wie kann ich das beheben?

  6. #6
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ei

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

    Definiere 2 CSS Klassen pro Objekt:
    HTML-Code:
    <style>
    body {
     margin:0; padding: 0;
    }
    
    div.left-normal {
     /* css aus deinem popout div */
    }
    
    div.left-popout {
     display: none; /* oder width: 0; */
     overflow: hidden; /* behebt dein problem */
    }
    
    div.right-normal {
     /* css aus deinem main div */
    }
    
    div.right-active {
     width: 100%;
    }
    </style>
    und wechsle dann mit jQuery einfach die Klassen bei der on-Click Funktion
    Code:
    $(document).ready(function() {
     $("#deineknopfid").click(function() { // wenn dein button gedrückt
    
       if ($("#main").hasClass('right-normal')) { // wenn main die css klasse right-normal hat
           $("#main").removeClass('right-normal');
           $("#main").addClass('right-active');
           $("#popout").removeClass('left-normal');
           $("#popout").addClass('left-popout');
           $(this).html('Zurück');
       }
      else { // wenn main klasse right-active hat bzw. wenn main nicht right-normal hat
           $("#main").removeClass('right-active');
           $("#main").addClass('right-normal');
           $("#popout").removeClass('left-popout');
           $("#popout").addClass('left-normal');
           $(this).html('Drück mich');
      }
    
     });
    }); // wenn dokument geladen
    HTML Code dazu:
    HTML-Code:
    <button id="deineknopfid">Drück mich</button>
    
    <div id="popout" class="left-normal"></div>
    <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?


  7. Folgende User finden die Antwort von Bleistift gut:


  8. #7
    Youngster
    Themenstarter

    Registriert seit
    29.11.2013
    Beiträge
    11
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ei

    Vielen Dank Und sorry für mein Unwissen

Ähnliche Themen

  1. Javascript: toggle: bei klick auf Element b soll Element a automatisch verschwinden
    Von Unregistrierter Nutzer4 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 26.09.2012, 19:49
  2. Element ein- und Ausfahren
    Von Machtvakuum im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 27.02.2012, 16:37
  3. Jquery: Bei Moushover Element anzeigen lassen
    Von davidos_no.1 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 28.03.2011, 19:47
  4. Was nutzt mir das Element Div?
    Von bodenseejenny im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 24.09.2009, 10:18
  5. Div Element verständniss frage
    Von Darkromeo im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 08.04.2007, 12:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •