使用javascript垂直居中div

Question

I am trying to position a div vertically in the middle of a window in Wordpress. I have a function.js file with the following code:

function setToCenter()
{   
    var a = document.getElementById("R_center");
    var h = window.innerHeight;

    var p = (h/2)-(650/2);      
    if( p < 80 ){ p = 80; }//limit to header height


    //a.style.transform = "transform(0,"+p+"px)";
    //a.style.margin-top= p+"px"; 
    a.style.paddingTop = p+"px";   
}

and a php file to get the post content:

<?php
/*
Template Name: Page R Center
*/
?>
<?php global $optimizer;?>
<?php get_header(); ?>

                <div id="R_center" class="R">

                        <script type="text/javascript"> setToCenter(); </script>

                        <?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
                        <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">  

                                        <div class="thn_post_wrap">
                                            <?php the_content(); ?>
                                        </div>

                        </div>

                        <?php endwhile ?>

                </div><!--R_center class END-->

                        <?php endif ?>

<?php get_footer(); ?>

and in my header.php:

<script type="text/javascript" src="http://localhost/wp/wp-content/themes/r-child/assets/js/functions.js"></script>

evrything is working well. The Div is positioned in the vertical middle of my screen. BUT because the Div is rendered after the java script it works only after refreshing the page. My question is where do I have to place my javascript to avoid refreshing? Can I execute everything from my functions.js without calling function in my php? thx

Answer 1

In your case you need to launch setToCenter function after DOM is loaded by browser. You should wrap it into DOMContentLoaded event , example:

document.addEventListener("DOMContentLoaded", function(event) {
    setToCenter();
});

or if you use jQuery:

$(function(){
    setToCenter();
});

Answer 2

The easiest way is to place your function call near the footer even you can place it after the footer as well. this will solve you problem. You have asked "can you place the code in function.js?" yes you can do this as well. just place function call inside window.load function and put this code in function.js file. Below are the example for both cases .

$(window).load(function() { setToCenter(); });

OR

<?php
/*
Template Name: Page R Center 
*/
?>
<?php global $optimizer;?>
<?php get_header(); ?>

            <div id="R_center" class="R">

                    <?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
                    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">  

                                    <div class="thn_post_wrap">
                                        <?php the_content(); ?>
                                    </div>

                    </div>

                    <?php endwhile ?>

            </div><!--R_center class END-->

                    <?php endif ?>
<?php get_footer(); ?>
<script type="text/javascript"> setToCenter(); </script>