javascript in css?

[Stefan]

Hallo zusammen,

folgende Situation: ich habe ein <div> Element, dass auf dem Schirm erscheit, sobald ein user mit der Maus in eine Ecke des Browserfensters fährt. Schön und gut, ich hätte aber gerne, dass dieses Fensterchen immer schön in der Mitte auftaucht, müsste dazu also die window.innerWidth auslesen und diese in die Style-Angabe zu dem div-Tag (div heißt hier "Nav") reinschreiben, also etwa so:

<!--
#Nav { position:absolute; top:0px; left:[hier der aktuelle fensterwert]px; padding:0px; }
-->

Kann mir da jemand helfen, wie man sowas macht?

Herzlichen Dank im Voraus!

[ptr]

Hallo Stefan,
als ich deine Seite aufgerufen habe, erschien im unteren Frame folgende Meldung:
**********************************************************
Die Verbindung zu localhost konnte nicht aufgebaut werden.
**********************************************************

Zu deinem Problem:

Du könntest nach vorheriger Berechnung dein CSS mit passenden Wert per document.write() ins Dokument schreiben.
Ob das sinnvoll ist wage ich zu bezweifeln, denn wenn der Besucher zwischenzeitlich die Fenstergröße ändert bleibt immer der ursprüngliche Wert im Css stehen und dein DIV ist nicht mehr in der Mitte.

folgende Situation: ich habe ein <div> Element, dass auf dem Schirm erscheit, sobald ein user mit der Maus in eine Ecke des Browserfensters fährt.

Hier gehe ich mal davon aus, daß du das DIV per Javascript mit style.visibility='hidden'/'visible' erscheinen (und auch wieder verschwinden?) lässt.
An dieser Stelle hättest du die Möglichkeit, die Position deines DIVs entsprechend der aktuellen Fenstergröße zu berechnen und deinem DIV zuzuweisen. (style.left="berechneter X-Wert")

hätte aber gerne, dass dieses Fensterchen immer schön in der Mitte auftaucht, müsste dazu also die window.innerWidth

ACHTUNG:
"window.innerWidth" kennt nach meinem Wissensstand nur der Netscape, der IE kann damit nichts anfangen und bringt dir "undefined" zurück.
Der IE versteht aber: "document.body.clientWidth"

auslesen und diese in die Style-Angabe zu dem div-Tag (div heißt hier "Nav") reinschreiben, also etwa so:

<!--
#Nav { position:absolute; top:0px; left:[hier der aktuelle fensterwert]px; padding:0px; }
-->

Wenn du da einfach nur die Fensterbreite reinschreibst, wird dein DIV mit Sicherheit nicht in der Mitte sitzen, sondern am rechten Fensterrand erst anfangen.
Damit wird der body breiter und du kriegst n schönen Scrollbalken.

Ums in die Mitte zu kriegen mußt du von der Fensterbreite die Breite des DIVs abziehen und das dann durch 2 teilen.

Etwa so:

var fensterbreite=document.body.clientWidth;

var divbreite="hier die breite des divs";

var xposition=(fensterbreite-divbreite)/2;

var xpositionstring=String(xposition)+'px';

DEIN_DIV.style.left=xpositionstring;

Wenn die Breite des DIVs varibel oder unbekannt ist, kann man das ganze ja auch in ne Tabelle mit 100% Breite und align=center reinsetzen (style="visibility:hidden") und das dann mit TABELLE.style.visibility='visible' sichtbar machen.

gruß
ptr

[Stefan Link]

Wenn die Breite des DIVs varibel oder unbekannt ist, kann man das ganze ja auch in ne Tabelle mit 100% Breite und align=center reinsetzen (style="visibility:hidden") und das dann mit TABELLE.style.visibility='visible' sichtbar machen.

gruß
ptr

Hi ptr,

danke für die Antwort! Das mit dem mitteln und so ist mathematisch schon klar und du gehst völlig recht in der Annahme, dass ich das Fensterchen per visibility anzeige, genau. Das Ding ist auch feste 500 Pixel breit. Nur ist eben mein Problem wo ich hänge, dass jedes Browserfenster ja unterschiedlich groß ist. Das auszulesen auch ok, bekomme ich hin, aber wie schreibe ich dass dann in das css um dem zu sagen: ok, fenster 200px von links aus gesehen, beim nächsten nutzer 230px usw. Document.write habe ich auch schon versucht, aber irgendwie hat der mir einfach nicht die Zeile hingepinselt...

*ratlos*

Stefan

[ptr]

*ratlos*

Stefan

Hi Stefan,
zunächst mal ein kleiner Anschiß von mir !
Du läßt mich auch immer erstmal *ratlos* und ich darf mir das hier irgendwie nach dienen Problembeschreibungen aus den Fingern saugen und zusammenreimen, wie das bei dir im Quelltext denn so ungefähr aussehen könnte.
Du erwartest Hilfe, dann hilf doch auch den Leuten, die dir helfen sollen !!!!!!!
EIN AUSZUG AUS DEINEM QUELLTEXT ODER EINE ADRESSE WO MAN SICHS ANSCHAUEN KANN WÄRE ABSOLUT ANGEBRACHT GEWESEN !

Hier das was ich mir zusammengereimt hab:

******************************************************

<head>

<script type="text/javascript">

var fensterbreite=document.body.clientWidth;

var xposition=(fensterbreite-500)/2;

if(xposition<0){xposition=0};

var xpositionstring=String(xposition)+'px';

document.writeln('<style type="text/css">');

document.writeln('#Nav{position:absolute; top:0px; left:'+xpositionstring+';padding:0px;}');

document.writeln('</style>');

</script>

</head>

*******************************************************

Wie gesagt: wenn du das so verwendest, wird beim Laden der Seite die Fenstergröße abgefragt und der passende Wert ins CSS geschrieben.
Ändert der Besucher zwischenzeitlich die Fenstergröße, wird das DIV entsprechend der ursprünglichen Fenstergröße positioniert.
Besser wäre:

*******************************************************

<head>

<script type="text/javascript">

function divzeigen()
{
var fensterbreite=document.body.clientWidth;

var xposition=(fensterbreite-500)/2;

if(xposition<0){xposition=0};

var xpositionstring=String(xposition)+'px';

var DIV=document.getElementById('DEIN_DIV');

DIV.style.left=xpositionstring;

DIV.style.visibility='visible';

}

</script>

</head>

<body>

<div id="DEIN_DIV" style="position:absolute;top:30px;visibility:hidden;width:500px;">HIER DAS WAS ERSCHEINT</div>

<div style="position:absolute;top:0px;left:0px;width:30px;height:30px;" onmouseover="divzeigen()" onmouseout="document.getElementById('DEIN_DIV').style.visibility='hidden';">DIV ERSCHEINEN LASSEN</div>

</body>

*****************************************************************

Hier würde dann beim Mouseover jeweils die momentan aktuelle Fenstergröße ermittelt werden und das DIV entsprechend positioniert werden.
Aufpassen, daß DEIN_DIV nicht über dem ansteuernden DIV erscheint, sonst kriegt das gleich wieder das mouseout und DEIN_DIV verschwindet wieder. Dadurch kriegt dann das ansteuernde DIV wieder das mouseover und DEIN_DIV erscheint wieder, wodurch das ansteuernde DIV wieder das mouseout kriegt................................

gruß
ptr

[Struppi]

<!--
#Nav { position:absolute; top:0px; left:[hier der aktuelle fensterwert]px; padding:0px; }
-->

Kann mir da jemand helfen, wie man sowas macht?

Benutze Prozentangaben.

Struppi.