Things changed after moving html to php include

Question

The following HTML was originally generated in a javascript function but I decided it was better to put it in a php include:

<div id="formcontainer">
<h1>Login</h1>
<form method="post" action="index.php">
<p><input type="text" name="login" value="" placeholder="Email"></p>
<p><input type="password" name="password" value=""placeholder="Password"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>

The original javascript function still remains but now its only role is to position "formcontainer":

function setuploginzone() {
   var head = document.getElementById("superheader");
   var foot = document.getElementById("superfooter");
   var headheight = head.clientHeight;
   var footheight = foot.clientHeight;
   var contp = document.getElementById("containerparent");
   var contptop = headheight;

   contp.style.top = contptop;

   var h = contp.clientHeight; //get height of containerparent
   var vertcenter = h/2;
   var logform = document.getElementById("formcontainer");
   var logformheight = logform.clientHeight;
   var logformtop = vertcenter - (logformheight);

   logform.style.position = "relative";
   logform.style.top = logformtop;
}

Originally it was all in javascript called at the end of index.php and inserted the html into a div called "containerparent". It all worked absolutely fine when it was all in javascript but now I have created "formcontainer" in a php include the heading doesn't show and the div is not positioned as per the javascript function.

Any thoughts?

Answer 1

Potentially this could be due to time between the javascript being executed and the elements in the DOM (id:formcontainer) being loaded. If the JS function runs first then it will calculate one or all of your height equations to 0 and the function won't work as intended. Simple way to check if this is the case would be to console.log() some of your variables, or use setTimeout to like 10000 or something.

Edit, sorry, just to be clear if the console.log of your variables returns 0 that could indicate the above specified issue. Hope this helps. :)

Answer 2

I think your problem is all about CSS. To avoid any strange changes in your design, try to use Bootstrap css and javascript. it will give you the best of the design you desired. It has two different types of containers:

<div class="container">

</div>
<div class="container-fluid">

</div>

The using of each one depending on the position and the design you want. Its easy to learn and very useful.

I hope that could help you