nicht angemeldet
css layer mit javascript ausrichten ?
0 0 Doppel/Drängelposting
0
css layer mit javascript ausrichten ?
hallo,
gibt es eine möglichkeit css layer/container mir javascript zu zentrieren?
-
Sicher, du kannst die Style-Eigenschaften eines Objekts per DOM ansprechen.
z.B.:
<div id="mybox">...</div>
<script type="text/javascript">
document.getElementById("mybox").style.text-align = "center";
</script>Ich hoffe ich hab jetzt nichts durcheinandergebracht...
Das Beispiel zentriert IMHO _nicht_ den obigen <div>, sondern den Inhalt, also mach da deinen zentrierten Layer rein.-
sytax fehler in zeile 7, sacht er mir dann !!!
<html>
<head>
<script type="text/javascript">
document.getElementById("mybox").style.text-align = "center";
</script>
</head><body>
<div id="mybox" style="position:absolute; width:700px; height:50px; z-index:1; top:20px; background-color: #0099CC"></div>
</body>
</html>-
sytax fehler in zeile 7, sacht er mir dann !!!
ach verflixt, dann hab ich wohl doch etwas durcheinandergebracht... Also _theoretisch_ funktioniert es so. Lustigerweise funktioniert es z.B. mit der Style-angabe "margin", aber mit "margin-right" habe ich gerade auch einen Syntax-Error bekommen.
Evtl. ein seltsamer Browser-Bug oder ich hab in der Doku was übersehen.Wozu willst du denn eigentlich den Layer ausgerechnet mit Javascript zentrieren?
-
Hallo.
ach verflixt, dann hab ich wohl doch etwas durcheinandergebracht... Also _theoretisch_ funktioniert es so. Lustigerweise funktioniert es z.B. mit der Style-angabe "margin", aber mit "margin-right" habe ich gerade auch einen Syntax-Error bekommen.
Mag es am Bindestrich liegen? Sollte nicht vielmehr stattdessen der Buchstabe nach diesem groß geschrieben werden?
Wozu willst du denn eigentlich den Layer ausgerechnet mit Javascript zentrieren?
Weil ihr die Lösungsvorschläge auf [pref:t=66132&m=376881] aus unerfindlichen Gründen offenbar nicht genehm sind.
MfG, at-
*ding* Der - wars, jetzt wird mir einiges klar.... lustigerweise ist das auch exakt das Problem, an dem ich gerade sitze, jetzt kann ich endlich auch meinem ungehörigen Div den korrekten margin-right für den IE per JS einprügeln ;)
-
Hallo.
*ding* Der - wars, jetzt wird mir einiges klar.... lustigerweise ist das auch exakt das Problem, an dem ich gerade sitze, jetzt kann ich endlich auch meinem ungehörigen Div den korrekten margin-right für den IE per JS einprügeln ;)
Ulkigerweise ist das auch in etwa das einzige, was ich von JS verstehe ;-)
MfG, at-
Hehe :) Ich war etwas verwirrt, weil ich mich die letzte Zeit viel zu viel mit DOM beschäftigt habe und da heißt es ja auch node.src ändert das src="" usw., das mit den - ist mir garnicht aufgefallen, da es ja keine solchen Angaben mit - gibt ;)
Eigentlich ärgere ich mich jetzt selbst schon wahnsinnig darüber: Natürlich kann ein - weder in einem Variablennamen noch in einem Methodennamen vorkommen, da das - laut Syntax ja immer ein Operator ist. Und sowas studiert heutzutage Informatik und lernt genau das in Sprachtheorie, Asche auf mein Haupt! *g*
Ulkigerweise ist das auch in etwa das einzige, was ich von JS verstehe ;-)
MfG, at-
Hallo.
Eigentlich ärgere ich mich jetzt selbst schon wahnsinnig darüber: Natürlich kann ein - weder in einem Variablennamen noch in einem Methodennamen vorkommen, da das - laut Syntax ja immer ein Operator ist. Und sowas studiert heutzutage Informatik und lernt genau das in Sprachtheorie, Asche auf mein Haupt! *g*
Derjenige, der wirklich noch nie eine eine CSS-Eigenschaft, eine JS-Variable, ein HTML-Attribut oder eine invalide HTML- oder CSS-Ergänzung miteinander verwechselt hat, curle den ersten Stein ;-)
MfG, at
-
-
-
-
-
Wozu willst du denn eigentlich den Layer ausgerechnet mit Javascript zentrieren?
wenn es eine andere möglichkeit gibt nur zu...
ich hab sämtliche ausprobiert, nichts funktioniert so wie ich will...hier nochmal der code ohne "-":
<html>
<head>
<script type="text/javascript">
document.getElementById("mybox").style.textAlign = "center";
</script>
</head><body>
<div id="mybox" style="position:absolute; width:700px; height:50px; z-index:1; top:20px; background-color: #0099CC"></div>
</body>
</html>funktioniert aber immer nocht nicht (IE6)... script fehler:
document.getElementById sei kein objekt...-
Hi,
so einfach geht das nicht!
Selbst wenn Dein Beispiel mit dem document. Zeugs funktionieren würde, .textAlign ist nichts anderes als der Javascript-Zugriff auf das CSS-Element text-align. Das bedeutet, der Code ist völlig überflüssig, da man text-align einfach statisch auf center setzen kann, ohne irgend ein Script benutzen zu müssen, d.h. #mxbox { text-align: center } ... Das bringt aber nicht den gewünschten Effekt.
Was Du willst, ist nur sehr, sehr, sehr viel komplexer zu realisieren, etwa so:
... blabla ...
<body onload="init()">
<div id="boxes">
<div id="box1">Hallo Welt!</div>
<div id="box2">Test</div>
</div>... blabla ...
function init()
{
centerLayer(getObj("boxes"), 750, 450);
showLayer(getObj("boxes"));
}dom = (document.getElementById) ? true : false;
ie4 = (document.all) ? true : false;
ns4 = (document.layers) ? true : false;
op = (window.opera) ? true : false;function getObj(name)
{
if(ie4) return eval('document.all.'+name);
if(ns4) return findLayer(name, document);
if(dom) return document.getElementById(name);
return null;
}function findLayer(name, doc) // NS4
{
for (var i=0; i<doc.layers.length; i++)
{
var layer = doc.layers[i];
if (layer.name == name) return layer;
if (layer.document.layers.length > 0)
{
var layer = findLayer(name, layer.document);
if (layer != null) return layer;
}
}
return null;
}function hideLayer(obj)
{
if(ns4) obj.visibility = "hide";
if(ie4 || dom) obj.style.visibility = "hidden";
}function showLayer(obj)
{
if(ns4) obj.visibility = "show";
if(ie4 || dom) obj.style.visibility = "visible";
}function centerLayer(obj, width, height) // V2.0 by DR
{
if (ie4 || dom) // No NS4 support because nested layer bug
{
winWidth = getWinWidth();
winHeight = getWinHeight();
leftMid = winWidth / 2 - width / 2;
topMid = winHeight / 2 - height / 2;
if(leftMid < 0) leftMid = 0;
if(topMid < 0) topMid = 0;
posLayer(obj, leftMid, topMid);
}
}function posLayer(obj, left, top) // V2.0 by DR
{
if (ie4 || dom) {
style = obj.style;
style.left = left+"px"; style.top = top+"px";
}
else if (ns4) {
style = obj;
style.left = left; style.top = top;
}
}function getWinWidth() // based on a script by projectseven.com (PVII)
{
if (window.innerWidth) { w = window.innerWidth; } // ns4
else if (document.body)
{
w = document.body.clientWidth;
if (document.body.offsetWidth == w && document.documentElement && document.documentElement.clientWidth)
{
w = document.documentElement.clientWidth;
}
}
return w;
}function getWinHeight() // based on a script by projectseven.com (PVII)
{
if (window.innerWidth) { h = window.innerHeight; } // ns4
else if(document.body)
{
h = document.body.clientHeight;
if (document.body.offsetHeight == h && document.documentElement && document.documentElement.clientHeight)
{
h = document.documentElement.clientHeight;
}
}
return h;
}function getWinWidth_Resized() // Example from SelfHTML
{
if (window.innerWidth) return window.innerWidth;
else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
else return 0;
}function getWinHeight_Resized() // Example from SelfHTML
{
if (window.innerHeight) return window.innerHeight;
else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
else return 0;
}function P7_OpResizeFix(a) { // v1.1 by PVII, edited by DR/IG
var agent = navigator.userAgent.toLowerCase();
var op = (window.opera) ? true : false;
var op7 = (agent.indexOf("opera 7") != -1 || agent.indexOf("opera/7") != -1);
if (!op || op7) {
return;
}
if (!document.p7oprX) {
document.p7oprY = window.innerWidth;
document.p7oprX = window.innerHeight;
document.onmousemove = P7_OpResizeFix;
}
else {
if (document.p7oprX) {
var k = document.p7oprX - window.innerHeight;
var j = document.p7oprY - window.innerWidth;
if (k>1 || j>1 || k<-1 || j<-1) {
document.p7oprY = window.innerWidth;
document.p7oprX = window.innerHeight;
location.reload();
}
}
}
}
P7_OpResizeFix();function IG_reloadPage() { // Requires dhtml.js (IG Lib 3.0 beta)
var pW = getWinWidth_Resized();
var pH = getWinHeight_Resized();
if (reload_init) {
document.IG_pageWidth = pW;
document.IG_pageHeight = pH;
window.onresize = IG_reloadPage;
reload_init = false;
}
else {
if (pW != document.IG_pageWidth || pH != document.IG_pageHeight) {
// location.reload();
window.history.go(0);
}
}
}
reload_init = true;
IG_reloadPage();-
Anmerkung: Das Beispiel ist nur so kompliziert, weil man damit Layer auch vertikal zentrieren kann, was normalerweise allein mit CSS nicht möglich ist... Will man nur horizontal zentrieren, ist es sehr viel einfacher und mit CSS lösbar.
-
-
-
-
-
-
Hallo steffi,
Bleib bitte in deinem Thread, da hast du erst 4 Minuten, bevor du diesen eröffnet hast, gepostet.
Sowas wird hier nicht gerne gesehen. </faq/#Q-06c>
Die Lösung für dein Problem ist übrigens, daß du in JS nicht die Schreibweise von CSS übernehmen kannst und darfst.
text-align == textAlign
http://selfhtml.teamone.de/javascript/sprache/regeln.htm#namen
Bindestriche sind nichterlaubt, deshalb wird der erste Buchstabe des zweiten Wortes groß geschrieben.
Wenn du noch weitere Fragen hast, dann bitte in deinem alten Thread.[pref:t=66132&m=376881]Gruß
Kurt
--
"Die meisten Menschen verdunsten einem, wie ein Wassertropfen in der flachen Hand." (Christian Morgenstern; dt. Dichter; 1871-1914)
http://elektro-dunzinger.at
http://shop.elektro-dunzinger.at -
Hi,
ja, die gibt's. Stand selbst vor dem Problem und habe es mit Javascript gelöst: http://www.ninja-borkowski.de.vu
Speichere die Seite mit Deinem Browser ab und schaue Offline mal in die Scripte. Ist allerdings ziemlich aufwendig, es sind etwa hundert Zeilen Code, wenn ich mich richtig erinnere...MfG
Danny