✔ JavaScript Funktion hochzählen

[mkoeni1]

Hallo Leute,

ich gebe eine Datenbankabfrage mit einer While-Schleife in PHP aus.

while($row=mysql_fetch_object($result)){
      echo "<img src=\"".$row->avatar."\" alt=\"Benutzerbilder\"><br><div class=\"untertest\">".$row->username."<br>".$cutmail."<br><b>".$cutpass."</b>...<br><a href=\"#\" onclick=\"editbox()\" style=\"float:left;\">edit</a><div id=\"layer\" style=\"visibility:hidden;\" onmouseout=\"editbox()\">link</div></div></div>" ;
}

Darin befindet sich eine JavaScript Funktion

editbox()

die an dem Link

<a href=\"#\" onclick=\"editbox()\" style=\"float:left;\">edit</a>

hängt und
die hier definiert ist:

<script type=text/javascript>
function editbox() {
 if(document.getElementById('layer').style.visibility=='hidden') {
  document.getElementById('layer').style.visibility='visible';
 }
    else{
        document.getElementById('layer').style.visibility='hidden';
}
}
</script>

und folgenden Layer ein und ausblendet:

div id=\"layer\" style=\"visibility:hidden;\" onmouseout=\"editbox()\">link</div>

Das Anklicken des Link ohne Reload der Seite funktioniert gut;-) Allerdings, und das ist mein Problem öffnet/schliesst sich die Box nach der Definition in CSS:

#layer{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
        margin:5px 0 0 25px; /* Außenabstand oben-rechts-unten-links */
}

immer an der gleichen Stelle (Ich vermute wegen der Schleife)!

Wie kann ich der Funktion sagen, sie soll sich an die Schleife anpassen und mitlaufen, d.h. die Werte mitnehmen um den Layer immer unmittelbar neben dem edit Link anzuzeigen?
Kann sein, dass ich auch auf dem Holzweg bin, denn ich konnte Google nicht um Rat fragen!!

Vielen Dank und Gruß
Matze

 

[lay-z-cow]

Hi,

ich verstehe nicht ganz worum es geht. Willst du darauf hinaus, dass es mehrere Edit-Links mit jeweils einer Box gibt?


Gruß

.:lay-z-cow:.

 

[mkoeni1]

Hi,

nicht ganz einfach zu erlären, ich weiß und verssuche es mal anderst.
Ich habe viele Benutzer in einer Datanbank stehen. Die gebe ich wie beschreiben über die while Schleife aus. So weit so gut. Jetzt hätte ich gerne an jeder Box die aus der while-Schleife kommt, einen edit Link angebracht der sich öffnet wenn man ihn klickt (ohne reload der Seite).

Das Problem das ich dabei habe, ist folgendes. Der Layer ist per CSS "einmal" definiert und öffnet sich somit immer an der gleichen Stelle auf der Seite.

Das sieht beim ersten Link gut aus, aber es sieht beim letzten Eintrag auf der Seite sehr bescheiden aus, wenn der Layer irgendwo im Nirvana angezeigt wird, während ich gescrollt auf der Seite im unteren Bereich bin ;-)

Für einen anderen Vorschlag bin ich gerne zu haben!

Vielen Dank und Gruß
Matze

 

[lay-z-cow]

Hi,

erweitere deine Funktionen doch einfach um einen Zähler.
So dass, die Layer die Id layer1, layer2, layer3, usw. haben.

$i = 1;

while($row=mysql_fetch_object($result)){
      echo "<img src=\"".$row->avatar."\" alt=\"Benutzerbilder\"><br><div class=\"untertest\">".$row->username."<br>".$cutmail."<br><b>".$cutpass."</b>...<br><a href=\"#\" onclick=\"editbox(" . $i . ")\" style=\"float:left;\">edit</a><div id=\"layer" . $i . "\" style=\"visibility:hidden;\" onmouseout=\"editbox(" . $i . ")\">link</div></div></div>" ;
$i++;
}

Den selben Zähler schreibst du per PHP als Parameter in deinen JS-Funktionsaufruf: editbox(1)
Und in der Funktion selbst musst du es dann nur noch richtig auswerten:

function editbox(nummer) {
document.getElementById('layer' +nummer).style.visibility='visible';

}

CSS kannst du ja dann z.b. über class zuweisen.


Gruß

.:lay-z-cow:.

 

[mkoeni1]

Hi,

das hatte ich mir auch schonmal überlegt ;-) Das Problem hierbei ist, dass ich unter Umständen 50 div Bereiche anlegen muss, oder?

#layer1{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
        margin:5px 0 0 25px; /* Außenabstand oben-rechts-unten-links */
}

#layer2{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
        margin:5px 0 0 25px; /* Außenabstand oben-rechts-unten-links */
}

Kann man in der CSS Datei auch mit Schleifen arbeiten? Ansonsten wird diese Datei ziemlich aufgebläht.



Gruß
Matze

 

[lay-z-cow]

Nein, CSS hat keine Programmlogik!

Gib einfach allen deinen Layern in HTML das Attribut class="meinLayer" und referenziere dann die Klasse in CSS, nicht jedes Element einzeln:
.meinLayer{
/*** CSS-Code ***/
}


Gruß

.:lay-z-cow:.

 

[mkoeni1]

Wenn ich e so mache wie du es gesagt hast, will er mir nichts mehr anzeigen.

<div class=\"layer\" style=\"visibility:hidden;\" onmouseout=\"editbox(" . $i . ")\"><a href=\"#\">bearbeiten</a></div></div>

und die Definition in der CSS Datei

div.layer{
    height: 20px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
    margin:5px 0 0 25px; /* Außenabstand oben-rechts-unten-links */
    padding: 2px;
}

Das geht so nicht :-( Hast du es mal probiert?


Gruß Matze

 

[lay-z-cow]

Hast du es online, dass ich es mit mal ansehen kann?

Ordnet er das CSS nicht richtig zu? Vllt liegt es daran, dass du vergessen hast ein Anführungszeichen zu escapen:

<div class=\"layer\" <-

Außerdem hat dein Link doch jetzt gar kein onClick-Event?!


Gruß

.:lay-z-cow:.

 

[mkoeni1]

Hallo, das fehlende Aunführungszeichen habe ich im Post auch falsch gesehen. Im Code ist es richtig ;-)

Habe zur Zeit keinen FTP-Zugang zur Hand hier. Sobald ich daheim bin stelle ich das Script mal online und gebe dir den link.

Bis dann
Matze

 

[mkoeni1]

Hi,

endlich habe ich es geschafft den Link hier einzustellen. Unter http://skv2.de/test/tutorials14.php findest du jetzt mal mein Anliegen. Wie gesagt, ich muss in der CSS-Datei (intern - oben auf der Seite) für jeden Layer sowas angeben:

#layer1{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
        margin:5px 0 0 25px; /* Außenabstand oben-rechts-unten-links */
}
#layer2{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
        margin:5px 0 0 25px; /* Außenabstand oben-rechts-unten-links */
}

Wie mache ich das mit einer Klasse .layer

Vielen Dank und Gruß
Matze