Resize SharePoint 2007/2010 PageViewer WebPart height

May 5, 2011 — 4 Comments

Is there a way I can resize the page viewer webpart height to 100%? or any Alternative to the SharePoint Page Viewer Web Part

In SharePoint Page Viewer WebPart,  it’s  hard to setup the height to adjust to fit zone for some reason and I have tried so many solutions which I found in search engine but I am not satisfied.

Page Viewer Web Part Height Problem

Using the Page View Web Part, I added the link which I want and for the height and width I left the default value as No, Adjust height/width to fit zone.  When I apply these settings, I am able to see the width adjusting to the zone but height will not change based on the zone.

What I need is a solution which should adjust height and width if I added a external or internal URL.

I finally came up with a Java Script which and do the trick for me and here are the steps.

1.  Don’t use Page Viewer Web Part. Use Content Edit Web Part rather than Page Viewer Web Part. Add a content editor web part into the page where you want to display a internal or external URL

Edit the content Editor Web part and open source editor. Copy the Jave Script code and past it in the source code area.

image

<--- From Here --- >

<script type="text/javascript">

function f_clientWidth() {
    return f_filterResults (
        window.innerWidth ? window.innerWidth : 0,
        document.documentElement ? document.documentElement.clientWidth : 0,
        document.body ? document.body.clientWidth : 0
    );
}

function f_clientHeight() {
    return f_filterResults (
        window.innerHeight ? window.innerHeight : 0,
        document.documentElement ? document.documentElement.clientHeight : 0,
        document.body ? document.body.clientHeight : 0
    );
}

function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
        n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

function resizeCaller() {
//alert("OK");
var h = f_clientHeight();
var w = f_clientWidth();

try{    

    var oFrame    =    document.all("iframePage");

    oFrame.style.height = f_clientHeight()*0.97;
    oFrame.style.width = f_clientWidth();
    if(oFrame.style.display=="none") {
        oFrame.style.display="block";
    }

    }
    //An error is raised if the IFrame domain != its container's domain
    catch(e)
    {
    window.status =    'Error: ' + e.number + '; ' + e.description;
    }

}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

if (window.addEventListener)
window.addEventListener("resize", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onresize", resizeCaller)
else
window.onresize=resizeCaller

</script>

    <iframe src="http://virtualizesharepoint.com" scrolling="no" id="iframePage"
        style="display:none">
    </iframe>


<--- End --- >



2. Add your URL

Page Viewer Web Part height Solution

3. Save your code and click Ok for in Content Edit Web Part

View Page in Content Editor WebPart
4. Publish  your page and now you page now should able to  Adjust height/width to fit zone in SharePoint 2007/2010

4 responses to Resize SharePoint 2007/2010 PageViewer WebPart height

  1. 

    This did not work for me in SP 2010, even taking your code as is. While it did make the height much taller, as well as the width, I did not get 100% height.

  2. 

    If you specify a height and width in the Content Editor settings, will this code read from those values? If not, do you have any guidance on how to do that?

    I’m using your code, although it’s been manipulated slightly. But I am not getting the desired result. I’m not sure where it’s getting the height / width that it’s getting. I put in alert statements to pop up the values of the following variables:
    var h = f_clientHeight();
    var w = f_clientWidth();

  3. 

    Great solution! I appreciate the help and your posts.

  4. 

    Thanks for posting this. I’ve been looking for three days for a solution like this.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s