SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drag/resize question

    hi!
    which of this cbe elements are used for this function?
    HTML Code:
    <head>
    <title>CBE: Making An Element Resizable And Draggable</title>
    <meta name='author' content='Mike Foster, cross-browser.com'>
    <meta name='description' content='Making An Element Resizable And Draggable: A programming example for CBE, a cross-browser DHTML API for IE, Gecko, Opera, Netscape, Konqueror and similar browsers'>
    <link rel='stylesheet' type='text/css' href='../cbe.css'>
    
    <!-- Start question here.... --!>
    
    <script type='text/javascript' src='../cbe.js'></script>
    <script type='text/javascript' src='../cbe_core.js'></script>
    <script type='text/javascript' src='../cbe_event.js'></script>
    <script type='text/javascript' src='../cbe_util.js'></script>
    <script type='text/javascript' src='../cbe_debug.js'></script>
    
    <!-- End question here.... --!>
    
    <script type='text/javascript'><!--
    var s = "<style type='text/css'>.clsCBE { position:absolute; width:100%; height:100%; clip:rect(0,100%,100%,0); border:1px solid #000000; padding:2px; margin:0px;}</style>";
    if (is.opera) s = "<style type='text/css'>.clsCBE { position:absolute; background:#ffffff; width:100%; height:100%; clip:rect(0,100%,100%,0); border:groove #333333; padding:2px; overflow:hidden;}</style>";
    else if (is.nav4) s = "<style type='text/css'>.clsCBE { position:absolute; width:100%; height:100%; clip:rect(0,100%,100%,0); }</style>";
    document.write(s);
    //--></script>
    <script type='text/javascript'><!--
    var e1;
    function windowOnload() {
      with (e1 = document.getElementById('e1').cbe) {
        color('#ff3333');
        background('#ccccff');
        resizeTo(125,125);
        moveTo('e',10);
        show();
        addEventListener('dragResize');
      }  
    }
    //--></script>
    </head>
    (i have marked above what part interests my question)
    and this is the div which use this functions and elements
    HTML Code:
    <div id="e1" class='clsCBE'>
    <b>e1</b><br>
    <br>
    draggable<br><br>
    resizeable
    </div>
    thanx in advance!!!

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The drag/resize CBE demo requires cbe_core.js, cbe_event.js, and cbe_util.js.

    Also have a look at this X drag events demo.


  3. #3
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive decided to drag and resize example!
    very nice works really! but still hard coded for my skill
    now here i have an example of how that will be but i dont know where to put this images!
    so if u can help me and tell me where i have to alter the code it will be very appreciate!!


    suggestions?
    thanx in advance!!

  4. #4
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi mike!
    a few question to make clear some things!
    i found out that the script above need this functions from cbe_util.js
    Code:
    function cbeAddDragResizeListener(cbe) {
      cbe.addEventListener('dragStart', cbeDragResizeStartListener);
      cbe.addEventListener('drag', cbeDragResizeListener);
    }
    function cbeRemoveDragResizeListener(cbe) {
      cbe.removeEventListener('dragStart', cbeDragResizeStartListener);
      cbe.removeEventListener('drag', cbeDragResizeListener);
    }
    function cbeDragResizeStartListener(e) {
      if (e.offsetX > (e.cbeCurrentTarget.width() - 25) && e.offsetY > (e.cbeCurrentTarget.height() - 25)) {
        e.cbeCurrentTarget.isResizing = true;
      }
      else e.cbeCurrentTarget.isResizing = false;
    }
    function cbeDragResizeListener(e) {
      if (e.cbeCurrentTarget.isResizing) e.cbeCurrentTarget.resizeBy(e.dx, e.dy);
      else e.cbeCurrentTarget.moveBy(e.dx, e.dy);
    }
    var cbeUtilJsLoaded = true;
    but i cant understand which need from other 2 files (cbe_core.js and cbe_event.js!
    to make the script like example above with image i need to understand those scripts clearly!
    so if u can show me which functions r used ill be very glad!!!
    thanx in advance!!!

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand the question. Is your page online?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •