[ New messages · Members · Forum rules · Search · RSS ]
Page 1 of 11
Coredownloadz Forum » Web developments and Ecommerce » Programming Softwares » Vertical alignments
Vertical alignments
guitarmantraDate: Thursday, 2009-06-04, 7:38 AM | Message # 1
Colonel
Group: Administrators
Messages: 220
Awards: 3
Reputation: 2
Status: Offline
In CSS, vertically centering an element within its parent isn't always an easy thing, and this is why Javascript can help here.

Simply paste the following code in a separate .js file or in the head section of your html document:

Code

function AlignMiddle(Parent,Child) {
//Generate content dynamically
    document.getElementById(Child).innerHTML="Hello there, I am dynamically align in the middle using a Javascript."

//Center Vertically
    h = document.getElementById(Child).offsetHeight;
    //var a=Math.round(document.getElementById(Parent).style.pixelHeight/2);

    var a=Math.round(parseInt(document.getElementById(Parent).style.height)/2);
    var b=Math.round(h/2);
    var c=a-b;
    document.getElementById(Child).style.top=c+"px";
//Center Horizontally

    w = document.getElementById(Child).offsetWidth;
    //var x=Math.round(document.getElementById(Parent).style.pixelWidth/2);

    var x=Math.round(parseInt(document.getElementById(Parent).style.width)/2);
    var y=Math.round(w/2);
    var z=x-y;
    document.getElementById(Child).style.left=z+"px";
}


www.coredownloadz.ucoz.com
 
FileServe BitShare emoticon(
Coredownloadz Forum » Web developments and Ecommerce » Programming Softwares » Vertical alignments
Page 1 of 11
Search: