New to Kendo UI for jQuery? Download free 30-day trial

Drag and Resize Window Over Iframe

Environment

Product Progress Kendo UI Window
Progress Kendo UI version Created with the 2020.3.1118 version

Description

When there is a Kendo Window and an iframe on the same page (Window and Editor as Editor uses iframe), the Window dragging and resizing freezes.

Solution

  1. Subscribe to the Window dragstart, dragend, resizeStart and resizeEnd events.
  2. Dynamically add and remove a transparent overlay from the iframes on the page.
    <iframe height="700px" width="100%" src="https://www.google.com/maps/embed" name="iframe_a"></iframe>

    <div id="example">
      <div id="window">
        <h4>Armchair 402</h4>
        <div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
        <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>
      </div>

      <span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span>

      <div class="responsive-message"></div>

      <script>
        $(document).ready(function() {
          var myWindow = $("#window"),
              undo = $("#undo");

          undo.click(function() {
            myWindow.data("kendoWindow").open();
            undo.fadeOut();
          });

          function onClose() {
            undo.fadeIn();
          }

          myWindow.kendoWindow({
            width: "600px",
            title: "About Alvar Aalto",
            visible: false,
            iframe: false,
            actions: [
              "Pin",
              "Minimize",
              "Maximize",
              "Close"
            ],
            dragstart: function(ev) {
                addIframeOverlay();
            },
            dragend: function(ev) {
                removeIframeOverlay();
            },
            resizeStart: function(ev) {
              console.log(1);
              addIframeOverlay();
            },
            resizeEnd: function() {
                removeIframeOverlay();
            },
            close: onClose
          }).data("kendoWindow").center().open();

          function addIframeOverlay() {
            var iframes = $("body").find("iframe");

            iframes.each(function(idx, item) {
                $('<div class="ui-draggable-iframe" style="background: #fff;"></div>')
             .css({
                width: this.offsetWidth+"px",
                height: this.offsetHeight+"px",
                position: "absolute",
                opacity: "0.001",
                zIndex: 1000
             })
             .css($(this).offset())
             .appendTo("body");
            });
          }

          function removeIframeOverlay() {
            $(".ui-draggable-iframe").remove();
          }
        });
      </script>
    </div>
In this article
Not finding the help you need? Improve this article