How VwdCms.SplitterBar handles IFrame Elements

This example is about IFRAMES.

IFrame elements are handled by the browser as a completely separate browser window within a browser window. The difficulty that arises from this is that when the mouse is over an IFrame, the IFrame window gets the mouse events, not the outer window. This prevents the SplitterBar from working properly so we need hide the IFrame elements during resizing.

There are several different ways to hide elements using DHTML and CSS:
1. Display: element.style.display = "none";
2. Visibility: element.style.visibility = "hidden";

There times when you may want to use one approach rather than the other or you may want to tell the SplitterBar not to hide IFrames so that you can write custom JavaScript code to deal with more complex situations.

The SplitterBar has a property called "IFrameHiding" which can have one of the following values:
  SplitterBarIFrameHiding.DoNotHide (don't hide IFrames, let your code handle it)
  SplitterBarIFrameHiding.UseVisibility (use iframe.style.visibility = "hidden")
  SplitterBarIFrameHiding.UseDisplay (use iframe.style.display = "none")

Below are examples of each of these approaches:

This table has a list of items in the left column and an IFrame in the right column. The left column has a minWidth=100 and a maxWidth=600, when these limits are reached the SplitterBar will change color to Red indicating that it cannot go further.

SplitterBarIFrameHiding.UseDisplay + DIV element + Custom JavaScript

In my opinion, this is the prefered technique despite the fact that it takes a little bit more work to build the client-side JavaScript functions to handle the OnResizeStart and OnResizeComplete events. The reason I like this approach is that I don't see any of the problems mentioned in the example for UseVisibility so I think it is worth the small amount of extra effort.

The solution to the problem in the SplitterBarIFrameHiding.UseDisplay example (further down the page) is to put a DIV inside the right table cell and set display:none, width:100%, height:100%.

The IFrame is also in the right table cell with the div. During normal viewing the IFrame is visible and the div is hidden. During resizing the IFrame is hidden and the div is visible (although there is no content to see). The result is that the cell still contains an element to occupy its client area even when the IFrame is hidden.

By using the client-side events exposed by the SplitterBar, we can control the hiding and displaying of the DIV element. See the JavaScript in this page to learn how the OnResizeStart and OnResizeComplete event handlers are built. This example uses "vwdSplitter5".

  1. List Item List Item List Item
  2. List Item List Item List Item
  3. List Item List Item List Item
  4. List Item List Item List Item
  5. List Item List Item List Item
  6. List Item List Item List Item
  7. List Item List Item List Item
  8. List Item List Item List Item
  9. List Item List Item List Item


SplitterBarIFrameHiding.DoNotHide

The SplitterBar doesn't work well because the IFrame is capturing the mouse events and I have not added any custom code to handle the hiding of the IFrame.


  1. List Item List Item List Item
  2. List Item List Item List Item
  3. List Item List Item List Item
  4. List Item List Item List Item
  5. List Item List Item List Item
  6. List Item List Item List Item
  7. List Item List Item List Item
  8. List Item List Item List Item
  9. List Item List Item List Item

SplitterBarIFrameHiding.DoNotHide + DynamicResizing

I was hoping that turning on DynamicResizing would help with the IFrame issue, but as you can see below, the problems with the mouse events continue to happen.


  1. List Item List Item List Item
  2. List Item List Item List Item
  3. List Item List Item List Item
  4. List Item List Item List Item
  5. List Item List Item List Item
  6. List Item List Item List Item
  7. List Item List Item List Item
  8. List Item List Item List Item
  9. List Item List Item List Item


SplitterBarIFrameHiding.UseVisibility

During my testing with FireFox I noticed that if I resized the column quickly to the right that sometimes I would see the IFrame jump over to the right for a moment before it is hidden and sometimes there is some residual pixel discoloration left over to the right of the table. For this reason, I would only use the UseVisibility setting if there are other elements in the table cell that you don't want moving around when the column is resized and you don't want to use the solutions provided below for using the UseDisplay setting and you can live with the issues mentioned here.

  1. List Item List Item List Item
  2. List Item List Item List Item
  3. List Item List Item List Item
  4. List Item List Item List Item
  5. List Item List Item List Item
  6. List Item List Item List Item
  7. List Item List Item List Item
  8. List Item List Item List Item
  9. List Item List Item List Item


SplitterBarIFrameHiding.UseDisplay

This example is here to show you the problems that come up when setting the iframe.style.display = "none".

When the IFrame is hidden, the entire right table cell colapses to zero width immediately because there is no longer any content in the cell that can be rendered. To see this just click on the SplitterBar and hold the mouse button down. You will see that the left column has expanded far to the right.

Once this this has happened in Firefox, the SplitterBar gets into a corrupted state and no longer functions properly.

The solution to this problem is explained in the first example at the top of this page.

  1. List Item List Item List Item
  2. List Item List Item List Item
  3. List Item List Item List Item
  4. List Item List Item List Item
  5. List Item List Item List Item
  6. List Item List Item List Item
  7. List Item List Item List Item
  8. List Item List Item List Item
  9. List Item List Item List Item


SplitterBarIFrameHiding.DoNotHide + DIV element + Custom JavaScript

This example is doing essentially the same thing as the first example at the top of this page, except it is your own custom code that controls the hiding and displaying of the IFrame and DIV instead of the automatic functionality built into the SplitterBar.

If you have complex resizing needs or if you want to have ultimate control over the hiding and displaying of the IFrames, just turn off the automatic hiding by setting SplitterBar.IFrameHiding = SplitterBarIFrameHiding.DoNotHide.

By using the client-side events exposed by the SplitterBar, we can control the hiding and displaying of the IFrame and the DIV element. See the JavaScript in this page to learn how the OnResizeStart and OnResizeComplete event handlers are built. This example uses "vwdSplitter6".

  1. List Item List Item List Item
  2. List Item List Item List Item
  3. List Item List Item List Item
  4. List Item List Item List Item
  5. List Item List Item List Item
  6. List Item List Item List Item
  7. List Item List Item List Item
  8. List Item List Item List Item
  9. List Item List Item List Item

All SplitterBar examples presented here are using a Master Page with the following DOCTYPE declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 




Copyright (c) 2008 vwd-cms.com   |   VWD-CMS was designed and developed by Jeff Bazinet   |   Google Analytics