Home   |   The Basics   |   Using Delays   |   Movable Popups   |   Adding Fade Effects   |   Drop-down Effects   |   Slide In   |   Tips & Tricks

Movable DHTML Popups

While in the past examples we focused on correct centering or aligning of the popup we left no freedom to the visitor. In this lesson we will learn how to make the popups movable, just like any other window.

We will continue this example from the sample provided in the "Styling DHTML Popups" lesson. The new additions consist in:

  • tracking the mouse pointer position: mousemove()
  • capturing mouse clicks on the dragable area (CSS class dragme)
  • actual movement of the whole div when the dragable area is moved

    • The dragme CSS class is used both for identification but also for setting the move cursor:

    <style type='text/css'>
    .dragme { cursor: move }
    </style>

    <script type='text/javascript'>
    var ie = document.all;
    var nn6 = document.getElementById &&! document.all;

    var isdrag = false;
    var x, y;
    var dobj;

    function movemouse( e ) {
     if( isdrag ) {
       dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
       dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
       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>

    <div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px;'>

    <table width='380' cellpadding='0' cellspacing='0' border='0'>
    <tr>
    <td><img height='23' width='356' src='media/x11_title.gif' class='dragme'></td>
    <td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='media/x11_close.gif'
    border='0'></a></td>
    </tr>
    <tr><td colspan='2' style='background: url( media/x11_body.gif ) no-repeat top left; width: 380px; height: 277px;'>
    Drag my window title to see me moving :-)
    </td></tr>
    </table>

    </div>

    <input type='submit' onClick='document.getElementById( styled_popup ).style.display= block ' value=' Fire! '>

    OK, now let's see it in action!

    Please note that we set no z-index attribute in the CSS declaration and this is the reason why the popup "slips" under our top toolbar. If you site has other dynamically added elements, consider also using z-index for the top-most element.

    In the next lesson we will learn how to add fade effects.

    Privacy Policy | Copyright © 2010 WebArticles.org. All rights reserved. London Travel Deals.