CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Louay Hamada
Louay Hamada

Reputation: 771

How to center the webpage which used by iframe

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.

pic 1 pic 2

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>

Upvotes: 0

Views: 2001

Answers (4)

Asons
Asons

Reputation: 87191

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

Upvotes: 0

enapupe
enapupe

Reputation: 17019

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;

Upvotes: 0

user13500
user13500

Reputation: 3856

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>

Upvotes: 1

SSN
SSN

Reputation: 169

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.

Upvotes: 0

Related Questions