Announcement

**Isomorphic** · 27 Aug 2011, 08:19

If on the loaded page, you add style="overflow:hidden" to the <body> element, that should prevent native IFrame scrollbars.

**aldenpotamus** · 27 Aug 2011, 11:17

I did a wget of the page I was loading and modified it's html to include that tag and it did indeed remove the IFRAME's scrollbar, but the SmartGWT HTMLPane has a very small range of motion (ie I can't scroll the length of the page). I'm assuming this is because the ScrollBar that remains is outside the IFRAME and moved the IFRAME up and down rather than actually scrolling the content.

Is there a configuration of the HTMLPane that I need to change to rectify this?

Thanks for the speedy reply!

Cheers,
Alden

**Isomorphic** · 27 Aug 2011, 11:57

Ah, you're correct, basically the information about the loaded page's DOM size is not available to the HTMLPane, what's being scrolled is the iframe-as-such only.

Options:

1. switch to contentsType:"fragment". Depending on the content you're loading, this may or may not just work, or you may be able to adjust the content to make it work

2. as you mentioned before: in the page loaded in the iframe, add event handlers to be notified of scrolling, then call out of the frame to the parent application. This involves quite a bit of tricky browser-specific code plus JSNI

3. reconsider the overall approach: maybe it makes more sense to use a grid and DataSource in this instance, and create a call to load data instead of loading HTML into a frame

**aldenpotamus** · 27 Aug 2011, 13:19

Hmmm, yeah I tried the FRAGMENT and unfortunately while it loads the content it's jumbled illegible. I'm thinking that I may have to enter the world of browser specific JNSI (which given the end target isn't totally disastrous)... but before I commit to that let me just explain the general concept I'm going for so that you can tell me if there's another approach I could look at.

Basically I'm rendering a full webpage essentially as a background to the SmartGWT work I'm doing. The widgets are essentially interactive overlays on top the underlying page. Because the page can be scrolled I need to capture those scroll events to know how to shift the overlay respective the background moving (keeping the two in sync).

Based on that description am I right to say that JSNI is really the only way to go? If there's another approach please let me know, but I can't thank you enough for your help so far, you've really saved me a lot of headaches and time spent banging my head against the wall.

Cheers,
Alden

**aldenpotamus** · 28 Aug 2011, 15:50

Thanks again for all your help... the JSNI didn't end up being as complicated or browser specific as I was worried. Based on reading around this should work in all the major browsers, and perhaps might even be worth including in the default HTMLPane PAGE functionality. Also for anyone looking to do something similar.

Step 1: Add the listener.

Code:

protected native void addScrollListener(ClassWaitingForNotifications c) /*-{		
  $doc.getElementById("HTMLPane entityid").contentWindow.onscroll = function () { 			  
    c.@package.ClassWaitingForNotifications::receiveScroll()();
  }
}-*/;

Step 2: Method to receive the notification.

Code:

public void receiveScroll() {
  int scrollOffset = getScrollLocation();
  SC.say("Scrolled to: "+scrollOffset);
}

Step 3: Method to get the scroll location.

Code:

protected native int getScrollLocation() /*-{
  return $doc.getElementById("HTMLPane entityid").contentWindow.document.body.scrollTop;
}-*/;

Cheers!
Alden

Announcement

HTMLPane and Scrollbars (and ScrollHandlers)

Comment

Comment

Comment

Comment

Comment