Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst Input Text öffnet div tag

Mitglied: jocheng

jocheng (Level 1) - Jetzt verbinden

05.04.2016 um 19:03 Uhr, 679 Aufrufe, 22 Kommentare

Hallo Leute
Ich suche nach einem ganz einfachen weg ein Div durch ein <input type text zu öffnen (nur HTML und CSS)

Was will ich???
Es soll eine einfache Frage gestellt werden zum beispiel "Wie heißt der Kaier von...." bei der Antwort China soll darunter ein kleiner <div> tag aufgehen. Das wars schon. Kann mir jemand helfen???? Mir fehlt die Richtige Idee und leider auch die Kenntnis.

Gruß
Jo
Mitglied: agowa338
05.04.2016 um 20:04 Uhr
Ohne javascript wird das wohl nicht gehen... (oder php)
Bitte warten ..
Mitglied: 114757
05.04.2016, aktualisiert um 22:59 Uhr
Bitte warten ..
Mitglied: jocheng
07.04.2016 um 14:55 Uhr
Super genial @114757 klappt einfach traumhaft. Ich schau mal das ich mir noch nen absende button einbaue aber das denke ich kriege ich schon hin. Der Java Code war das was mir gefehlt hat und was ich einfach nicht kann
Bitte warten ..
Mitglied: 114757
07.04.2016, aktualisiert 09.04.2016
Zitat von jocheng:
Super genial @114757 klappt einfach traumhaft. Ich schau mal das ich mir noch nen absende button einbaue
https://jsfiddle.net/6ck6qnvb/11/
Bitte warten ..
Mitglied: jocheng
09.04.2016 um 16:48 Uhr
Das geht aber nicht!! oder klappt es bei dir?
Bitte warten ..
Mitglied: 114757
09.04.2016, aktualisiert um 18:23 Uhr
War nur ein Tippfühler Ist korrigiert.
Bitte warten ..
Mitglied: jocheng
09.04.2016 um 20:03 Uhr
Perfekt jetzt muß ich nur noch statt dem Korrekt einen {include file="details/item.tpl"} ausführen können oder einen Link (a href) setzen können dann habe ich alles.

reicht da ein inner.HTML???
Bitte warten ..
Mitglied: 114757
09.04.2016, aktualisiert um 21:05 Uhr
Entweder du setzt die Eigenschaft innerHTML des DIVs per JavaScript so wie ich es im Beispiel gemacht habe.

Oder du setzt das Template direkt in den DIV im HTML-Code und setzt dann im Inline-Style des DIVs den DIV initial als ausgeblendet
<DIV id="answer_div" style="display:none"></DIV>
In dem Fall lässt du dann zusätzlich die Zeilen in denen der Inhalt gesetzt wird weg
Das sind diese:
eltarget.innerText = "KORREKT";
eltarget.innerText = "FALSCH";
Fertsch ...
Bitte warten ..
Mitglied: jocheng
10.04.2016 um 08:46 Uhr
<DIV id="answer_div" style="display:none"></DIV>

damit geht es gut nur das Problem ist das ich dann entweder bei beiden den Inhalt des divs angezeigt bekomme oder eben nicht. Bei der falschen Antwort kann ich das div zwar einfach auf none lassen aber dann kommt keine Fehlermeldung. auch mit :before habe ich keine Richtige Lösung hinbekommen. Hast du ne Idee?

Zudem wird der Smarty Include einfach nicht ausgeführt :/ (im div). HTML Links gehen
Bitte warten ..
Mitglied: 114757
10.04.2016, aktualisiert um 09:16 Uhr
Dann mach halt zwei DIVs die du je nach Antwort einblendest oder eben ja nach Antwort den entsprechenden Inhalt rein schreibst.
Einfach mal das Hirn einschalten....
Bitte warten ..
Mitglied: jocheng
10.04.2016 um 15:30 Uhr
habe es mit nem 2ten div gemacht. Kannst du mir sagen woran es liegt das ein include mit vode {include file="details/item.tpl"} nicht klappt?
Bitte warten ..
Mitglied: 114757
10.04.2016, aktualisiert um 15:47 Uhr
Ich kenn dein CMS und Template System nicht ...
Du wirst wohl die Tags im JavaScript escapen müssen das handelt jedes System anders. Denn geschweifte Klammern sind nunmal in JavaScript spezielle Zeichen die interpretiert werden.
Schau einfach in die Doku deines CMS da steht das 100% drin!!
Bitte warten ..
Mitglied: jocheng
19.04.2016 um 13:08 Uhr
Hey Jodel32 ich habe mich heute nochmal dran gesetzt und es geht jetzt alles super. Danke für deine Hilfe.

Das einzige was ich einfach nicht hinbekomme ist das bei Richtiger Antwort ein anderes Div aufgeht wie bei einer Falschen Antwort.

Als Richtig divrichtig und bei falsch divfalsch.

kannst du mir nochmals helfen?
Bitte warten ..
Mitglied: 114757
19.04.2016 um 13:16 Uhr
2 DIVs in dein HTML reinpacken, beide initial display:none und dann wie gezeigt den style per Javascript auf display:block setzen. feddich. Hirn einschalten
Bitte warten ..
Mitglied: jocheng
19.04.2016 um 15:49 Uhr
01.
{literal}
02.
<style type="text/css">
03.
.wrong {
04.
    display: block!important;
05.
    color: red;
06.
}
07.
.correct {
08.
    display: block!important;
09.
    color: green;
10.
}
11.
#answer{
12.
  display:inline;
13.
  font-family:Arial,Sans-Serife;
14.
}
15.
</style>
16.
{/literal}
17.
{literal}
18.
<script language="javascript" type="text/javascript">
19.
function checkInput(elInput,elAnswer,strAnswer){
20.
    var eltarget = document.getElementById(elAnswer);
21.
    var elInput = document.getElementById(elInput);
22.
   if(elInput.value.toLowerCase() == strAnswer.toLowerCase()){
23.
        
24.
        eltarget.setAttribute("class","correct");
25.
   }else{
26.
        eltarget.setAttribute("class","wrong");
27.
   }
28.
}
29.
</script>
30.
 {/literal}
31.

32.
wie heißt der Kaiser von china? 
33.
<input type="text" id="input_answer" value="" />
34.
<input type="button" value="Prüfen" onClick="checkInput('input_answer','answer_div','china')"/>
35.
<DIV id="answer_div" style="display:none;">Richtig</DIV>
36.
<DIV id="answer_div .wrong" style="display:none;">falsch </DIV>
37.

38.
habe ich probiert aber das geht nicht
Bitte warten ..
Mitglied: 114757
19.04.2016, aktualisiert um 15:55 Uhr
Doch.
aber wenn man die Klasse in das ID Tag einträgt, ist Hopfen und Malz vollkommen verloren ..
Bitte warten ..
Mitglied: jocheng
19.04.2016 um 17:09 Uhr
Ich raff es einfach nicht. Ich habe schon
01.
<DIV id="answer_div" class="wrong" style="display:none;">falsch </DIV> 

habe ich auch schon probiert aber dann wird mir das div ja immer angezeigt. Ich glaube ich habe da heute einfach schon zu lange drauf geschaut. Kannst du mir bitte helfen
Bitte warten ..
Mitglied: jocheng
19.04.2016 um 18:32 Uhr
du bist genial ;) DANKE DANKE DANKE
Bitte warten ..
Mitglied: jocheng
05.06.2016 um 16:50 Uhr
ich brauche nochmals deine Hilfe . was muß ich tun damit 2 Antworten möglich sind???? Ich habe jetzt probiert den input Bereich zu verändern:

01.
<input type="text" id="input_answer" value="Antwort eingeben" onblur="if(this.value=='')this.value='Antwort eingeben';" onfocus="if(this.value=='Antwort eingeben')this.value='';" class="form-control" />
02.
    <input type="button" value="Antworten" class="btn btn-primary btn-block btn-sm" onClick="checkInput('input_answer','AntwortA'),('input_answer','AntwortB')"/>
03.
    
aber das funktioniert nicht
Bitte warten ..
Mitglied: 129413
LÖSUNG 05.06.2016, aktualisiert um 17:40 Uhr
Grüezi,
ich glaub auf den User da oben kannst du lange warten, der hat sich doch abgemeldet?!

https://jsfiddle.net/6ck6qnvb/13/

Aber irgendwie sinnlos, wenn jeder Depp sich die Lösung aus seinem Browserquelltext herausholen kann...

Gruß skybird
Bitte warten ..
Mitglied: jocheng
10.07.2016 um 06:39 Uhr
Und wieder suche ich nach einer kleinen erweiterung. Was muß ich machen damit man die Frage nur einmal beantworten muß! Also auf Seite xxx/kaiser.html wird danach gefragt und auf xxx/koenig.html auch noch. Wenn man die Frage aber auf der kaiser.html Seite beantwortet hat soll auch auf koenig.html das Div angezeigt werden.

Da ich ja keinen Plan davon habe bräuchte ich hilfe. Ich habe schon gegoogelt und etwas mit data-id gefunden. Geht es das man dem div eine data-id gibt?

01.
<DIV id="correct" class="correct" data-id="kaiser">
Bitte warten ..
Ähnliche Inhalte
CSS

Div zu übergeordnetem div ausrichten

gelöst Frage von tsunamiCSS2 Kommentare

Hallo, ich möchte sowas wie einen Tagesablauf dokumentieren. 1.2.19 usw. Das Ganze farblich mit Divs dargestellt. Soweit so gut. ...

Switche und Hubs

Switch mit PoE-Input

gelöst Frage von Fenris14Switche und Hubs11 Kommentare

Guten Tag, ich bin derzeit auf der Suche nach einem Switch der über PoE mit Strom versorgt wird und ...

CSS

Css div-Boxen nebeneinander

gelöst Frage von tsunamiCSS2 Kommentare

Hallo, ich habe Thema welches auf den ersten Blick mit unzähligen ähnlichen Ansätzen funktionieren soll, tut es aber nicht. ...

CSS

Positionierung von DIV - Sidebar

gelöst Frage von chris84CSS5 Kommentare

Hallo Zusammen, ich möchte gern ein eine Sidebar auf meiner Seite einbauen. Leider wird diese aktuell am DIV "Company" ...

Neue Wissensbeiträge
Windows Server

Active Directory ESE Version Store Changes in Server 2019

Information von Dani vor 3 StundenWindows Server

Moin, Last month at Microsoft Ignite, many exciting new features rolling out in Server 2019 were talked about. But ...

Exchange Server

Microsoft Extending End of Support for Exchange Server 2010

Information von Dani vor 3 StundenExchange Server

Moin, After investigating and analyzing the deployment state of an extensive number of Exchange customers we have decided to ...

Schulung & Training

Humble Book Bundle: Network and Security Certification 2.0

Tipp von NetzwerkDude vor 5 StundenSchulung & Training

Abend, bei HumbleBundle gibts mal wider ein schönes Paket e-books: sind verschiedene Zertifizierungen wie MCSA, CCNA, CompTIA etc., für ...

Voice over IP

Telekom Umstellung von ISDN Anlagenanschluss auf IP-Telefonie

Erfahrungsbericht von NixVerstehen vor 3 TagenVoice over IP7 Kommentare

Hallo zusammen, nachdem nun vor ein paar Tagen die zwangsweise Umstellung von ISDN auf IP-Telefonie problemlos über die Bühne ...

Heiß diskutierte Inhalte
Windows Server
Drucker auf dem Terminalserver 2016 via Printserver wird nicht angezeigt
Frage von EchterHansenWindows Server14 Kommentare

Moin Moin, ich habe hier zwei 2016er Terminalserver und einen 2016er Printserver, auf dem ca. 10 RICOH-Drucker Typ 4. ...

Hardware
Ncomputing N600 oder auch 600W Privat nutzen Kostenlos oder kostengünstig
gelöst Frage von PlerTanixHardware14 Kommentare

Hallo liebe Forum User, Ich habe da eine Frage. Ich bin Azubi im dritten Lehrjahr und bei uns in ...

Windows 10
Upgrade Windows 10 1903 und Office 2010 Problem mit Userzertifikaten
gelöst Frage von Looser27Windows 1012 Kommentare

Guten Morgen, ich habe bei uns ein Phänomen in o.g. Kombination festgestellt, welches nach dem Inplace-Upgrade auf 1903 auftritt. ...

Datenschutz
Onedrive, Dropbox, Google Drive und Co. sperren?
Frage von holliknolliDatenschutz10 Kommentare

Hallo, wir haben folgendes Problem: die oben gennannten Cloud-Storages. Die wollen wir für Mitarbeiter sperren, damit kein Wildwuchs entsteht, ...