Antworten auf deine Fragen:
Neues Thema erstellen

SlideUp and SlideDown Formular

CrazyLopp

Hat es drauf

Hallo,

ich bin momentan an einem Forular dran welches ich mit jQuery verfeinern möchte, folgendemaßen sieht mien Code aus:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Formular mit jQuery</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
        <script type="text/javascript" src="script/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){     
             $("div.a1").click(function(){
                   $("div.u1").slideUp(5000);
             });
             $("div.a1").click(function(){
                $("div.u1").slideDown(5000);
            });
            $("div.a2").click(function(){
                $("div.u2").slideUp(5000);
            });
            $("div.a2").click(function(){
                $("div.u2").slideDown(5000);
            });
            $("div.a3").click(function(){
                $("div.u3").slideUp(5000);
            });
            $("div.a3").click(function(){
                $("div.u3").slideDown(5000);
            });
        });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div class="h1">
                <div class="a1">
                    <p>Kontaktdaten</p>
                </div>
                <div class="u1">
                    <p><b>Bitte Geben Sie Ihre Kontaktdaten ein!</b></p>
                    <br /><br />
                    <label for="vorname">Vorname:</label><br />
                    <input class="k_eingabe" size="30" id="vorname" name="vorname" /><br /><br />
                    <label for="name">Name:</label><br />
                    <input class="k_eingabe" size="30" id="name" name="name" /><br /><br />
                    <label for="email">E-Mail:</label><br />
                    <input class="k_eingabe" size="30" id="email" name="email" /><br /><br />
                </div>
            </div>
            <div class="h2">
                <div class="a2">
                    <p>Nachricht</p>
                </div>
                <div class="u2">
                    <p><b>Bitte tragen Sie Ihre Nachricht ein damit ich weiß um was es geht!</b></p>
                    <br /><br />
                    <label for="nachricht">Nachricht:</label><br />
                    <textarea class="k_eingabe" cols="50" rows="8" id="message" name="message"></textarea> 
                </div>
            </div>
            <div class="h3">
                <div class="a3">
                    <p>Abschicken</p>
                </div>
                <div class="u3">
                    <p><b>Wenn alle Ihre Angaben richtig sind können Sie hier das Formular abschicken!</b></p>
                    <br /><br />
                    <input class="abschicken" id="submit" name="submit" type="submit" value="Absenden" />
                </div>
            </div>
        </div>
    </body>
</html>


Das funktioniert auch alles gut jedoch wenn ich auf die a1 klicke zieht es sich zusammen, aber dann auch wieder sofort auseinander (es soll stehenbleiben beim zusammenziehen)...

Und eine Frage habe ich noch und zwar wie kann ich einstellen das ich beim aufrufen des Formulars alle Reiter ausgeblendet sind also das ich erst auf die Überschrift klicken muss damit Sie mir angezeigt werden kann...


Beste Grüße
 

cebito

undefined

AW: SlideUp and SlideDown Formular

Das funktioniert auch alles gut jedoch wenn ich auf die a1 klicke zieht es sich zusammen, aber dann auch wieder sofort auseinander (es soll stehenbleiben beim zusammenziehen)...

du kannst click nicht zweimal ansprechen und sagen er soll mal das dann aber doch das tun...
HTML:
             $("div.a1").click(function(){
                   $("div.u1").slideUp(5000);
             });
             $("div.a1").click(function(){
                $("div.u1").slideDown(5000);
            });
besser wäre

HTML:
  $("div.a1").click(function () {
    if ($("div.u1").is(":hidden")) {
      $("div.u1").slideDown(5000);
    } else {
      $("div.u1").slideUp(5000);
    }
  });
 

Christian

verpeilt & verschallert

AW: SlideUp and SlideDown Formular

Das Problem ist, dass Du mehrere Click Events auf einem div hast.
Code:
$("div.a3").click(function(){
    $("div.u3").slideUp(5000);
});
$("div.a3").click(function(){
    $("div.u3").slideDown(5000);
});
Das bedeutet, dass er erst hochscrollt, dann direkt wieder runter, weil beide Funktionen der Reihe nach ausgeführt werden, bei nur einem Klick. Ich hab zwar keine Ahnung von jQuery und auch nicht davon, was Dein Code bewirken soll, aber das hier könnte Deinem Problem helfen:
Code:
<script type="text/javascript">
function _slider(e){
	e.stop();
	/**
	 * false = Beim ersten Klicken wird runtergescrollt, danach abwechselnd
	 * true  = ----------- '' --------- hochgescrollt, ----------''---------
	 */
	if(!this.up) this.up = false;
	
	var t = $('div'+$(this).id.replace('a','u'));
	var amt = 5000;
	
	if(this.up){
		t.slideUp(amt);
	}else{
		t.slideDown(amt);
	}
	this.up = !this.up;
}

$(document).ready(function(){     
    $.each(['a1','a2','a3'],function(){
		$('div.'+this).click(_slider);
    });
});
</script>

Edit, Edit: Cebito, Du hast mein Edit gelöscht! Pfui!
Aber nochmal: Cebitos Lösung ist im Grunde das Selbe wie meins, halt nur mit mehr jQ, nur so zur Info für Dich.
 
Zuletzt bearbeitet:

cebito

undefined

AW: SlideUp and SlideDown Formular

Edit, Edit: Cebito, Du hast mein Edit gelöscht! Pfui!

Kommt vor im Gedränge ;) hat sich wohl überschnitten :D

@CrazyLopp - find im Übrigen 5 sek viel zu lange für so ne Animation, da könnten die Leute eher genervt als begeistert reagieren. 1 - 1.5 sek sollten ausreichend sein das Ding auf- bzw. zuzuklappen.
 

CrazyLopp

Hat es drauf

AW: SlideUp and SlideDown Formular

Vielen dank das Klappt prima :)

Aber ein kleines Problem habe ich noch und zwar weiß ich jetzt nicht so recht wie ich die Elemente die Ausfahren sollen am Anfang ausblenden kann, sodass ich die erst ausfahren muss damit ich den Inhalt sehen kann...
 

cebito

undefined

AW: SlideUp and SlideDown Formular

Vielen dank das Klappt prima :)

Aber ein kleines Problem habe ich noch und zwar weiß ich jetzt nicht so recht wie ich die Elemente die Ausfahren sollen am Anfang ausblenden kann, sodass ich die erst ausfahren muss damit ich den Inhalt sehen kann...

HTML:
$(document).ready(function(){
$("div.u1").hide();
$("div.u2").hide();
$("div.u3").hide();

//...hier dann die functions
 

CrazyLopp

Hat es drauf

AW: SlideUp and SlideDown Formular

Vielen dank Cebito für die Hilfe :)

Die 5 sec. waren nur ein Test da sich beim zusammeklappen etwas verschoben hat, bis ich dann mal drauf gekommen bin das der Scrollbalken sich ein und ausblendet ;)

Steht nur auf 1000 :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.633
Beiträge
1.538.446
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben