How to center the webpage which used by iframe

Question

I have a simple strange question about iframe, but I'll be happy if I can find a solution from you :)

I have an iframe which view some content like picture 1

What I want is to see iframe like (picture 2) when I open containing webpage, I want to view the content from the center of horizontal.

Thank you

My source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width: 1680px; background: #ccc;">
    <div style="float: left; width: 740px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A1</span>
    </div>
    <div style="float: left; width: 740px; height: 60px;"></div>
    <br clear="All" />
    <div style="float: left; width: 320px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A2</span>
    </div>
    <div style="float: left; width: 640px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A3</span>
    </div>
    <div style="float: left; width: 320px; height: 60px;"></div>
    <br clear="All" />
    <div style="float: left; width: 110px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A4</span>
    </div>
    <div style="float: left; width: 220px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
<div style="float: left; width: 220px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;">
        <span>A5</span>
    </div>
    <div style="float: left; width: 220px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 110px; height: 60px;"></div>
    <br clear="All" />
    <div style="float: left; width: 5px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 10px; height: 60px;"></div>
    <div style="float: left; font-size: 12px; width: 200px; height: 50px; text-align: right; background: #fff;"></div>
    <div style="float: left; width: 5px; height: 60px;"></div>
    <br clear="All" />
</div>
</body>
</html>

This the code of the mother of iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="//melchoyce.github.io/dashicons/css/dashicons.css" rel="stylesheet">
</head>
<body>
<div>
    <div style="float: right; width: 180px; background: #E5E5E5;">
    <ul id="side-menu">
        <li><a href="index.php?mode=index"><div class="dashicons dashicons-admin-home"></div> home</a></li>
        <li><a href="index.php?mode=personal_info"><div class="dashicons dashicons-id-alt"></div> info</a></li>
        <li><a href="index.php?mode=view_network"><div class="dashicons dashicons-networking"></div>newtork</a></li>
        <li><a href="logout.php"><div class="dashicons dashicons-migrate"></div> logout </a></li>
    </ul>
    </div>
        <div style="float: right; margin: 8px;">
            <script type="text/javascript">
                $(window).load(function () {
                    var ifr = $("#ifr"),
                        ifr_doc = ifr.contents(),
                        ifr_doc_w, ifr_w;

                    ifr_w = ifr.width();
                    ifr_doc_w = ifr_doc.width();

                    ifr_doc.scrollLeft(
                        (ifr_doc_w - ifr_w) / 2
                    );
                });
        </script>
        <iframe id="ifr" src="network.php" style="width: 1000px; height: 600px; border: 1px solid #e5e5e5;"></iframe>
    </div>
    <br clear="all" />
    </div>
    </body>
</html>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

you can try this stuff in your containing page http://jsfiddle.net/MB5er/ — YashPatel, Feb 24 '14 at 11:32
Does the iframe have `src="some_picture"` or a HTML document? — user13500, Feb 24 '14 at 11:33
@sasikanth — That isn't remotely helpful. The question is about setting the default scrolling of the frame. — Quentin, Feb 24 '14 at 11:37
Thank you for replies, I've attached my source code, what I want in few words is exactly what @Quentin says :) Someone posted this link http://jsfiddle.net/MB5er/ and this what I want but this solution doesn't work for me :( — Louay Hamada, Feb 24 '14 at 12:06

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Center document of iframe based on width of iframe in mother document:

$(window).load(function () {
    var ifr = $("#ifr"),           // Iframe from ID
        ifr_doc = ifr.contents(),  // Iframe document from ifr
        ifr_w,                     // Iframe width (in mother document)
        ifr_doc_w;                 // Iframe document width.

    ifr_w     = ifr.width();
    ifr_doc_w = ifr_doc.width();
    
    ifr_doc.scrollLeft(
        (ifr_doc_w - ifr_w) / 2
    );
});

The ID must be updated with the ID of your document.
The code should be added to the mother document, not the Iframe.
Iframe and mother document has to have same domain and protocol.

Fiddle sample

Edit:

From your updated mother document source:

You need to put:

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

to your <head> section, or at least above the

<script>
$(window).load(function () {
...

script part. $() is part of jQuery. When the browser loads the document and find the $(window) part before jquery has been loaded, it does not recognize what it is and fails.

Sample of working document:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery.js"></script>
</head>
<body>
<div style="float: right; margin: 8px;">
    <iframe id="ifr" src="network.php"
        style="width: 300px; height: 600px; border: 1px solid #e5e5e5;">
    </iframe>
</div>

<script type="text/javascript">
$(window).load(function () {
    var ifr = $("#ifr"),
        ifr_doc = ifr.contents(),
        ifr_doc_w, 
        ifr_w;

    ifr_w = ifr.width();
    ifr_doc_w = ifr_doc.width();

    ifr_doc.scrollLeft(
        (ifr_doc_w - ifr_w) / 2
    );
});
</script>

</body>
</html>

Thank you, this also what I want but also notworking, even when try it as it. — Louay Hamada, Feb 24 '14 at 12:29
@LOUAY: The code you posted. That is the `iframe` HTML, correct? What is the HTML and CSS for the mother document? The sample I posted works fine both in jsfiddle and with *local test*. And, the code I posted: you add to the mother-document, not the Iframe, correct?. — user13500, Feb 24 '14 at 12:39
Yes man, I add this code to the mother of my iframe, I attached the source code in the question. can you please send me the page which you test locally? — Louay Hamada, Feb 24 '14 at 12:44
@LOUAY: You need to move the `` to your section – likely you want to move `` there as well. — user13500, Feb 24 '14 at 12:46
I moved them into head section but no change unfortunately :( — Louay Hamada, Feb 24 '14 at 12:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48270/discussion-between-user13500-and-louay) — user13500, Feb 24 '14 at 13:03
For another who have the same problem, this works fine on Fiddle but on my computer it doesn't. @user13500 Thank you very much for your time — Louay Hamada, Feb 24 '14 at 13:29

score 0 · Answer 2 · answered Feb 24 '14 at 11:30

0

What i can see is the width of image is more than width of iframe.You can do some image editing and make image same as your iframe width or simply you can increase the width of iframe.

answered Feb 24 '14 at 11:30

SSN

169
1
5
17

The problem is not with image, this is just example, I attached my source code – Louay Hamada Feb 24 '14 at 12:08

score 0 · Accepted Answer · edited Aug 30 '20 at 20:39

0

Depending on your iframe src html you need to center that content as if you would without an iframe.

Actually I found another post that solved similar issue: Centering in CSS, when the object is larger than the viewport

Which do it like this:

div.wrapper {
    position: absolute;
    left: 50%;
}
.content {
    position: relative;
    margin-left: -50%;
}

<div class="wrapper">
    <div class="content">JQUERY BIZ-NASS HERE</div>
</div>

Or try this

<body onload='window.scrollTo(400,0);'>    // set the scroll value to 25% of your content width

Simple demo: http://codepen.io/anon/pen/flrJg

This can also be calculated based on the body width/scroll width and automatically set...something like this:

<body onload='scrollMe();'>

function scrollMe() {
  if (document.body.scrollWidth > document.body.clientWidth) {
      window.scrollTo(((document.body.scrollWidth-document.body.clientWidth)/2),0)
  }
}

A link to some extra info on the properties width/scroll width for older browser support: How to get document height and width without using jquery

edited Aug 30 '20 at 20:39

HoldOffHunger

18,769
10
104
133

answered Feb 24 '14 at 11:32

Asons

84,923
12
110
165

This also not working, look I search for scrollTo function and testes this example locally http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto it worked fine, but when i moved function to onload event of body like your answer, it doesn't work – Louay Hamada Feb 24 '14 at 12:57
Check this codepen: http://codepen.io/anon/pen/flrJg .. and from there you can adjust your calculations to center the scroll – Asons Feb 24 '14 at 13:03
I updated the codepen with calc of scroll amount, http://codepen.io/anon/pen/flrJg ... so now you should have what you need – Asons Feb 24 '14 at 13:19
Local as in "file:///C:\folder_path\index.html"? ... then you might get issues with script being blocked – Asons Feb 24 '14 at 13:25
Why did you changed your accepted answer to someone else? – Asons Feb 24 '14 at 13:35
I'm sorry, I was think that I can accept two answers, but your answer is first accepted to me :) – Louay Hamada Feb 24 '14 at 13:36

score 0 · Answer 4 · answered Feb 24 '14 at 13:29

0

This is a simple solution, not sure it is 100% (it must run in the parent doc):

var iframe = document.getElementBy...;///pick the best way to select your iframe.
iframe.scrollLeft = (iframe.offsetWidth/2)/2;

answered Feb 24 '14 at 13:29

enapupe

15,691
3
29
45

That is also very elegant.. The con of this solution is that it works within the iframe, if the iframe is not on your control you cannot do it. – enapupe Feb 24 '14 at 13:36

How to center the webpage which used by iframe

4 Answers4

Edit:

Sample of working document: