1,804 articles and 14,907 comments as of Sunday, May 22nd, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Monday, January 5, 2009

JQuery for Everyone: Manually Resizing Web Parts

Problem: I would love to have all iframes dynamically resize to fit their contents. However, as JoeD pointed out from my previous article, the browser’s security restricts us to only dynamically resizing iframes from our own server’s domain.

Solution: JQuery UI to the rescue. Resizable allows us to make all of our web parts interactive.

  1. Find or make a page with a Page Viewer Web Part.
  2. Configure the web part to load a page from another server (like “http://google.com”).
  3. Add a Content Editor Web Part to the same page.
  4. Open the Source Editor.
  5. Paste the code snippet from this article and click SAVE.
  6. Exit Edit Mode.

Now test your new interface. Move the mouse to the edge of your Page Viewer Web Part. The cursor will change to a bi-directional arrow. Click and drag the the frame’s edges until you no longer see a scrollbar.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$("div[id^='WebPartWPQ']").resizable({
		handles: "all",
		autoHide: true
		})
		.find("iframe").height("100%");
});
</script>


Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»
Entries in this series:
  1. JQuery for Everyone: Accordion Left Nav
  2. JQuery for Everyone: Print (Any) Web Part
  3. JQuery for Everyone: HTML Calculated Column
  4. JQuery for Everyone: Dressing-up Links Pt1
  5. JQuery for Everyone: Dressing-up Links Pt2
  6. JQuery for Everyone: Dressing-up Links Pt3
  7. JQuery for Everyone: Cleaning Windows Pt1
  8. JQuery for Everyone: Cleaning Windows Pt2
  9. JQuery for Everyone: Fixing the Gantt View
  10. JQuery for Everyone: Dynamically Sizing Excel Web Parts
  11. JQuery for Everyone: Manually Resizing Web Parts
  12. JQuery for Everyone: Total Calculated Columns
  13. JQuery for Everyone: Total of Time Differences
  14. JQuery for Everyone: Fixing Configured Web Part Height
  15. JQuery for Everyone: Expand/Collapse All Groups
  16. JQuery for Everyone: Preview Pane for Multiple Lists
  17. JQuery for Everyone: Preview Pane for Calendar View
  18. JQuery for Everyone: Degrading Dynamic Script Loader
  19. JQuery for Everyone: Force Checkout
  20. JQuery for Everyone: Replacing [Today]
  21. JQuery for Everyone: Whether They Want It Or Not
  22. JQuery for Everyone: Linking the Attachment Icon
  23. JQuery for Everyone: Aspect-Oriented Programming with jQuery
  24. JQuery for Everyone: AOP in Action - loadTip Gone Wild
  25. JQuery for Everyone: Wiki Outbound Links
  26. JQuery for Everyone: Collapse Text in List View
  27. JQuery for Everyone: AOP in Action - Clone List Header
  28. JQuery for Everyone: $.grep and calcHTML Revisited
  29. JQuery for Everyone: Evolution of the Preview
  30. JQuery for Everyone: Create a Client-Side Object Model
  31. JQuery for Everyone: Print (Any) Web Part(s) Plugin
  32. JQuery for Everyone: Minimal AOP and Elegant Modularity
  33. JQuery for Everyone: Cookies and Plugins
  34. JQuery for Everyone: Live Events vs. AOP
  35. JQuery for Everyone: Live Preview Pane
  36. JQuery for Everyone: Pre-populate Form Fields
  37. JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
  38. Use Firebug in IE
  39. JQuery for Everyone: Extending OWS API for Calculated Columns
  40. JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
  41. JQuery for Everyone: Email a List of People with OWS
  42. JQuery for Everyone: Faster than Document.Ready
  43. jQuery for Everyone: Collapse or Prepopulate Form Fields
  44. jQuery for Everyone: Hourly Summary Web Part
  45. jQuery for Everyone: "Read More..." On a Blog Site
  46. jQuery for Everyone: Slick Speed Test
  47. jQuery for Everyone: The SharePoint Game Changer
  48. JQuery For Everyone: Live LoadTip
 

Please Join the Discussion

39 Responses to “JQuery for Everyone: Manually Resizing Web Parts”
  1. Great post! I know a lot of folks who use the page viewer part but struggle with this.

  2. Kanwal says:

    Awesome … this is one to save in my jquery tool belt!

  3. Ali Sanaei says:

    I was actually thinking about this yesterday when playing with WordPress!
    Thanks for the post :)

  4. Gus says:

    Hi Paul,

    Thanks this is a great new tool. Thank You.

    Will this work with another CEWP that is not necessarily a web page? I also know of another solution I have been using re-sizing a page to the MS chrome. It can be found here on Ian’s Blog:http://www.wssdemo.com/Blog/archive/2007/12/22/alternative-to-the-sharepoint-page-viewer-web-part-to-solve-the-height-problem.aspx

    Thanks Again,
    Gus

  5. AutoSponge says:

    @Gus,

    Thanks for the link and the compliments.

    The way I wrote this script, when you drop it on the page, ALL web parts become “Resizable.”

    If you don’t want to see any “handles” for the CEWP, make sure you set it to “Hidden”.

    If you want to only target specific web parts (like only page viewer wps), change the selector to $(”div[id^='WebPartWPQ']:has(iframe[id^='MSOPageViewerWebPart_WebPartWPQ'])”)

  6. Paul – This is great! You make it look so easy in the cut and paste box, but I’m sure it took you a weekend to figure it out. — Mark

  7. Lee Reed says:

    Great post, Paul! This is easy and gets rid of that ‘what happens if I bump the web part width by 3 pixels’ exercise we have to go through today.

  8. AutoSponge says:

    @Mark,

    The dynamic one took me a weekend. This one took me 5 minutes. The more I use jQuery, the easier it gets as I start to reuse bits of my own stuff.

  9. Christophe says:

    Thanks Paul! How about filing it under “Javascript”? I want to keep track of this one ;-)

  10. AutoSponge says:

    @Christophe,

    Thanks for catching that errant comma. I updated the script.

  11. Joan says:

    Ok, now it works for me — must have been the errant comma. (I don’t know jquery I just copy it) Downloading the jquery and jquery-ui-all API files from Google into a WSS Library and changing the path referenced made the script work but then I saw today’s post and retried as is and it works. Just an fyi.

  12. AutoSponge says:

    @Joan,

    Thanks for the update. I depend on the community for ideas as much as keeping me honest. If it doesn’t work for you, please let me know so I can investigate–sometimes I miss a test case or paste the wrong version of my “research” file.

    I didn’t know jQuery either… 3 months ago.

  13. larry says:

    I have tried to apply this to datasheet view, but just not getting it. Is this possible, to apply to other webparts or list view parts?

  14. AutoSponge says:

    @Larry,

    I think the datasheet view is an ActiveX control. Just like with the Visio viewer, you need a programming solution to resize ActiveX stuff.

  15. Dhawal Mehta says:

    Paul,

    Thanks for such a nice code snippet.
    But when I copied this to content editor, after that all the webparts (OOB) on my page are re-sizeable now by draging it.

    So is there any way around to fix it only for Page viewer?

    -Dhawal

  16. AutoSponge says:

    @Dhawal,

    Try this:

    
    
    
    
  17. Dhawal Mehta says:

    Thanks Paul I am bit new to JQuery so not able to think on that part.
    Thanks much.

    And please keep writing on JQuery.

    -Dhawal

  18. Eric j says:

    When I use it, I can expand web parts but can not make them smaller. (Not even back to their original size once expanded.) Is this an expected result?

  19. AutoSponge says:

    @Eric,

    That probably depends on the web part. jQuery UI does all the heavy lifting and there are other options you can use that might help.

  20. Tim Kelley says:

    Can you write it to make the height the size of the page inside the web part?

  21. AutoSponge says:

    @Tim,

    I think that only works if the file loaded comes from the same domain, otherwise, you break cross-site scripting blocks of the browser.

  22. Tim Kelley says:

    In my case that is just fine.

  23. Anupama says:

    Instead of providing dynamic resize capability how can be by default load the page without scroll.

    What i mean is the PageViewer web part height should be same as source pahe height?

    Is that possible?

  24. Gene says:

    Same question as Anupama… how do you initialize the hight to the source page’s hight? Thanks

  25. AutoSponge says:

    Height is set in the Modify Shared Web Part settings.

  26. Gene says:

    Thanks for the response. What I meant was, the height should be adjusted to that of the page it is bringing in. Is this possible

  27. AutoSponge says:

    @Gene,

    Only if the page being loaded comes from the same server. Browser security prevents you from running scripts across domains (e.g., through an iframe that loads from another server).

  28. Jim Andrew says:

    Okay this is similar to what I am trying to do. I am hoping that I can get some help with the issue that I am having.

    I am trying to make 3 web parts that are in a vertically aligned zone display next to each other in a 3 column layout. I do not have control over the page layout to be able to modify from the server side.

    I need to be able to do this from the client side if possible.

  29. AutoSponge says:

    @Jim,

    It’s not similar, but I have an option anyway :P

    If you know how to add some JavaScript and you’re following this series, start the same way: use a hidden CEWP with two script tags, the first has a link to jQuery and the second has this code:

    var w = window.innerWidth;
    $("#MSOZoneCell_WebPartWPQ1").css({position:"absolute", left:"160px", width:w/4});
    $("#MSOZoneCell_WebPartWPQ2").css({position:"absolute", left:160+w/4+25, width:w/4});
    $("#MSOZoneCell_WebPartWPQ3").css({position:"absolute", left:160+w/2+50, width:w/4});
    

    Change the web part ID’s to match the ones you want to layout and where.

    Good luck,
    Paul

  30. Jim Andrew says:

    @AutoSponge

    To start with thanks for your help Paul! I have been using your methods over the last few months and they have worked great!

    I have a CEWP on the page already that I am using for some other jQuery stuff so I know that the reference works.

    I also changed the WPQ#’s for each of the items in your jQuery code to match my webparts. No luck.

    Am I missing something? The web parts are still stacked vertically and have not moved.

    Thanks,
    Jim

  31. AutoSponge says:

    @Jim,

    The changes above are made to the “inline style” of the element. You should be able to look at the element in Firebug and see the changes. If you don’t see them, something isn’t firing.

    Make sure you have this script inside a document.ready closure:

    $(function(){
      //code goes here
    });
    

    The DOM must be loaded and ready before it can manipulate these elements. If you still don’t see the changes, try running variations of the code in the Firebug console until you see something firing.

    Troubleshooting scripts is by no means the most fun you can have on a Saturday night, but you will learn a lot from the process.

    • Aparna says:

      Hi Paul,

      Great code !! I used your code for Excel web part and it works perfectly. I have been trying during our last product release to fit SSRS webparts to their content. BUT I always ended with vertical and horizontal scrollbars. I tried many scripts, getting the ReportFrame Div tag and adjusting the height etc, setting the AsyncRendering false, SizeFitToContent true… …etc .

      But am ending up with those bad-fitting scrollbars for my SSRS webpart.

      Please, please, say “Yes”, but with little tweaks to your code for excel web access, can I USE it for SSRS webpart resizing ?

      Thank so much for all your hardwork. It helps people like me a lot.
      Aparna

  32. Jason says:

    I am trying to do something along these same lines.

    Basically, I have an .aspx page in SharePoint with a single web part zone. Currently, the web part always has a fixed width and height (1000px by 510px).

    Ideally, I would like the web part to dynamically expand/shrink as the page size changes. I tried setting the “Width” and “Height” web part properties in (managed) code, but it gave me an error message to the affect that only fixed width and height is allowed. Is there a way to set it dynamically using jQuery (or any other technology, for that matter)?

  33. jdub says:

    hi,

    this is great,

    i have a problem, when i edit my page the whole page shrink, do you have a solution here? thanks a lot

  34. Alex says:

    Hi Paul!

    You have done an impressive work! Great post! Could you please tell me, how can I resize my viewer web part dynamically? From my own security domain.

    Cheers,

    A

  35. Sue says:

    I want to do this with the web part viewer with pages that are on my domain so I don’t want it to be manual I want it to be dynamic like the Excel Web part one but I can’t figure out what I need to change. I’d guess [id^='MSOZoneCell_WebPart'] needs to be changed to [id^='WebPartWPQ'] but I think also this line would need changed but I’m not sure to what…or if you can even do this.

    var e = $(obj).find(”iframe:first”).contents().find(”table.ewrnav-invisibletable-nopadding:last”); since this appears to be looking for the excel table and I’d just want to look I think for the DIV tag. Not sure, can I dynamically eliminate both horizontal and vertical scroll bars on the iFrame for the Web Part viewer so it always resizes to the page content?

Trackbacks

Check out what others are saying about this post...
  1. SharePoint Daily for January 6, 2009…

    Top News Stories Report: Intranets Increased Collaboration Support in 2008 (Read Write Web) Every year…

  2. [...] most bookmarked posts – the blog’s home page Btw I used Paul Grenier’s script for manually resizing Web Parts. This will allow you to expand the Technorati and Delicious [...]

  3. [...] JQuery for Everyone: Manually Resizing Web Parts [...]




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!