sichtbar / unsichtbar

[Herbert1204]

Hallo
Ich habe eine Seite mit einem Skripts erstellt. Mit dem Script kann man zwei Teile einer Seite wechselweise anzeigen bzw. verstecken.

Beim Script für das wechselweise Anzeigen waren zuerst die Werte auf das Script abgestimmt und es funktionierte alles. Weil ich aber beiden Button den gleichen Wert geben will, habe ich es mit einem id-Wert probiert. Jetzt funktioniert gar nichts mehr.

Ich habe schon versucht es selbst umzuschreiben, aber ich stoße dabei einfach an meine Grenzen.

Hier das Script

<script>
function showIt(t) {
     v = t.value;
        if(v == 'vt') {
         document.getElementById('opt_vt').style.display = 'block';
         document.getElementById('opt_nt').style.display = 'none';
        }
        else {
         document.getElementById('opt_vt').style.display = 'none';
         document.getElementById('opt_nt').style.display = 'block';
        }

}
</script>

<table cellspacing="0" width="500" bordercolordark="white" bordercolorlight="black">
    <tr>
        <td align="left" valign="top">
<input type="submit" name="tage" value="Deutschland" onClick="showIt(this)">

</td>
    </tr>
    <tr>
        <td align="left" valign="top" height="30">
        <input type="submit" name="tage" value="Deutschland" onClick="showIt(this)">

</td>
    </tr>
    <tr>
        <td align="left" valign="top">

<p class="unteroption" id="opt\_vt" style="display:none;">  

<font face="Arial"><span style="font-size:11pt;">Bayern</span></font>

<p class="unteroption" id="opt_nt" style="display:none;">
        <font face="Arial"><span style="font-size:11pt;">Niedersachsen</span></font>

</td>
    </tr>
</table>

[Permafrost]

hast Du mal geprüft ob JQuery, oder andere Frameworks sowas bieten? Zumindest haben die Plugins für Sliding u.a.
wäre evtl. einfacher

[stewe]

Salut

1. Das <font> Tag ist Vergangeheit und sollte nicht mehr benutzt werden. Die Schriftart wird heutzutags auch über css zugewiesen.

2. Deine beiden <p> werden nirgends geschlossen (</p>). So kann das natürlich nicht funktionieren.

Gruss

[Gunnar Bittersmann]

@@stewe:

nuqneH

1. Das <font> Tag ist Vergangeheit und sollte nicht mehr benutzt werden. Die Schriftart wird heutzutags auch über css zugewiesen.

Auch alle darstellungsbezogenen Attribute (@cellspacing, @align, @valign, …) sind Vergangeheit und sollten nicht mehr benutzt werden. Alle Darstellungsangaben werden heutzutags über CSS zugewiesen.

Auch Tabellenlayout ist Vergangeheit und sollte nicht mehr benutzt werden. Ein <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=mehrspaltiges Layout> wird heutzutags auch über CSS realisiert.

2. Deine beiden <p> werden nirgends geschlossen (</p>).

Doch, das werden sie. Das End-Tag ist beim Elementtyp 'p' optional.

Qapla'

[stewe]

Auch alle darstellungsbezogenen Attribute (@cellspacing, @align, @valign, …) sind Vergangeheit und sollten nicht mehr benutzt werden. Alle Darstellungsangaben werden heutzutags über CSS zugewiesen.

Auch Tabellenlayout ist Vergangeheit und sollte nicht mehr benutzt werden. Ein <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=mehrspaltiges Layout> wird heutzutags auch über CSS realisiert.

wohl wahr.

Doch, das werden sie. Das End-Tag ist beim Elementtyp 'p' optional.

Tatsächlich? Dann wird aber der zugehörige Bereich der freien Interpretation des Browsers überlassen? Oder gibts klare Regeln die von allen Browsern gleich umgesetzt werden?

[Don P]

Hallo,

Doch, das werden sie. Das End-Tag ist beim Elementtyp 'p' optional.

Tatsächlich? Dann wird aber der zugehörige Bereich der freien Interpretation des Browsers überlassen? Oder gibts klare Regeln die von allen Browsern gleich umgesetzt werden?

Ja, die gibt es:
Das Tag wird geschlossen, sobald etwas auftaucht, was innerhalb nicht zulässig ist. Dazu gehört z.B auch das End-Tag eines übergeordneten Elements.

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Das Tag wird geschlossen

Das Element.

Tags werden durch '>' bzw. '/>' geschlossen. (In SGML auch durch '/', aber das weiß kein Browser.)

Qapla'

[Don P]

Hallo,

@@Don P:

nuqneH

Das Tag wird geschlossen

Das Element.

Ja, das ist mir anschließend auch aufgefallen. Leider kann man hier nicht editieren, und ein neues Posting wollte ich deswegen nicht extra schreiben. Jetzt haben wir dafür zwei. :)

Qapla'

Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Ja, das ist mir anschließend auch aufgefallen. Leider kann man hier nicht editieren, und ein neues Posting wollte ich deswegen nicht extra schreiben. Jetzt haben wir dafür zwei. :)

Drei. ;-)

Qapla'

[Jens Holzkämper]

Tach,

(In SGML auch durch '/', aber das weiß kein Browser.)

Lynx tut es:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">  
  <title>bla</>  
  <p/foo/  

wird von Lynx korrekt dargestellt.

mfg
Woodfighter

[stewe]

vorher nur gerade überflogen und beim zweiten mal ist mir aufgefallen, dass das Ganze sowieso keinen Sinn macht:

Du hast zwei Buttons, welcher soll welche Aktion auslösen? Du übergibst der Funktion mit "this" ein Referenz auf das aufrufende Element (den Button) und nicht auf den <p> den du öffnen/schliessen willst. Wenn du "this" beim Button, der opt_vt anzeigen soll durch den String "vt" ersetzt und beim anderen sonstwas hinschreibst und dann direkt if(t=='vt') benützt in der funktion, dann wirds funktionieren.

greaz

[Herbert1204]

Hallo stewe

Du hast recht. Es ist merkwürdig wenn zwei gleiche Button auf einer Seite zu sehen sind.

Aber der Grund ist, daß zwei Tabellen auf der Seite sind. Dabei ist eine Tabelle mit einen Button und einem Dropdown; und eine andere Tabelle mit einen Button und einem iFrame vorhanden. Zuerst ist die Tabelle mit dem iFrame sichtbar. Mit dem Klick auf den Button wechseln die Tabellen und die Tabelle mit dem Dropdown ist sichtbar. Damit der User nur den Wechsel der Dropdown und dem iFrame wahrnimmt, sollen beide Button gleich aussehen.

Jetzt habe ich noch ein weiteres Problem.
Mit dem Dropdown soll eine neue Seite aufgerufen werden, die in dem iFrame angezeigt wird. Dafür hatte ich eine Frameseite benutzt, die ich im Internet gefunden hatte. Auf der Frameseite funktionierte alles wunderbar. Nachdem ich das Ganze in meine Seite eingebaut hatte, wurde die aufgerufene Seite nicht im iFrame sondern in einem neuen Fenster angezeigt.

Um eine Hilfe hier zu bekommen habe ich eine Anzeige unter den Namen zwei Skripte geschrieben. Weil diese erfolglos blieb, hatte ich mich entschlossen nochmal zwei getrennte Anzeigen zu schreiben.

Hier ist noch einmal der Quelltext in der Grundfassung. Übrigens hatte ich Deine Antwort nicht ganz verstanden. Kannst Du den Quelltext für mich umschreiben.

Im Voraus schon einmal Vielen Dank

<script language="JavaScript">
<!--
function pulldown(form) {
        var mypull=form.select.selectedIndex
        window.open(form.select.options[mypull].value, target="Auswahl-Fensterlein");
}
-->
</SCRIPT>

<script>
function showIt(t) {
     v = t.value;
        if(v == 'vt') {
         document.getElementById('opt_vt').style.display = 'block';
         document.getElementById('opt_nt').style.display = 'none';
        }
        else {
         document.getElementById('opt_vt').style.display = 'none';
         document.getElementById('opt_nt').style.display = 'block';
        }
    }
</script>

<table cellspacing="0" width="100%" bordercolordark="white" bordercolorlight="black">
    <tr>
        <td align="left" valign="top">

<p class="unteroption" id="opt\_vt" style="display:none;">  

<table cellspacing="0" width="100%" height="1" bordercolordark="white" bordercolorlight="black">
    <tr>
        <td width="110">
     <input type="submit" onClick="showIt(this)" name="Deutschland" value="nt" style="font-family:Arial; font-weight:bold; font-size:11pt; color:blue; text-align:left; text-decoration:underline; background-color:rgb(255,255,204); border-width:1px; border-color:rgb(255,255,204); border-style:solid; width:100; cursor:pointer;">
        </td>
        <td>
     <select size="1" style="font-family:Arial; font-weight:bold; font-size:11pt;">
     <option>bitte ausw&auml;hlen</option>
     <option value="H.htm">H - Region Hannover</option>
     <option value="NOM.htm">NOM - Landkreis Northeim</option>
     </select>
        </td>
    </tr>
</table>

<p class="unteroption" id="opt_nt">
<table cellspacing="0" width="100%" height="1" bordercolordark="white" bordercolorlight="black">
    <tr>
        <td width="110">
     <input type="submit" onClick="showIt(this)" name="Deutschland" value="vt" style="font-family:Arial; font-weight:bold; font-size:11pt; color:blue; text-align:left; text-decoration:underline; background-color:rgb(255,255,204); border-width:1px; border-color:rgb(255,255,204); border-style:solid; width:100; cursor:pointer;">
        </td>
        <td>
<iframe name="Auswahl-Fensterlein" width="100%" height="25" src="../Ortsauswahl/weltweit.htm" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
</iframe>
        </td>
    </tr>
</table>

</td>
    </tr>
</table>

[stewe]

1. du musst dem browser schon sagen, was für ein script da kommt, darum
<script type="text/javascript">

2. man sollte kein javascript verwenden wenn man noch nicht einmal den hauch einer ahnung davon hat, wies funktioniert. und wie man dann auf die idee kommen kann, einfach mal irgendwo ein par dinge in einem script zu ändern, das man hinten und vorne nicht versteht - das kann ich nicht nachvollziehn. lese dich also bitte zb durch den javascript-abschnitt von selfhtml

3. kleiner anstoss: ob da zwei buttons sind, die genau gleich aussehen oder nicht, ist mir ziemlich egal. wenn ich dich wäre, würde ich aber nur einen button erstellen und das script so coden, dass es beim klick auf den immer gleichen button jeweils switcht. deine funktion ist abhängig von t.value, was - wie du wüsstest wenn du dich etwas damit auseinandergesetzt hättest - der value wert des jeweiligen buttons ist. dieser ist bei beiden "Deutschland", also weit und breit kein "vt" mehr wie in der originalversion. darum passiert auch nichts wenn du auf den button klickst.

4. mehr mag ich nicht schreiben da offensichtlich viel zu wenig initiative von deiner seite her vorhanden ist.

gruss

[Gunnar Bittersmann]

@@Herbert1204:

nuqneH

Einen Validator hat dein Quelltext nie gesehen, nicht wahr?

Oft hilft es, vor dem Stellen einer Frage einfach mal hier im Forum rumzustöbern. Ich hatte erst gestern gezeigt, wie es auch ohne JavaScript geht.

Qapla'