Getting an iframe to align on a web page

Question

I have two buttons set up as onclicks that use JS to connect to other pages that are internal to my website. These pages connected to only run php that is displayed in tables. This tanle data is then displayed in the iframe set up in the JS. My problem is I can't get the iframe to align using css or through styles in my html. I can move it around using css but I can't get it to line up either directly under the buttons, or in the center of the page.

<div class="center">

<button onclick="myFunction1()">Illustrators</button>

<button onclick="myFunction2()">Tech Writers</button>

</div>

<script>
var iframeExists = false;

 function myFunction1() {
 var x
 if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
 } else {
  x = document.getElementsByTagName("IFRAME")[0];
 }
 x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
 document.body.appendChild(x);
 }

function myFunction2() {
var x;
if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
} else {
  x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}
</script>

CSS

iframe {
border: 0px solid #ffffff;
 margin: auto;
 width: 300px;
 Height: 200px;}

score 0 · Answer 1 · answered Oct 30 '15 at 18:19

0

Try this make few changes like HTML

<button onclick="myFunction1()">Illustrators</button>

<button onclick="myFunction2()">Tech Writers</button>

<div id="myiframe-div">
</div> 
</div>

and instead of

document.body.appendChild(x);

use

document.getElementById("myiframe-div").appendChild(x);

answered Oct 30 '15 at 18:19

Azmat Karim Khan

437
5
18

you should use div and apply css to div as you can better manage style with divs – Azmat Karim Khan Oct 30 '15 at 18:20
http://stackoverflow.com/questions/4990819/table-based-layout-vs-div-based-layout check this out too why should you use div. – Azmat Karim Khan Oct 30 '15 at 18:22

score 0 · Answer 2 · answered Oct 30 '15 at 18:34

0

If you want the iframe and buttons to align in the center, then have this HTML and CSS (along with your already good JavaScript):

<div class="center">
 <p>
  <button onclick="myFunction1()">Illustrators</button>
  <button onclick="myFunction2()">Tech Writers</button>
 </p>
</div>

iframe {display: block; /*new*/
        margin: auto;
        border: none; /*revised*/
        width: 300px;
        height: 200px;}
div.center p {text-align: center;} /*new*/

answered Oct 30 '15 at 18:34

CDM

141
10

I did it with Chrome, which I don't know if your using it or not. Since I don't know what else in your HTML, JS, and CSS files, I'll assume that some other JS or CSS is contradicting what I posted. – CDM Oct 30 '15 at 19:13
But you might want to add a width to the main div and and align that to the center to see if it works. – CDM Oct 30 '15 at 19:14
I went into css and took out the code I had for the iframe and replaced it with what you provided and added the div class center you suggested. I ran it that was first and didn't get any results. I thought it might have been a conflict between the div.center p and the div class="center" so I changed div class=center.p" but that didn't work either. – Tony Oct 30 '15 at 19:31
Then I really don't know what is preventing everything from working. I went to jsFiddle to see if maybe it was just my browser, but jsFiddle gave me the same thing: a centered iframe and buttons (http://jsfiddle.net/50ued8gq/). Maybe instead of using a div, you should use a table. Each button in their own with the iframe in a . – CDM Oct 30 '15 at 20:03
I went back in to my css and html and pulled anything that had center in it and retried your suggested code. It worked like a charm. I have to make a few small changes to my css because my h1 and h2 tags are shifting slightly to the left but it should be an easy fix. Thanks again. – Tony Oct 31 '15 at 00:03
No problem. I was going to say that if you still couldn't fix the alignment then just use the good old even though it's outdated. Glad to help. – CDM Oct 31 '15 at 14:12

Getting an iframe to align on a web page

2 Answers2