Limit object from moving more than the width of the window

[ak7861]

Hi,

I'm using the following script for my DHTML popup window. It also has a drag function which doesn't operate the way I want it to.

http://dhtmlpopups.webarticles.org/movable.php

When you move the object to the far right or bottom of the window it has no limit, creating scroll bars which is a nuisance.

I also noticed that DD's popup script does the same.

Appreciate it if anyone could help me.

AK7861

[jscheuer1]

I'm not thrilled with the code but, its not horrible. Here it is (from Sample 06 at the link you mentioned) modified to limit you to the area of the window at the left and bottom edges, thus preventing scrollbars if none were present to begin with:

<script type='text/javascript'>
var ie = document.all;
var nn6 = document.getElementById &&! document.all;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var isdrag = false;
var x, y;
var dobj;

function movemouse( e ) {
  if( isdrag ) {
  var scrollt=typeof pageYOffset=='number'? pageYOffset : iecompattest().scrollTop? iecompattest().scrollTop : 0;
  var scrolll=typeof pageXOffset=='number'? pageXOffset : iecompattest().scrollLeft? iecompattest().scrollLeft : 0;
  var leftlim=window.innerWidth? window.innerWidth-dobj.offsetWidth : iecompattest().clientWidth-dobj.offsetWidth;
  var leftset=nn6 ? tx + e.clientX - x : tx + event.clientX - x;
  var toplim=window.innerHeight? window.innerHeight-dobj.offsetHeight : iecompattest().clientHeight-dobj.offsetHeight;
  var topset=nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    dobj.style.left = Math.min(leftset, leftlim+scrolll)+'px';
    dobj.style.top  = Math.min(topset, toplim+scrollt)+'px';
    return false;
  }
}

function selectmouse( e ) {
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme") {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme") {
    isdrag = true;
    dobj = document.getElementById("styled_popup");
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

function styledPopupClose() {
  document.getElementById("styled_popup").style.display = "none";
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>

Notes: It will also work with a DOCTYPE, something the original did not do. If the page already has scrollbars, you are limited to the viewable area but, may scroll the page (left or down) and then drag into the newly revealed areas.

[ak7861]

Thanks man, but I'm no longer using that script. Is it possible you could implement the same technique on this one?

http://www.php-development.ru/javascripts/popup.php

Thanks.

[jscheuer1]

Pretty much the same deal, I actually like the way the other script works better. Anyways substitute this:

// ----- popup_mousemove -------------------------------------------------------

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function popup_mousemove(e)
{
  if (!popup_dragging) return;

  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);

  var mouseX = ie ? window.event.clientX : e.clientX;
  var mouseY = ie ? window.event.clientY : e.clientY;

  var scrollt=typeof pageYOffset=='number'? pageYOffset : iecompattest().scrollTop? iecompattest().scrollTop : 0;
  var scrolll=typeof pageXOffset=='number'? pageXOffset : iecompattest().scrollLeft? iecompattest().scrollLeft : 0;
  var leftlim=window.innerWidth? window.innerWidth-element.offsetWidth : iecompattest().clientWidth-element.offsetWidth;
  var leftset=element.offsetLeft+mouseX-popup_mouseX;
  var toplim=window.innerHeight? window.innerHeight-element.offsetHeight : iecompattest().clientHeight-element.offsetHeight;
  var topset=element.offsetTop +mouseY-popup_mouseY;

  element.style.left = Math.min(leftset, leftlim+scrolll)+'px';
  element.style.top  = Math.min(topset, toplim+scrollt)+'px';

  popup_mouseX = ie ? window.event.clientX : e.clientX;
  popup_mouseY = ie ? window.event.clientY : e.clientY;
}

for the current popup_mousemove script block in popup.js

[ak7861]

Works good, but on Firefox I could still drag it to the right and slowly make the page longer in width. IE is fine.

[jscheuer1]

I'm not seeing that here in FF 1.5.0.9 - I'm using it with a DOCTYPE (tested with XHTML 1.0 transitional and HTML 4.01 transitional). The XHTML DOCTYPE would probably be like no DOCTYPE though, it is the one used in the demo .zip file.

[ak7861]

I'm using FF2, and I do not use XHTML.

[jscheuer1]

Well, being able to slowly make the page larger is acceptable, I would think. If the user gets into such a situation, they are going to see that it is a struggle and probably not the best thing to do. If they just 'go with the flow' there will be minimal disruption, if any, to the browser window.