Results 1 to 8 of 8

Thread: Limit object from moving more than the width of the window

  1. #1
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Limit object from moving more than the width of the window

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    // ----- 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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •