nicht angemeldet
So. Danke für die Bemühungen. Ich habe eine Lösung gefunden. Der Witz liegt darin, dass ich noch ein "onsubmit" einfügen muss, um den Layer zu wechseln: <form action="rueckmeldung.php" method="post" target="testframe" onsubmit="javascript:wechsel('finh3')">
Den gesamten Code zeige ich hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alles in einem</title>
<style>
.menu
{
position : absolute;
width : 200px;
height : 520px;
top : 10px;
left : 20px;
background-color : white;
color : green;
padding-left : 3px;
padding-top : 3px;
}
.top
{
position : absolute;
width : 900px;
height : 100px;
top : 10px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-top : 3px;
}
.inh1
{
position : absolute;
width : 670px;
height : 400px;
top : 120px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
border : 1px solid green;
overflow: auto;
}
.inh2, .inh3
{
position : absolute;
width : 670px;
height : 400px;
top : 1100px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
border : 1px solid green;
overflow: auto;
}
p,a
{
font-family : verdana;
text-decoration : none;
font-size : 11px;
font-weight : bold;
}
a
{color: #21a35b;}
a:focus
{color: lime;}
a:hover
{color:green;}
h3
{color: #21a35b;}
</style>
</head>
<body>
<div class=menu id=fmenu>
<img src="Bilder/logo.jpg"><br>
<p>
<li><a href="javascript:wechsel('finh1')"><font size="+1">Seite 1</font></a><br></li>
<li><a href="javascript:wechsel('finh2')"><font size="+1">Seite 2</font></a><br></li>
<li><a href="javascript:wechsel('finh10')"><font size="+1">Seite 3</font></a><br></li>
</p>
</div>
<div class=top id=ftop><table border="0" width="900"><tr><td><font size="+3" color="#21a35b">Titel</font></td></tr></table></div>
<div class=inh1 id=finh1>
<?php
echo "Willkommen";
?>
</div>
<div class=inh2 id=finh2><h3>Seite 2</h3>
<form action="rueckmeldung.php" method="post" target="testframe" onsubmit="javascript:wechsel('finh3')">
<input type="text" size="20" name="eingabe">
<input type="submit" value="submit">
</form>
</div>
<div class=inh3 id=finh3><h3>Seite 3</h3>
<iframe name="testframe" width="100%" height="200"></iframe>
</div>
</body>
</html>
<script>
var aktuellerframe = "finh1";
var wechselimgange = false;
var step = 10;
var rein = "";
var raus = "";
var linksnachrechts = 230;
var untennachoben = 1100;
var schweben;
function wechsel(frame) {
raus = aktuellerframe; rein = frame;
if (!wechselimgange && raus!=rein)
{
document.getElementById(rein).style.top = "1000px";
document.getElementById(rein).style.left = "230px";
wechselimgange = true;
linksnachrechts = 230; untennachoben = 1000;
schweben = setInterval('move()',10);
}
}
function move() {
linksnachrechts = linksnachrechts + step;
untennachoben = untennachoben - step;
if (untennachoben<120){untennachoben=120;}
if (linksnachrechts>1300){linksnachrechts=1300;}
wert1 = untennachoben + "px";
wert2 = linksnachrechts + "px";
document.getElementById(rein).style.top = wert1;
document.getElementById(raus).style.left = wert2;
if (linksnachrechts==1300 && untennachoben==120){
clearInterval(schweben);
wechselimgange = false;
aktuellerframe = rein;}
}
</script>
Hallo zusammen
Ich will eine Homepage mit nur einer einzigen Datei basteln. Die einzelnen Seiten sind dabei in DIV's untergebracht und schweben beim Wechsel jeweils von unten in den sichtbaren Bereich, respektive nach rechts wieder weg.
Nun geht es darum, dass ich die Auswertung von Formulareingaben ebenso darstellen will.
Wie schaffe ich's, dass die Werte vom Formular an ein neues DIV übergeben wird?Den Quellcode habe ich hier:
Im DIV "inh2" steht das Formular. Der Wert soll im DIV "inh3" landen.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alles in einem</title><style>
.menu
{
position : absolute;
width : 200px;
height : 520px;
top : 10px;
left : 20px;
background-color : white;
color : green;
padding-left : 3px;
padding-top : 3px;
}.top
{
position : absolute;
width : 900px;
height : 100px;
top : 10px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-top : 3px;
}.inh1
{
position : absolute;
width : 670px;
height : 400px;
top : 120px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
border : 1px solid green;
overflow: auto;
}.inh2, .inh3
{
position : absolute;
width : 670px;
height : 400px;
top : 1100px;
left : 230px;
background-color : white;
padding-left : 3px;
padding-right : 3px;
padding-top : 3px;
border : 1px solid green;
overflow: auto;
}p,a
{
font-family : verdana;
text-decoration : none;
font-size : 11px;
font-weight : bold;
}a
{color: #21a35b;}
a:focus
{color: lime;}
a:hover
{color:green;}h3
{color: #21a35b;}</style>
</head>
<body>
<div class=menu id=fmenu>
<img src="Bilder/logo.jpg"><br>
<p>
<li><a href="javascript:wechsel('finh1')"><font size="+1">Seite 1</font></a><br></li>
<li><a href="javascript:wechsel('finh2')"><font size="+1">Seite 2</font></a><br></li>
<li><a href="javascript:wechsel('finh10')"><font size="+1">Seite 3</font></a><br></li>
</p></div>
<div class=top id=ftop><table border="0" width="900"><tr><td><font size="+3" color="#21a35b">Titel</font></td></tr></table></div>
<div class=inh1 id=finh1>
<?php
echo "Willkommen";
?>
</div><div class=inh2 id=finh2><h3>Seite 2</h3>
<form action="javascript:wechsel('finh3')" method="post" target="finh3">
<input type="text" size="20" name="eingabe">
<input type="submit" value="submit">
</form>
</div><div class=inh3 id=finh3><h3>Seite 3</h3>
<?php
echo "Deine Eingabe war: $eingabe";
?>
</div></body>
</html><script>
var aktuellerframe = "finh1";
var wechselimgange = false;
var step = 10;
var rein = "";
var raus = "";
var linksnachrechts = 230;
var untennachoben = 1100;
var schweben;function wechsel(frame) {
raus = aktuellerframe; rein = frame;
if (!wechselimgange && raus!=rein)
{
document.getElementById(rein).style.top = "1000px";
document.getElementById(rein).style.left = "230px";
wechselimgange = true;
linksnachrechts = 230; untennachoben = 1000;
schweben = setInterval('move()',10);
}
}function move() {
linksnachrechts = linksnachrechts + step;
untennachoben = untennachoben - step;
if (untennachoben<120){untennachoben=120;}
if (linksnachrechts>1300){linksnachrechts=1300;}
wert1 = untennachoben + "px";
wert2 = linksnachrechts + "px";
document.getElementById(rein).style.top = wert1;
document.getElementById(raus).style.left = wert2;
if (linksnachrechts==1300 && untennachoben==120){
clearInterval(schweben);
wechselimgange = false;
aktuellerframe = rein;}
}</script>
Vielen Dank für Eure Hilfe
Gruss
Emanuel