mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 10:49 Benutzername: Passwort: Auto-Login

Thema: JavaScript Ausfahrfunktion vom 10.10.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> JavaScript Ausfahrfunktion
Seite: 1, 2  Weiter
Autor Nachricht
SamNowi
Threadersteller

Dabei seit: 18.09.2011
Ort: Nordrhein Westfalen
Alter: -
Geschlecht: -
Verfasst Mi 10.10.2012 16:04
Titel

JavaScript Ausfahrfunktion

 Antworten mit Zitat Zum Seitenanfang
Stehe zur Zeit total auf dem Schlauch - ich möchte eine Funktion bauen, wenn ich bei einen Beitrag auf "Kommentieren" klicke, soll sich unten ein Kommentarfeld ausfahren ohne die Seite neuzuladen.

Weißt da jemand um Rat? Habe leider noch nicht so viel Erfahrungen mit JavaScript und Co.
Ich Danke schonmal für Mithilfe. Lächel

Edit: Hier noch mal für die bessere Erklärung



Grüße,
SamNowi

Zuletzt bearbeitet von SamNowi am Mi 10.10.2012 16:09, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 10.10.2012 17:00
Titel

Antworten mit Zitat Zum Seitenanfang
Das ist mit jQuery sehr easy. Du baust das Kommentarfeld einfach wie gehabt mit in die Seite rein, versteckst es dann mittels jQuery und klappst es wieder aus, sobald jemand auf den entsprechenden Link klickt. Wichtig ist dabei, das Formular nicht sofort mittels CSS zu verstecken - dann kann es ein User ohne Javascript nicht sehen.

so in der Richtung http://jsfiddle.net/zguZT/1/

Erstklassiges jQuery Tutorial: https://tutsplus.com/course/30-days-to-learn-jquery/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Mi 10.10.2012 17:06
Titel

Antworten mit Zitat Zum Seitenanfang
Dazu braucht es kein Javascript.

Du brauchst

- eine checkbox
- ein label für die checkbox
- den bereich den du anzeigen möchtest

Code:

<div>
<input type="checkbox" id="check">
<label for="check">klickmich</label>
<div>tralala</div>
</div>


Dann brauchst du etwas css um

- die checkbox zu verstecken
- den bereich zu verstecken der ausgeblendet werden soll
- den bereich wieder einzublenden wie die checkbox "gecheckt" ist

Zitat:

div div {display: none;}
input {display: none;}
input:checked ~ div {display: block;}


Aufhübschen kannst du das Ganze noch mit weiterem CSS und Transitions

Kleines Beispiel: http://jsfiddle.net/uCezE/

Gruß
Karl

Zuletzt bearbeitet von Karlarsch am Mi 10.10.2012 17:25, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
SamNowi
Threadersteller

Dabei seit: 18.09.2011
Ort: Nordrhein Westfalen
Alter: -
Geschlecht: -
Verfasst Mi 10.10.2012 17:09
Titel

Antworten mit Zitat Zum Seitenanfang
Erstmal ein Dankeschön für eure hilfreichen Antworten!
Ich werde es gleich mal probieren, wenn Problem auftauchen meld ich mich gleich nochmal Lächel
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 10.10.2012 17:30
Titel

Antworten mit Zitat Zum Seitenanfang
Karlarsch hat geschrieben:
und Transitions


...die in älteren Browsern leider nicht funktionieren. Ebenso wenig wie :checked. Also braucht es noch ein Weiche, um die grobe Funktionalität zu gewährleisten.

Ansonsten ist deine Lösung aber eleganter, kannte ich noch garnicht! *Thumbs up!*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
SamNowi
Threadersteller

Dabei seit: 18.09.2011
Ort: Nordrhein Westfalen
Alter: -
Geschlecht: -
Verfasst Mi 10.10.2012 18:08
Titel

Antworten mit Zitat Zum Seitenanfang
Leider klappte das noch nicht *Schnief*

Was ich eingefügt habe:

<header> :
Code:
<script>

$('#kommentieren').hide();
$('#kommentarKlick').on('click', function(e) {
    e.preventDefault();
    $('#kommentieren').slideDown();
});

</script>



<body>:

Code:
<div id=kommentieren style='display: block; width:533px;float:right;background:#eeeeee;padding:5px;border-bottom:1px solid #fff;'>

<form action='' method='post'><input type='text' name='comment' style='width: 505px;'  placeholder='Kommentar schreiben' style='background:#fff;border:1px solid #e0e0e0;padding:5px;margin:2px;border-radius: none;box-shadow:none;' /></form>

</div>
  View user's profile Private Nachricht senden
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Mi 10.10.2012 18:23
Titel

Antworten mit Zitat Zum Seitenanfang
quote much, quote often.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 10.10.2012 18:30
Titel

Antworten mit Zitat Zum Seitenanfang
Ein paar Javascript btw. jQuery Grundkenntnisse wären schon nötig, wir können Dir das hier nicht alles komplett vorkauen. Erstmal musst Du jQuery einbinden, die passenden Funktion dazu kommen dann in einen Block am Ende (!) des Dokumentes oder in einen ready Block ala

Code:
$(function() {
   // Stuff to do as soon as the DOM is ready;
});


Und bitte, bitte, bitte schreibe keinen Inline-Code. Die CSS Angaben gehören in eine eigene Datei!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [javascript] mit <select> feld wert an javascript funk
javascript in php
Javascript Uhr
ist das javascript ?
Javascript im XML
JavaScript in PHP
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB