Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Problem with Window popup in Iframe

    I have a problem with window objects being shown in the center of an iframe instead of the browser window. Is there any way around this? I know the documentation says under centerInPage() "Centers the Window in the page. This is called automatically in window.show() if Window.autoCenter is true. Note - if the Window is a child of another widget, we center in the parent widget rather than centering in the page. " but I would like to figure out how to override this behaviour.

    Save the following code in two different files. Open in the iframe.html and click on Show Window button. You'll notice the window is not visible until you scroll down. This testcase works fine if the iframe height/width is "100%".


    windowSample.html:
    Code:
    <HTML><HEAD><TITLE>

</TITLE>
    <SCRIPT>var isomorphicDir = "../../isomorphic/"</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY bgcolor=tan><SCRIPT>

isc.IButton.create({
    ID: "touchButton",
    width: 120,
    title: "Touch This"
});

isc.Label.create({
    left: 150,
    height: 20,
    contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
});

isc.IButton.create({
    title: "Show Window",
    top: 35,
    left: 75,
    click : function () {
        touchButton.setTitle("Can't Touch This");
        modalWindow.show();
    }
});

isc.Window.create({
    ID: "modalWindow",
    title: "Modal Window",
    autoSize:true,
    autoCenter: true,
    isModal: true,
    showModalMask: true,
    autoDraw: false,
    closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
    items: [
        isc.DynamicForm.create({
            autoDraw: false,
            height: 48,
            padding:4,
            fields: [
                {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                {name: "field2", type: "date"},
                {type: "button", title: "Done",
                 click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
            ]
        })
    ]
});

</SCRIPT></BODY></HTML>
    iframe.html

    Code:
    <html>
<iframe src="windowSample.html" width="100%" height="2000"></iframe>
</html>
    Tags: None
    #2
    There's not a general way to do this. There's definitely no way to center a window such that it spans two frames until the frame that draws it contains the other two frames (not the case here).

    As far as centering, you would have to turn off automatic centering and calculate the center yourself. The most straightforward way to do this would probably be to pass the position of the iframe with respect to the main page as URL params in the iframe's URL, so they could be detected in the child frame without any complicated logic for traversing the frame boundary.

    And here again, there would still be the limitation of the child frame only being able to show a Window within it's boundaries, which may not allow centering within the browser as a whole.

    Comment

      #3
      Ok. And is it the same issue with modal masking? Right now it only masks within the iframe.

      Comment

        #4
        Yes, same issue. The modality will only extend to the boundaries of the iframe.

        Comment

          #5
          Unfortunately, we have to figure out a way to support this scenario. What I am trying to do now is to get the current height of the window (or the iframe depending on which is smaller) and the current width of the iframe. I have the width value so far, but I am stuck with getting the current height of the window. I tried going up the parent chain to try and reach the top window but no luck.

          Comment

            #6
            Still struggling with this issue. If you run the testcase below by saving the files and then opening iframe.html, click on Show Window button. As expected, the dialog shows but you need to scroll down to see it as it is auto centered to the parent in this case the iframe. Now add property "autoFocus: true" to the dynamic form and run the testcase again. You'll notice that the window actually scrolls down to at least where the first field is.

            My question is, how is it being scrolled down? Maybe I can use similar logic for my problem.


            Code:
            iframe.html
<html>

<script type="text/javascript">
</script>
<iframe src="popup.html" width="800" height="5000">

</iframe>
</html>
            Code:
            popup.html

<HTML><HEAD><TITLE>
    SmartClient animation programming
</TITLE>
    <SCRIPT>var isomorphicDir = "../../isomorphic/"</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY bgcolor=tan><SCRIPT>

//===========================================================================
// SmartClient animation programming
//===========================================================================
// Demonstrates the following public methods for component animations:
//
//      animateMove (left, top, callback, time, acceleration)
//      animateResize (width, height, callback, time, acceleration)
//      animateRect (left, top, width, height, callback, time, acceleration)
//      animateFade (opacity, callback, time, acceleration)
//      animateShow (slideIn, callback, time, acceleration)
//      animateHide (slideOut, callback, time, acceleration)
//      animateScroll (scrollLeft, scrollTop, callback, time, acceleration)
//
//===========================================================================
isc.IButton.create({
    ID: "touchButton",
    width: 120,
    title: "Touch This"
});

isc.Label.create({
    left: 150,
    height: 20,
    contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
});

isc.IButton.create({
    title: "Show Window",
    top: 35,
    left: 75,
    click : function () {
        touchButton.setTitle("Can't Touch This");
        modalWindow.show();
		window.scrollTo(50,500);
    }
});

isc.Window.create({
    ID: "modalWindow",
    title: "Modal Window",
    autoSize:true,
    autoCenter: true,
    isModal: true,
    showModalMask: true,
    autoDraw: false,
    closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
    items: [
        isc.DynamicForm.create({
            autoDraw: false,
            height: 48,
            padding:4,
            fields: [
                {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                {name: "field2", type: "date"},
                {type: "button", title: "Done",
                 click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
            ]
        })
    ]
});


</SCRIPT></BODY></HTML>

            Comment

              #7
              All browsers have a native behavior of scrolling the focused field into view.

              You're way, way out of what we'd consider good practices (for any technology) but note that this recent post shows some JSNI code for managing scroll position of an iframe, which is a related issue.

              Comment

                #8
                Believe me, I know. I do not agree with the request either.

                I will try that thanks.

                Comment

                Previous template Next
                Working...
                X