DOM: Erzeugung von div's zur Scrolling-Steuerung
enrico
- javascript
0 Edgar Ehritt0 enrico
Hallo,
seit geraumen Stunden versuche ich immer noch, einen Frame über dnymisch
erzeugte und angepasste DIV-"Schaltflächen" scrollen zu lassen.
Das Scrolling selber ist, als statischer Code notiert, kein Problem, das
klappt ohne Probleme, nur die Erzeugung und Anpassung der DIVs über DOM
will und will einfach nicht klappen.
Hier der Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/Scrolling.css">
</head>
<body>
<div id="Scrolling_Oben"></div>
<div id="Scrolling_Unten"></div>
<script type="text/javascript">
<!--
var Scrolling_Oben = window.document.getElementById ("Scrolling_Oben");
var Seitenanfang = window.document.createElement ("div");
Seitenanfang.setAttribute ("class", "Seitenanfang_inaktiv");
Scrolling_Oben.appendChild (Seitenanfang);
//-->
</script>
</body>
</html>
Hier der Auszug der css-Datei:
#Scrolling_Oben,
#Scrolling_Unten
{
width: 20px;
height: 74px;
position: absolute;
right: 7px;
}
#Scrolling_Oben
{
top: 75px;
}
#Scrolling_Unten
{
bottom: 29px;
}
.Seitenanfang_inaktiv,
.Hochscrollen_schnell_inaktiv,
.Hochscrollen_inaktiv,
.Runterscrollen_inaktiv,
.Runterscrollen_schnell_inaktiv,
.Seitenende_inaktiv,
.Seitenanfang_aktiv,
.Hochscrollen_schnell_aktiv,
.Hochscrollen_aktiv,
.Runterscrollen_aktiv,
.Runterscrollen_schnell_aktiv,
.Seitenende_aktiv,
{
width: 20px;
height: 20px;
}
.Seitenanfang_inaktiv
{
background: url(../../GRAFIKEN/SCHALTFLAECHEN/Seitenanfang_inaktiv.png) no-repeat;
}
...usw...
Ich möchte in die beiden Container "Scrolling_Oben" und "Scrolling_Unten"
die verschiedenen div-Bereiche, die, über entsprechende Gestaltung der
Hintergründe, die Scrollbuttons darstellen sollen.
Kann gescrollt werden, so sollen in die div-Bereiche die MouseEvents
"onmouseover" und "onmouseout" eingebunden werden, aber ich schaffe es
bislang leider noch nicht einmal, die divs überhaupt einzubinden.
Später sollen die MouseEvents auch noch entfernt werden können, so dass
hier keine Aktionen mehr ausgeführt werden.
In der Firefox-Fehler-Konsole bekomme ich keine Warnungen/Fehler,
angezeigt wird aber trotzdem nichts.
Was habe ich falsch gemacht, dass nichts angezeigt wird (außer der
Hintergrundgrafik des bodies)?
Vielen Dank.
Gruß
enrico
Hallo Enrico,
<script type="text/javascript">
<!--
var Scrolling_Oben = window.document.getElementById ("Scrolling_Oben");
var Seitenanfang = window.document.createElement ("div");
Seitenanfang.setAttribute ("class", "Seitenanfang_inaktiv");
Seitenanfang.appendCild (document.createTextNode("."));
Scrolling_Oben.appendChild (Seitenanfang);
//-->
</script>
Was habe ich falsch gemacht, dass nichts angezeigt wird (außer der
Hintergrundgrafik des bodies)?
ein mittels DOM erstelltes HTML-Element wird so lange nicht angezeigt, wie es keinen Inhalt hat. Leider gilt Whitespace nicht als Inhalt, daher ist es sinnvoll wie oben einen Punkt einzufügen und die Schriftfarbe (color) für den Inhalt auf die den Wert des Hintergrunds zu setzten.
Speziell in Deinem Fall wird Dir dies aber nichts nutzen, weil Du Hintergrundbilder verwenden möchtest. Ersatzweise könntest Du also eine transparente GIF in das erzeugte Element als Inhalt einfügen, oder eben gleich den Hintergrund in den Vordergrund holen - als Inhalt setzen.
Gruß aus Berlin!
eddi
Hallo eddi,
perfekt, das war's :-)
Besten Dank für Deine Hilfestellung.
Gruß
enrico