How to dynamically expand the CMS View based on the content of the page?
A frequently requested feature is to have the ability to create a expandable CMS view, so no scrollbars will be displayed in the view itself.
And although it would be difficult to automate this process, it is quite easy to manually implement this functionality with only a few lines of
Make sure you understand how the CMS tools work before continuing with this tutorial.
Modify the layout of the Content View, so if will be 'expandable'. If you take a look at the original Content View, you will notice that we have used
one shape for the entire 'body' of the page. We will now break this shape into 3 parts:
• Top of the body. This part will have a fixed position. We've used just a standard image for this.
• Middle of the body. This part will expand together with the content of current page. This is a layer with background image is set to 'vertical
repeat' so that it will fill the entire layer.
• Footer (layer), which contains the bottom of the body and the copyright message (this part will move down if the height of the content
When you download the example project (at the end of this tutorial) you will notice that all 3 parts are nicely aligned so that it looks like one
image. Also make sure the 'CMS view' is not part of Layer1!
Now let's write the code to make it all work. Insert the following code between the <head> tag:
Take note of the 3 ID variables. You may need to change these if the names of your objects are different. The '#' must be included!
var cmsViewID = "#wb_CmsView1";
The ID of the Cms View object. The defaul value is wb_CmsView1
var cmsBodyLayer = "#Layer1";
The ID of the (expandable) body layer
var cmsFooterLayer = "#Layer2";
ID of footer layer.
No other changes should be necesarry.
The script uses jQuery but because the page contains a 'CMS Search' object, there is no need to include the jQuery library reference. If
your page does not already contain any jQuery objects then you wil have to add this reference yourself!
Publish the page...
Download example project: