This is a migrated thread and some comments may be shown as answers.

Determining Bounds of Editor on a Scrollable Page

1 Answer 65 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 03 Jun 2011, 06:54 PM
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

1 Answer, 1 is accepted

Sort by
0
Andrew
Top achievements
Rank 1
answered on 03 Jun 2011, 09:16 PM
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;
    }
Tags
Editor
Asked by
Andrew
Top achievements
Rank 1
Answers by
Andrew
Top achievements
Rank 1
Share this question
or