Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

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

HTML teile verstecken

Frage Entwicklung HTML

Mitglied: leb0rtran

leb0rtran (Level 1) - Jetzt verbinden

21.08.2007, aktualisiert 26.08.2007, 4685 Aufrufe, 16 Kommentare

hallo,

der Titel si jetzt nich de rbeste aber mir fällt nix besseres ein ...

Mich würde interessieren ob es geht, dass man für jede option die ich per
01.
		<b>Artikeltyp:</b><br> 
02.
		<input type="radio" name="type" value="book" checked="checked"> Buch <br> 
03.
		<input type="radio" name="type" value="film"> Film <br> 
04.
		<input type="radio" name="type" value="sonstiges"> Sonstiges <br>
auswählen kann die restliche Seite leicht geändert angezeigt wird

für books zB:
01.
<tr> 
02.
	<td>Name/Titel:</td> 
03.
	<td><input type="text" name="titel" value="" size="40"></td> 
04.
	<td>Autor:</td> 
05.
	<td><input type="text" name="autor" value="" size="40"></td> 
06.
</tr>
für filme dann:
01.
<tr> 
02.
	<td>Name/Titel:</td> 
03.
	<td><input type="text" name="titel" value="" size="40"></td> 
04.
	<td>Regisseur:</td> 
05.
	<td><input type="text" name="autor" value="" size="40"></td> 
06.
</tr>
und ein paar einträge sollen kommlett "versteckt" werden zB
01.
<tr> 
02.
	<td>IMDB Link:</td> 
03.
	<td><input type="text" name="imdb" value="" size="40"></td> 
04.
	<td>Länge (in min):</td> 
05.
	<td><input type="text" name="laenge" value="" size="40"></td> 
06.
</tr>
Hoffe mir kann jemand weiterhelfen
Schonmal thx

leb0rtran
Mitglied: filippg
21.08.2007 um 01:27 Uhr
Hallo,

soweit ich das erstmal erkenne sind das zwei verschiedene Sachen:

1. "und ein paar einträge sollen kommlett "versteckt" werden zB" daraus schließe ich, dass sie nie angezeigt werden, auch nicht in Abhängigkeit von den obigen Radio-Buttons? Dann solltest du einfach <input type="hidden"...> verwenden.

2. die anderen Abschnitte sollen wohl nur angezeigt werden, wenn oben die entsprechende Option (type) gewählt ist? Das lässt sich mit JavaScript ganz gut machen. Und eigentlich sollten das alle Ajax-Bibliotheken können. Die Abschnitte werden in <div>s verpackt und können dynamisch (also während der Anzeige im Browser, in Abhängigkeit von Ereignissen wie dem Auswählen eines anderen Radio-Buttons, angezeigt und ausgeblendet werden. Suche naja "Ajax" oder "HTML layer ausblenden javascript" o.ä.

Filipp
Bitte warten ..
Mitglied: leb0rtran
21.08.2007 um 02:11 Uhr
zu 1.
ne nicht komplett sondern nur wenn file gedrückt is wirds garnicht angezeigt sondern nur bei books

zu 2.
kk ich probiers ma xD
Bitte warten ..
Mitglied: leb0rtran
21.08.2007 um 02:23 Uhr
ich find leider nix gescheites wie ich das funktioniert
hab von javascript auch leider 0plan

kannste mir des ma genauer erklähren wie das gehn soll
Bitte warten ..
Mitglied: aliasmp3
21.08.2007 um 10:58 Uhr
hi leb0rtran

hab hier was kleines für dich was dein problem lösen sollte. ich hoffe das forum lässt den code zu. er is mit firefox und ubuntu getestet und funktioniert dort. einfach die checkbox anklicken

<script type="text/javascript">
function hide(){
if(document.getElementById("test").checked==true){
document.getElementById("text").type="hidden";
}
}
</script>

<form action="" method="post">
<input type="checkbox" name="test" id="test" onclick="hide();" />
<input type="text" name="text" id="text" />
</form>
Bitte warten ..
Mitglied: leb0rtran
21.08.2007 um 15:02 Uhr
mh, funktioniert ma nich

was is da falsch?

01.
<body> 
02.
 
03.
<script type="text/javascript"> 
04.
function hide(){ 
05.
if(document.getElementById("book1").checked==true){ 
06.
document.getElementById("film").type="hidden"; 
07.
document.getElementById("sonstiges").type="hidden"; 
08.
09.
10.
 
11.
function hide(){ 
12.
if(document.getElementById("film1").checked==true){ 
13.
document.getElementById("book").type="hidden"; 
14.
document.getElementById("sonstiges").type="hidden"; 
15.
16.
17.
 
18.
function hide(){ 
19.
if(document.getElementById("sonstiges1").checked==true){ 
20.
document.getElementById("book").type="hidden"; 
21.
document.getElementById("film").type="hidden"; 
22.
23.
24.
</script> 
25.
 
26.
 
27.
 
28.
<form action="ebay-script.php" method="post"> 
29.
 
30.
<p> 
31.
 
32.
<table border="0" cellspacing="20" cellpadding="0"> 
33.
 
34.
<tr> 
35.
	<td> 
36.
		<b>Artikeltyp:</b><br> 
37.
		<input type="radio" name="type" value="book" checked="checked" id="book1" onclick="hide();"> Buch <br> 
38.
		<input type="radio" name="type" value="film" id="film1" onclick="hide();"> Film <br> 
39.
		<input type="radio" name="type" value="sonstiges" id="sonstiges1" onclick="hide();"> Sonstiges <br> 
40.
	</td> 
41.
</tr> 
42.
 
43.
</table> 
44.
 
45.
 
46.
<div id="book"> 
47.
<table border="0" cellspacing="20" cellpadding="0"> 
48.
 
49.
blub BOOK 
50.
 
51.
</table> 
52.
</div> 
53.
 
54.
 
55.
<div id="film"> 
56.
<table border="0" cellspacing="20" cellpadding="0"> 
57.
 
58.
blub FILM 
59.
 
60.
</table> 
61.
</div> 
62.
 
63.
 
64.
<div id="sonstiges"> 
65.
<table border="0" cellspacing="20" cellpadding="0"> 
66.
 
67.
blub SONSTIGES 
68.
 
69.
</table> 
70.
</div> 
71.
</p> 
72.
</form> 
73.
</body>
Bitte warten ..
Mitglied: aliasmp3
21.08.2007 um 20:00 Uhr
im folgenden dein script wie du es wahrscheinlich wolltest.

erklärung:ne funktion kann es nur einmal geben (ausser in spezialfällen) und diese fälle sind hier nicht gegeben, daher hide1,2,3.

ausserdem ist es ein unterschied ob du in ein input feld schreibst oder in ein html element wie z.b. div,span,...

in inputfelder oder formularelemente schreibst du mit value
in html elemente mit innerHTML

<body>

<script type="text/javascript">
function hide1(){
if(document.getElementById("book1").checked==true){
document.getElementById("film").innerHTML="";
document.getElementById("sonstiges").innerHTML="";
}
}

function hide2(){
if(document.getElementById("film1").checked==true){
document.getElementById("book").innerHTML="";
document.getElementById("sonstiges").innerHTML="";
}
}

function hide3(){
if(document.getElementById("sonstiges1").checked==true){
document.getElementById("book").innerHTML="";
document.getElementById("film").innerHTML="";
}
}
</script>



<form action="ebay-script.php" method="post">

<p>

<table border="0" cellspacing="20" cellpadding="0">

<tr>
<td>
Artikeltyp:<br>
<input type="radio" name="type" value="book" checked="checked" id="book1" onclick="hide1();"> Buch <br>
<input type="radio" name="type" value="film" id="film1" onclick="hide2();"> Film <br>
<input type="radio" name="type" value="sonstiges" id="sonstiges1" onclick="hide3();"> Sonstiges <br>
</td>
</tr>

</table>


<div id="book">
<table border="0" cellspacing="20" cellpadding="0">

blub BOOK

</table>
</div>


<div id="film">
<table border="0" cellspacing="20" cellpadding="0">

blub FILM

</table>
</div>


<div id="sonstiges">
<table border="0" cellspacing="20" cellpadding="0">

blub SONSTIGES

</table>
</div>
</p>
</form>
</body>
Bitte warten ..
Mitglied: leb0rtran
21.08.2007 um 23:25 Uhr
ok ...
2 probleme gibts da noch

1. standartmäßig is ja books markiert, es zeigt aber alle 3 div-boxen an, nicht nur books

2. wenn ich erst auf filme geh und dann zurück auf books zeigts nüx mehr an
da wärs nice wenns wieder books anzeigt
Bitte warten ..
Mitglied: aliasmp3
22.08.2007 um 07:47 Uhr
zu1

es gibt das onload event heißt wenn du eine funktion beim laden ausführen möchtest kannst du das in den body packen

<body onload="hide1();">
.....
</body>
damit führt er hide1 beim laden der seite aus


zu 2

dafür musst du nur die funktionen anpassen. das document.getElementById("").innerHTML=""; muss angepasst werden. im moment löschst du nur inhalte bzw du schreibst einen leerstring rein mit "". um einfach was reinzuschreiben musst du nur zwischen die "" einen text schreiben.
Bitte warten ..
Mitglied: leb0rtran
22.08.2007 um 13:53 Uhr
1. funktioniert jetzt

2. aber ich möcht ja nich was reinschreiben sondern er soll wieder die entsprechende div box anzeigen, also bei funktion1 die div box book etc
wie geht das?
Bitte warten ..
Mitglied: aliasmp3
22.08.2007 um 14:20 Uhr
wenn du die funktion hide1 aufrufst geht diese einfach her und löscht den inhalt einer der div boxen. damit das was vorher drin stand wieder drin steht musst du einfach anstatt der "" einen text "..." schreiben. dann steht dieser text in der entsprechenden div box.

bsp:

function hide1(){
if(document.getElementById("book1").checked==true){
document.getElementById("film").innerHTML="";
document.getElementById("sonstiges").innerHTML="";
//die nächste zeile ist die antwort
document.getElementById("book").innerHTML="blub BOOK";
}
}
Bitte warten ..
Mitglied: leb0rtran
23.08.2007 um 22:59 Uhr
ja, aber kann ich da nich irgentwie nen verweiß auf den inhalt der div box machen?
sonst müsst ich ja den kompletten inhalt der box nochma in die funktion reinschreiben (is n bisschen mehr als nur "blub BOOK" xD)
Bitte warten ..
Mitglied: aliasmp3
24.08.2007 um 09:05 Uhr
var film='test';

function hide1(){
if(document.getElementById("book1").checked==true){
document.getElementById("film").innerHTML=film;
document.getElementById("sonstiges").innerHTML="";
}
}

du kannst es wie die var film erzeugen und dann innerhalb der funktionen verwenden. du musst nur aufpassen das du keine zeilenumbrüch drin hast, heißt zeilenumbrüch im quelltext. sowas wie ein <br /> darf natürlich drin stehen. wenn du nun noch inputfelder oder sonstige stellen mit ' verwenden willst musst du sie im quelltext duch \' kennzeichnen. der \ sagt jvascript das jetzt ein zeichen kommt das nicht interperitiert werden soll. du kannst auch im oberen bsp bei var film="test" anführungszeichen verwenden. dann gilt natürlich wie bei den ' das du weitere " mit \" schreiben musst.
Bitte warten ..
Mitglied: aliasmp3
24.08.2007 um 09:12 Uhr
ach ja mir fällt da grad noch ne simpler lösung ein. mach einfah ne div box mit dem style="width:1px; height:1px;" und schreibst in diese div den gewünschten text. in der funktion gehst du dann einfach her und holst den text auch der "unsichtbaren" box und schreibt ihn in ne andere box rein. ich bin mir nur grad nich sicher in wieweit divs ne größe von 0x0 erlauben daher die 1x1. du kannst sie ja noch unten rechts positionieren so das man sie nicht erkennt wen man nicht im quellcode rumstochert.

document.getElementById("film").innerHTML=document.getElementById("unsicht_div_film").innerHTML;
Bitte warten ..
Mitglied: leb0rtran
25.08.2007 um 21:14 Uhr
hab das jetzt am mit der letzten idee von dir gemacht


in der css:
01.
#sonstiges 
02.
#book 
03.
04.
	width: 0px; 
05.
	height: 0px; 
06.
07.
 
08.
 
09.
#film 
10.
11.
	width: 0px; 
12.
	height: 0px; 
13.
14.
 
15.
 
16.
#sonstiges 
17.
18.
	width: 0px; 
19.
	height: 01px; 
20.
}

und html:
01.
<html> 
02.
<title> 
03.
<link rel="stylesheet" type="text/css" href="style.css"> 
04.
</title> 
05.
 
06.
<body onload="hide1();"> 
07.
 
08.
<script type="text/javascript"> 
09.
function hide1(){ 
10.
if(document.getElementById("book1").checked==true){ 
11.
document.getElementById("output").innerHTML=document.getElementById("book").innerHTML; 
12.
13.
14.
 
15.
function hide2(){ 
16.
if(document.getElementById("film1").checked==true){ 
17.
document.getElementById("output").innerHTML=document.getElementById("film").innerHTML; 
18.
19.
20.
 
21.
function hide3(){ 
22.
if(document.getElementById("sonstiges1").checked==true){ 
23.
document.getElementById("output").innerHTML=document.getElementById("sonstiges").innerHTML; 
24.
25.
26.
</script> 
27.
 
28.
 
29.
 
30.
<form action="ebay-script.php" method="post"> 
31.
 
32.
<p> 
33.
 
34.
<table border="0" cellspacing="20" cellpadding="0"> 
35.
 
36.
<tr> 
37.
<td> 
38.
Artikeltyp:<br> 
39.
<input type="radio" name="type" value="book" checked="checked" id="book1" onclick="hide1();"> Buch <br> 
40.
<input type="radio" name="type" value="film" id="film1" onclick="hide2();"> Film <br> 
41.
<input type="radio" name="type" value="sonstiges" id="sonstiges1" onclick="hide3();"> Sonstiges <br> 
42.
</td> 
43.
</tr> 
44.
 
45.
</table> 
46.
 
47.
 
48.
<div id="book"> 
49.
<table border="0" cellspacing="20" cellpadding="0"> 
50.
 
51.
blub BOOK 
52.
 
53.
</table> 
54.
</div> 
55.
 
56.
 
57.
<div id="film"> 
58.
<table border="0" cellspacing="20" cellpadding="0"> 
59.
 
60.
blub FILM 
61.
 
62.
</table> 
63.
</div> 
64.
 
65.
 
66.
<div id="sonstiges"> 
67.
<table border="0" cellspacing="20" cellpadding="0"> 
68.
 
69.
blub SONSTIGES 
70.
 
71.
</table> 
72.
</div> 
73.
 
74.
 
75.
<div id="output"> 
76.
</div> 
77.
 
78.
 
79.
</p> 
80.
</form> 
81.
</body> 
82.
</html>

aber die 3 div boxen werden nich wie gewünscht "versteckt" dürch das 0px (bei 1px wars das selbe)


output is das


Artikeltyp:
Buch
Film
Sonstiges

blub BOOK
blub FILM
blub SONSTIGES
blub SONSTIGES


--> die Funktion etc is richtig, nur die 3 div boxen book, film, und sonstiges nich

wie kann ich die durch die css unsichtbar machen
Bitte warten ..
Mitglied: aliasmp3
26.08.2007 um 12:00 Uhr
ok ich hab die style css nochmal angepasst und es bei mir getestet.

#book
{

width: 1px;
height: 1px;
overflow:hidden;
}


#film
{
width: 1px;
height: 1px;
overflow:hidden;
}


#sonstiges
{
width: 1px;
height: 1px;
overflow:hidden;
}


zu der anderen datei:

du solltest dich ein wenig über html schlau machen

http://de.selfhtml.org/navigation/html.htm

das is ne ganz gute referenz für html, css und javascript

im folgenden der richtige aufbau. mit dem es bei mir auch funktioniert.

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="hide1();">
.......
</body>
</html>
Bitte warten ..
Mitglied: leb0rtran
26.08.2007 um 19:55 Uhr
kk
thx für deine hilfe

damit funktionierts ..
Bitte warten ..
Neuester Wissensbeitrag
Microsoft

Lizenzwiederverkauf und seine Tücken

(5)

Erfahrungsbericht von DerWoWusste zum Thema Microsoft ...

Ähnliche Inhalte
Webentwicklung
gelöst HTML Output in eine txt Datei mit VisualBasicScript (2)

Frage von coca22COCA zum Thema Webentwicklung ...

PHP
gelöst HTML Dropdownmenü auslesen und in PHP als Variable übergeben (35)

Frage von ITFlori zum Thema PHP ...

Outlook & Mail
gelöst Outlook soll grundsätzlich nur HTML-Mails versenden (1)

Frage von Laufenfeuer zum Thema Outlook & Mail ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (18)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Windows Netzwerk
Windows 10 RDP geht nicht (16)

Frage von Fiasko zum Thema Windows Netzwerk ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...