Replacement dw_writedrag.js - Allows for Centering or Relative object positioning

This is the new dw_writedrag.js which allows for having either centered or relative positioning on the screen. Relative positioning is in actual fact positioning relative to the mouse click position. Centering will center the image or object horizontally, vertically or both, on the screen regardless of the screen resolution and regardless of your choice to use Web Studio Centering or Left Justify.

In order for this utility to function as described above you will be required to copy this code to notepad and name it dw_writedrag.js and replace the dw_writedrag.js that you downloaded.

           Throughout this tutorial you will see the use of  $this_folder_url$

           You must replace the instances where you see this with (In other words just delete the underscores).

The reason for this is that if I was to use the proper code, the code would replace it with the name of the page. It's just the way it works.

Main Menu

© 2007  WebStudioHelp.net & SunsetFX.com          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'Back to the Beach',  'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.

Graphics

Loren's Layered Thumbnail / Pop-Ups Tutorial / The Basics                                  * All credit for developing this in-depth tutorial goes to Loren - Great Job! *

The Basics - Step 1

Basics:  The following code must be set up and structured properly for the function to work. This is the basic universal code structure. There will be more page specific code to follow.

In order for the function to work you will have to go to the below mentioned site and download the required .js files which are in zipped format. You will find the download on the left hand side of the page under Code Links.
http://www.dyn-web.com/dhtml/write-drag/documentation.html

Create a Folder on your PC and download the zip file to there, and then un-zip to that folder.

The following code goes in the Head of each of your Pages. 

            Don't forget to adjust the portion, as noted above.

Code:

/*************************************************************************
 
  dw_writedrag.js - version date Nov 2003
  requires dw_event.js, dw_drag.js, and dw_viewport.js
 
  This code is from Dynamic Web Coding at http://www.dyn-web.com/
  Copyright 2003 by Sharon Paine
  See Terms of Use at http://www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
 
*************************************************************************/

var writeDrag = {
  // offX and offY can be numbers or "c"
  offX: 20,
  offY: 20,
  dragId:   "dragDiv",  // id of positioned div to be dragged
  handleId: "",         // optional, place null or "" if no handle
  writeId:  "",    // optional, will write to dragId if null or empty string
  // end of settings area - no need to edit below this line
 
  draggable: false,   // set true once dragObj.init called
  hideFlag: true,     // used in checkHide (document click)
 
  init: function() {   // initialize for dragging
    if (this.handleId) dragObj.init(this.handleId, this.dragId);
    else dragObj.init(this.dragId);
    this.draggable = true;
    // add handlers for hiding layer (esc key and doc click)
    dw_event.add( document, "click",   writeDrag.checkHide, false );
    dw_event.add( document, "keydown", writeDrag.checkKey,  true );
  },
 
  // called onclick of links (from wrapContent)
  set: function(e, cntnt, wd, offx, offy) {
    this.hideFlag = false;  // click on link to show layer is also document click, which would hide it
    var wobj = this.writeId? document.getElementById( this.writeId ): document.getElementById( this.dragId );
    var dobj = document.getElementById( this.dragId );
    if ( !this.draggable ) this.init();
    this.hide();
    wobj.innerHTML = cntnt;
   
    if (wd) {
      // wd might be width of image, so add border and padding
      // rely on styles set inline (or lengthy code needed)
      var bw = dobj.style.borderWidth? parseInt(dobj.style.borderWidth): 0;
      var pw = wobj.style.padding? parseInt(wobj.style.padding): 0;
      wd += 2 * bw + 2 * pw;
      dobj.style.width = wd + "px";
    }
    this.positionIt(e, dobj, offx, offy);
  },
 
  positionIt: function(e, o, offx, offy) {
    var x=0, y=0; viewport.getAll();
    // check positioning choices
//if(offX == "c"){ (No longer Required)
    if ( offx == 111111) {
      x = Math.round( (viewport.width - o.offsetWidth)/2 ) + viewport.scrollX;
    } else {  // use mouse location onclick to position
      x = e.pageX? e.pageX: e.clientX + viewport.scrollX;
      offx = offx || this.offX;  // check for passed offsets
      if ( x + o.offsetWidth + offx > viewport.width + viewport.scrollX )
        x = viewport.width + viewport.scrollX - o.offsetWidth;
      else x = x + offx;
    }
   
//if (offY == "c"){ (No longer Required)
  
if ( offy == 111111) {
      y = Math.round( (viewport.height - o.offsetHeight)/2 ) + viewport.scrollY;   
    } else {
      y = e.pageY? e.pageY: e.clientY + viewport.scrollY;
      offy = offy || this.offY;
      if ( y + o.offsetHeight + offy > viewport.height + viewport.scrollY )
        y = viewport.height + viewport.scrollY - o.offsetHeight;
      else y = y + offy;
    }
    o.style.left = x + "px"; o.style.top = y + "px";
    document.getElementById(this.dragId).style.visibility = "visible";
    setTimeout("writeDrag.hideFlag = true",200);  // delayed until after checkHide
  },
 
  checkKey: function(e) { // check for esc key
    e = e? e: window.event;  if ( e.keyCode == 27 ) writeDrag.hide();
  },

  // doc click hides
  checkHide: function(e) {
    dw_event.DOMit(e);
    // hide the layer if you click anywhere in the document
    // except a link that displays the layer (hideFlag), or on the layer itself,
    // unless that click on the layer is on the layer's close box   
    if (e.tgt.nodeType && e.tgt.nodeType == 3) e.tgt = e.tgt.parentNode;  // text node?
    if ( contained( e.tgt, document.getElementById("dragDiv") ) ) {
      if ( e.tgt.tagName && e.tgt.tagName == "IMG" ) e.tgt = e.tgt.parentNode;
      if ( e.tgt.tagName == "A" && e.tgt.href.indexOf("writeDrag.hide") != -1 ) writeDrag.hide();
      else return;
    }
    if (writeDrag.hideFlag) writeDrag.hide();
  },

  hide: function() { document.getElementById(writeDrag.dragId).style.visibility = "hidden"; }
}

// returns true of oNode is contained by oCont (container)
function contained(oNode, oCont) {
  while ( oNode.parentNode ) {
    oNode = oNode.parentNode;
    if ( oNode == oCont ) return true;
  }
  return false;
}


Code:

    <style type="text/css">
    body  { font: 14px/1.4 verdana, arial, helvetica, sans-serif; }
    h1 { font-size:18px } 

    /* These classes are used in wrapContent function */ 
    div.img { text-align:center } 
    div.msg { font-size:12px; text-align:center; line-height:1.3; margin-top:6px }
    </style>
    <script src="$this_folder_url$dw_event.js" type="text/javascript"></script>
    <script src="$this_folder_url$dw_viewport.js" type="text/javascript"></script>
    <script src="$this_folder_url$dw_drag.js" type="text/javascript"></script>
    <script src="$this_folder_url$dw_writedrag.js" type="text/javascript"></script>
    <script type="text/javascript">
    /*************************************************************************
      This code is from Dynamic Web Coding at http://www.dyn-web.com/
      Copyright 2002-3 by Sharon Paine
      See Terms of Use at http://www.dyn-web.com/bus/terms.html
      regarding conditions under which you may use this code.
      This notice must be retained in the code as is!
    *************************************************************************/

    // See documentation for information about setting these properties
    // at www.dyn-web/com/dhtml/write-drag/documentation.html
    writeDrag.writeId = "cntnt";

    //writeDrag.offX="c" (No longer required)
    //writeDrag.offY="c" (No longer required)

    // required arg's: event, image path and file name (as this.href)
    // important but optional arg's: width of image, height of image
    // other optional arg's: txt, layer width, offx, offy
    function wrapContent(e, img, w, h, txt, wd, offx, offy) {

    var imgStr, cntnt, win, str;
      imgStr = '<img src="' + img + '"' + (w? ' width="' + w + '"': "") + (h? ' height="' + h + '"': "") +

    '>';
      if ( dragObj.supported && typeof document.body.innerHTML != "undefined" ) {
        cntnt = '<div class="img">' + imgStr + '</div>';
        if (txt) cntnt += '<div class="msg">' + txt + '</div>'; 
    if (!wd) wd = w;
        writeDrag.set(e, cntnt, wd, offx, offy);
      } else { // non-capable browsers will open sub window
        w = w+80 || wd || 250; h = h+80 || 250; // size
        win = window.open('', 'subwin', 'resizable,width='+w+',height='+h+',left=100,top=100');
        if (win && !win.closed) win.resizeTo(w,h);
        str = '<html><head><title>Image Display</title></head>';
       str += '<body style="text-align:center">';
        str += imgStr + (txt? '<p>' + txt + '</p>':"");
       str += '</body></html>'
       win.document.write(str);
       win.document.close();
        if (win && !win.closed) win.focus();
      }
      return false;
    }

    </script>


aaaaaaaaaaaaiii