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

xtechnix

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

Bleistift

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

xtechnix

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.

Bleistift

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

xtechnix

Gut, ich habs jetzt so gelöst:

HTML

<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>

Alles anzeigen

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

Bleistift

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

Definiere 2 CSS Klassen pro Objekt:

HTML

<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>

Alles anzeigen

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

Alles anzeigen

HTML Code dazu:

HTML

<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?

xtechnix

Vielen Dank Und sorry für mein Unwissen

Tags