Determining Bounds of Editor on a Scrollable Page

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    12 posts
    Member since:
    May 2011

    Posted 03 Jun 2011 Link to this post

    Greetings!

    I am still trying to implement Drag & Drop from RadTreeView to RadEditor. Currently, I have the isMouseOver checks split depending on the current Content Mode of the editor(ie: using get_contentAreaElement() in Design and _getTextIframe() in HTML). This all works fine when the page is short and not scrollable. I also have RadGrids on the page, and when they contain substantial amounts of rows the page begins to scroll vertically. When this happens and I am for instance towards the bottom of the scrollable page, it appears that the $telerik.getBounds() values stay the same even though the Editor is not in the same position anymore(it has visibly moved up). 

    //Check if the image is over the editor design view or not
     function isMouseOverEditorDesignView(editor, events) {
         var editorFrame = editor.get_contentAreaElement();
         var editorRect = $telerik.getBounds(editorFrame);
     
         var mouseX = events.clientX;
         var mouseY = events.clientY;
     
         if (mouseX < (editorRect.x + editorRect.width) &&
              mouseX > editorRect.x &&
                 mouseY < (editorRect.y + editorRect.height) &&
              mouseY > editorRect.y) {
             return true;
         }
     
         return false;
     }
     //Check if the image is over the editor text area or not
     function isMouseOverEditorCodeView(editor, events) {
         var htmlFrame = editor._getTextIframe();
         var htmlRect = $telerik.getBounds(htmlFrame);
     
         var mouseX = events.clientX;
         var mouseY = events.clientY;
     
         if (mouseX < (htmlRect.x + htmlRect.width) &&
              mouseX > htmlRect.x &&
                 mouseY < (htmlRect.y + htmlRect.height) &&
              mouseY > htmlRect.y) {
             return true;
         }
         return false;
     }

    Is there a way where I can adjust the getBounds values based on my scroll position? Thanks in advance!

    Sincerely,

    Andrew
  2. Andrew
    Andrew avatar
    12 posts
    Member since:
    May 2011

    Posted 03 Jun 2011 Link to this post

    Fixed!

    I used your static library function getScrollOffset to get it to work. This now allows me to resize the Editor to any size on a page that can be any size as well :

        //Check if the image is over the editor design view or not
        function isMouseOverEditorDesignView(editor, events) {
            var editorFrame = editor.get_contentAreaElement();
            var editorRect = $telerik.getBounds(editorFrame);

            var mouseX = events.clientX;
            var mouseY = events.clientY;

            var scrollOffset = $telerik.getScrollOffset(document.body, true);

            if (mouseX < (editorRect.x + editorRect.width - scrollOffset.x) &&
                 mouseX > (editorRect.x - scrollOffset.x) &&
                    mouseY < (editorRect.y + editorRect.height - scrollOffset.y) &&
                 mouseY > (editorRect.y - scrollOffset.y)) {
                return true;
            }

            return false;
        }
        //Check if the image is over the editor text area or not
        function isMouseOverEditorCodeView(editor, events) {
            var htmlFrame = editor._getTextIframe();
            var htmlRect = $telerik.getBounds(htmlFrame);

            var mouseX = events.clientX;
            var mouseY = events.clientY;

            var scrollOffset = $telerik.getScrollOffset(document.body, true);

            if (mouseX < (htmlRect.x + htmlRect.width - scrollOffset.x) &&
                 mouseX > (htmlRect.x - scrollOffset.x) &&
                    mouseY < (htmlRect.y + htmlRect.height - scrollOffset.y) &&
                 mouseY > (htmlRect.y - scrollOffset.y)) {
                return true;
            }
            return false;
        }
Back to Top