Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    How to make a floating layout that follows the user while he scrolls the page

    Hi,
    I'm wondering how to obtain some sort of floating panel/banner, positioned on the right of the screen, that scrolls down to remain visible while the user scrolls down on the page (i.e. on a page with the vertical scrollbar).
    Something like the flash object in this example.

    Should I add some sort of listener and use the smartgwt API to reposition the component (a layout or a window), or maybe only use some css properties like position:fixed?

    I've searched the SC Reference and the forums with no results.

    I am using smartgwt 2.3 (SC_SNAPSHOT-2010-12-01/LGPL Development Only (built 2010-12-01)).

    Davide

    #2
    Isomorphic?
    Any idea?

    Comment


      #3
      Can you add a GWT scroll listener and then within it simply move a floating smartgwt canvas/window as the window scrolls?

      See:
      http://google-web-toolkit.googlecode.com/svn/javadoc/2.1/com/google/gwt/user/client/WindowScrollListener.html

      Comment


        #4
        Just bringing this back from the past because there was no comment by Isomorphic and I have the same question. How do we get a floating layout that follows when you scroll? I see only setting the position to fixed in CSS. Does Isomorphic have a better suggestion? Below I have an example using the snapTo property of Canvas but the top layout will not follow the scroll when scrolling down.

        EDIT: This code is for SmartClient JavaScript but if there is a solution for Smart GWT it would be helpful too.

        Code:
        isc.HLayout.create({
            width: "100%",
            height: "1000",
            backgroundColor: "green",
            children: [
                isc.HLayout.create({
                    snapTo: "T",
                    width: "90%",
                    height: 50,
                    backgroundColor: "red"
                })
            ],
            members: [
                isc.VLayout.create({
                    overflow: "auto",
                    width: "100%",
                    height: "1000",
                    backgroundColor: "blue"
                })
            ]
        });

        Comment


          #5
          We would generally recommend against any approach that involves browser-level scrolling, since browser scrolling has a lot of bugs, and recently got worse (all Webkit browsers now fail to remove scrollbars when content shrinks such that both scrollbars should not be required, but each scrollbar would be required if the other was present).

          If you simply create a full-screen widget where a scrollable Layout is a subcomponent, you can add whatever fixed headers or footers you like above or below the scrollable Layout. This is the supported approach for achieving position:fixed.

          Comment

          Working...
          X