Habe mich nun dazu entschlossen, mit JQuery anzufangen und versuche nun meine Funktionen in die JQuery Syntax zu bringen. Die Funktion die ich umschreiben möchte ist folgende:
Beschreibung: Jedes Element mit der Klasse "center_w" wird in Relation zu der Fenstergröße horizontal und vertikal zentriert. Jedes Element mit der Klasse "center_p" wird in Relation zum Parent-Objekt horizontal und vertikal zentriert.
Diese Funktion wird später mit den Eventhandlern onload und onresize verknüpft.
Code:
Mein Ansatz in JQuery ist nun folgender:
Die Funktion soll erstmal nur die vertikale Zentrierung in Relation zu der Fenstergröße jedes Elements mit der Klasse "center_w" bewirken.
Code:
Der relevante HTML- und CSS-Code für beide Scripts ist
Das Ganze funktioniert natürlich nicht, wäre ja auch zu schön gewesen. Die Ausgabe der Fehlerkonsole des FF ist folgede:
Wo liegt der Fehler? Vergibt mir, falls der Code wirklich SO sch**** ist, is meine erste Funktion.
Außerdem habe ich eine Frage: Da sich das Element ja immer in der Mitte befinden soll, brauche ich ja wie oben beschrieben 2 Eventhandler. Kann ich die miteinander verknüpfen? Also jetzt ein Beispiel als Pseudocode:
window.onload.onresize(function() {doSomething;});
Danke schonmal im Voraus für eure Hilfe
Beschreibung: Jedes Element mit der Klasse "center_w" wird in Relation zu der Fenstergröße horizontal und vertikal zentriert. Jedes Element mit der Klasse "center_p" wird in Relation zum Parent-Objekt horizontal und vertikal zentriert.
Diese Funktion wird später mit den Eventhandlern onload und onresize verknüpft.
Code:
PHP:
function makeAllCenter() {
var center_elements = document.getElementsByTagName("*");
for (var i = 0; center_elements.length > i; i++) {
if (center_elements[i].className == "center_w") {
var center_window_v = (parseInt(center_elements[i].style.height))/2;
var center_window_h = (parseInt(center_elements[i].style.width))/2;
center_elements[i].style.top = window.innerHeight/2 - center_window_v;
center_elements[i].style.left = window.innerWidth/2 - center_window_h;
} else {
if (center_elements[i].className == "center_p") {
var center_parent_v = (parseInt(center_elements[i].style.height))/2;
var center_parent_h = (parseInt(center_elements[i].style.width))/2;
center_elements[i].style.top = (parseInt(center_elements[i].offsetParent.style.height))/2 - center_parent_v;
center_elements[i].style.left = (parseInt(center_elements[i].offsetParent.style.width))/2 - center_parent_h;
}
}
}
}
Die Funktion soll erstmal nur die vertikale Zentrierung in Relation zu der Fenstergröße jedes Elements mit der Klasse "center_w" bewirken.
Code:
PHP:
$(".center_w").css('top',($(window).height()/2)-($(".center_w").css(height)/2));
HTML:
<style rel="text/css">
#toCenter {
background-color: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 350px;
}
</style>
<div id="toCenter" class="center_w"></div>
Code:
Fehler: elem.document.body is null
Quelldatei: file:///G:/testing/jqry.js
Zeile: 6216
Außerdem habe ich eine Frage: Da sich das Element ja immer in der Mitte befinden soll, brauche ich ja wie oben beschrieben 2 Eventhandler. Kann ich die miteinander verknüpfen? Also jetzt ein Beispiel als Pseudocode:
window.onload.onresize(function() {doSomething;});
Danke schonmal im Voraus für eure Hilfe