onclick wieder schließen?

[Crowy]

hallo,

mein js mag nicht so wirklich wie gedacht funktionieren. vllt stoß ich hier ein bisschen auf hilfe. habe ein JS das mir beim klicken eines wortes, einen div öffnet (der positioniert ist). Das große problem dabei ist, ich wlil das sich der div auch wieder schließe (bzw "hidden") wenn ich nochmal das wort anklicke, aber das mag er nicht =).

_---------------------------------------_

js:
<script type="text/javascript" language="JavaScript">
<!--
var offsetx=20
var offsety=0

function InfoBoxAusblenden() {
      document.getElementById('infobox').style.visibility = "hidden";
}

function InfoBoxAnzeigen(e,txt,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
        document.getElementById("text").innerHTML=txt;
        document.getElementById('infobox').style.left = (PositionX+offsetx);
        document.getElementById('infobox').style.top = (PositionY+offsety);
        document.getElementById('infobox').style.visibility = "visible";
}
// -->

</script>

_---------------------------------------_

<div id="infobox" style="position:absolute; margin-top: 45px; width: 525px; visibility:hidden;">

<table bgcolor="#FFFFFF" cellpadding="4">
           <tr>
            <td><span id="text"></span></td>
          </tr>
         </table>

</div>

<a class="infobox"
        OnClick="InfoBoxAnzeigen(event,'ICH BIN DIE BESCHREIBUNG',20,-30);"
        OnClick="InfoBoxAusblenden();"
        href="javascript:void(0)">ICH BIN DAS WORT
        </a>,
_---------------------------------------_

Wo liegt der Fehler? :/

Grüße...
Crowy

[dave]

ein xml element darf nicht 2 mal das gleiche attribut haben
2 mal onclick geht also nicht, ist falsch und tut weh beim anschaun

ich an deiner stelle würde eine funktion machen die überprüft obs im moment angezeigt wird, falls ja soll er InfoBoxAusblenden() andernfalls InfoBoxAnzeigen(...)
diese funktion beim onclick aufrufen und fertig

[Robert]

Hi,

Wo liegt der Fehler? :/
<a class="infobox"
       OnClick="InfoBoxAnzeigen(event,'ICH BIN DIE BESCHREIBUNG',20,-30);"
       OnClick="InfoBoxAusblenden();"
       href="javascript:void(0)">ICH BIN DAS WORT
</a>

Du hast OnClick zweimal stehen.

Du musst nach der Ausführung "werde Sichtbar" den Onclick event überschreiben.

dh. nach

document.getElementById('infobox').style.visibility = "visible";

musst du
document.getElementById('infobox').onclick = function () {
   document.getElementById('infobox').style.visibility = "hidden";
}

schreiben.

mfg Robert

[Crowy]

@Robert

danke für den hinweiß. leider funktioniert es so, wie du mir geschrieben hast nicht. es schließt sich dennoch nicht.

wo könnte noch der fehler liegen?

grüße und dank
Crowy

[Robert]

Hi,

Ich vermute das liegt an deinem href="javascript:void(0)

mfg Robert

[Robert]

Hi,

Ich vermute das liegt an deinem href="javascript:void(0)

Daran liegts doch nicht!

Ich habe den Fehler zwar nicht finden können, aber so funktioniert es.

<script type="text/javascript" language="JavaScript">

var offsetx=20
var offsety=0

function InfoBoxAnzeigen(e,txt,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
  text = document.getElementById("text").innerHTML;
  text ? document.getElementById("text").innerHTML=null : document.getElementById("text").innerHTML=txt;
        document.getElementById('infobox').style.left = (PositionX+offsetx);
        document.getElementById('infobox').style.top = (PositionY+offsety);
}

</script>

<div id="infobox" style="position:absolute; margin-top: 45px; width: 525px;">

<table bgcolor="#FFFFFF" cellpadding="4">
           <tr>
            <td><span id="text"></span></td>
          </tr>
         </table>

</div>

<a class="infobox" onclick="InfoBoxAnzeigen(event,'ICH BIN DIE BESCHREIBUNG',20,-30);" href="javascript:void(0);">ICH BIN DAS WORT</a>

[Crowy]

wow nice...funtz perfekt...jetzt gibs nurnoch ein "kleines" problem, wenn ich eine liste habe und mehrere begriffe untereinander, und ich klicke auf den ersten, dann muss die infobox unterm ersten sich öffnen und den zweiten begriff "runterschieben"...

hm !

[Robert]

Hi,

zeig mir mal wie du die liste aufgebaut hast.

[Crowy]

Script:
_-------------------------------------------_

<script type="text/javascript" language="JavaScript">

var offsetx=20
var offsety=0

function InfoBoxAnzeigen(e,txt,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
  text = document.getElementById("text").innerHTML;
  text ? document.getElementById("text").innerHTML=null : document.getElementById("text").innerHTML=txt;
        document.getElementById('infobox').style.left = (PositionX+offsetx);
        document.getElementById('infobox').style.top = (PositionY+offsety);
}

</script>

_-------------------------------------------_

Aufbau:
_-------------------------------------------_

Gedacht ist etwas dreispaltiges, ich mag eine liste von bands machen die wie folgt aussieht:

| Band    |    Genre   |     Homepage |
  A            xyz          www.123.de
  B            zxy          www.321.de
.
.
.

beim klicken auf die band, z.B. auf "A" soll sich dann bei der Band "A" ein fenster darunterliegend öffnen und Band namens "B" nach unten verschieben, sprich das fenster öffnet sich zwischen "A" und "B" und zeigt eine kurze Info über die Band.

[Robert]

Hi,

Dazu must du das ganze etwas anders Aufbauen.

Du hast es so Aufgebaut das man, wenn drauf klickt
das ein Div darüber gelegt wird. (position:absolute;)

Du musst das ganze also entweder relativ (position:relativ oder position:static) oder alles Absolut gestalten,
was ich dies bezüglich nicht empfehlen würde, weil das eine Menge Berrechnungen zur folge hat.

[Crowy]

achso, und wie bau ich das dann auf, wenn du mir das position static oder relativ empfiehlst? will auchk eine div-suppe kochen..hm...schein ein schweres thema zu sein.

Verwunderlich ist nur, dass man im internet nichts darüber findet, bzw ich bislang keine Seiten gefunden die das auch gemacht haben. dabei ist das doch platzsparend und übersichtlich.

[Robert]

Hi,

probiers mal so:

<script type="text/javascript" language="JavaScript">

function InfoBoxAnzeigen(e,txt,zahl)
{
  tmp = document.getElementById("text"+zahl);
  text = tmp.innerHTML;
  text ? tmp.innerHTML=null : tmp.innerHTML=txt;
}

</script>

<a class="infobox" onclick="InfoBoxAnzeigen(event,'ICH BIN DIE BESCHREIBUNG',0);" href="javascript:void(0);">ICH BIN DAS WORT</a><br />
<div id="infobox0" style="position:relativ; margin-top: 0px; width: 525px;">
<table bgcolor="#FFFFFF" cellpadding="0">
<tr><td><span id="text0"></span></td></tr>
</table>
</div>
<a class="infobox" onclick="InfoBoxAnzeigen(event,'ICH BIN DIE BESCHREIBUNG',1);" href="javascript:void(0);">ICH BIN DAS WORT</a><br />
<div id="infobox1" style="position:static; margin-top: 0px; width: 525px;">
<table bgcolor="#FFFFFF" cellpadding="0">
<tr><td><span id="text1"></span></td></tr>
</table>
</div>
<a class="infobox" onclick="InfoBoxAnzeigen(event,'ICH BIN DIE BESCHREIBUNG',2);" href="javascript:void(0);">ICH BIN DAS WORT</a><br />
<div id="infobox2" style="position:static; margin-top: 0px; width: 525px;">
<table bgcolor="#FFFFFF" cellpadding="0">
<tr><td><span id="text2"></span></td></tr>
</table>
</div>

mfg Robert

[Struppi]

function InfoBoxAnzeigen(e,txt,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}

wenn du schon weiter unten eine einfache Entweder oder Abfrage benutzt warum nicht hier? bzw. warum überhaupt die neue Variabel?

if (!offsetX) offsetX=20;  
if (!offsetY) offsetY=0;

var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;

hier ist das var überflüssig, da ein Parameter sowieso nur lokal gültig ist.

text = document.getElementById("text").innerHTML;
  text ? document.getElementById("text").innerHTML=null : document.getElementById("text").innerHTML=txt;

Den einfachen entweder Operator als if zu mißbrauchen ist zwar erlaubt, aber hier unschön und wenn du ihn richtig einsetzen würdest wäre es etwas übersichtlicher:

document.getElementById("text").innerHTML = document.getElementById("text").innerHTML ? null : txt  
;  

document.getElementById('infobox').style.left = (PositionX+offsetx);
        document.getElementById('infobox').style.top = (PositionY+offsety);

Das funktioniert nur im Quirksmode, im Standardmode der immer zu empfehlen ist, fehlen die Einheiten.

document.getElementById('infobox').style.left = (PositionX+offsetX) +'px';  
document.getElementById('infobox').style.top = (PositionY+offsetY) +'px';

<div id="infobox" style="position:absolute; margin-top: 45px; width: 525px;">

Ein absolut positioniertes Element mit margin zu positionieren ist ungeschickt.

<table bgcolor="#FFFFFF" cellpadding="4">
           <tr>
            <td><span id="text"></span></td>
          </tr>
         </table>

Wozu ist hier die Tabelle nötig?

Das ausblenden sollte auch ohne Probleme funktionieren, wobei ich statt visibility eher display verwenden würde.

Struppi.