Make your own free website on Tripod.com

NicNet Menu
  • 3B Graphics
  • EasyHTML Editor
  • Nic's HTML Page
  • Uncanny Program.
  • Click Here to Move Menu
    Double-Click to Stop
     

    This neat little script allows your visitors to move a menu (usually containing your page links) to anywhere on the screen they like. I personally recommend this script. The first time I saw something like it, I thought it was really neat and would make an excellent addition to my javascript page. Pretty much everything is error-proof and will work on 99% of the browsers out there today. It is decently long and complex, so be sure to look at the color coding to see what you can change.
    The source..


    <div id="movmenu" style="position:absolute; visibility:show; left:20px; top:20px; z-index:2">
    <table border=1>
    <tr><td bgcolor=#dedede>
    <b>
    <CENTER><font FACE="MS Sans Serif" style="color:darkblue;cursor:move;text-decoration:none;font-size:12pt">
    NicNet Menu</a></b></font></CENTER>
    </td></tr>
    <tr><td bgcolor="#ffffff">
    <br>
    <a href="yoururl1.html">Your Link1</a><br>
    <a href="yoururl2.html">Your Link2</a><br>
    <a href="yoururl3.html">Your Link3</a><br>
    <a href="yoururl4.html">Your Link4</a><br>
    </td>
    </tr>
    <tr><td bgcolor=#dedede>
    <CENTER><a href="javascript:void(0)" FACE="MS Sans Serif" 
    style="color:darkred;cursor:move;text-decoration:none;font-size:10pt" 
    onmousedown="InitializeMove()"><b>Click Here to Move Menu<br>Double-Click to Stop</b></FONT></CENTER>
    </td></tr>
    </table>
    </div>
    <div id="emptycell" style="position:absolute; visibility:show; left:-70px; top:-70px; z-index:2"></div>
    <script language="JavaScript1.2">
    <!--
    // please keep these lines on when you copy the source
    // made by: Nicolas - http://www.javascript-page.com
    
    var XX = -70;
    var YY = -70;
    var cur_one = "emptycell"
    var moving = false;
    var xpos1 = 20;
    var ypos1 = 20;
    var myX = 0;
    var myY = 0;
    
    function InitializeMove() {
    cur_one = "movmenu";
    XX = eval("xpos1");
    YY = eval("ypos1");
    }
    
    function CaptureMove() {
    if (document.layers) document.captureEvents(Event.MOUSEMOVE);
    }
    
    function EndMove() {
    if (document.layers) document.releaseEvents(Event.MOUSEMOVE);
    
    cur_one = "emptycell"
    moving = false;
    document.close();
    }
    
    function WhileMove() {
    
      if (document.all) {
        eval(cur_one+".style.left="+myX);
        eval(cur_one+".style.top="+myY);
      }
      
      if (document.layers) {
        eval("document."+cur_one+".left="+myX);
        eval("document."+cur_one+".top="+myY);
      }
    }
    
    function MoveHandler(e) {
    
    myX = (document.all) ? event.clientX : e.pageX;
    myY = (document.all) ? event.clientY : e.pageY;
    
      if (!moving) {
        diffX =  XX - myX;
        diffY = YY - myY;
        moving = true;
      if (cur_one == "emptycell") moving = false;
    }
    myX += diffX;
    myY += diffY;
    
      if (moving) {
        xpos1 = myX;
        ypos1 = myY;
      }
    
    WhileMove();
    }
    
    function ClearError() {
    return true;
    }
    
    if (document.layers) {
    document.captureEvents(Event.CLICK);
    document.captureEvents(Event.DBLCLICK);
    }
    
    document.onmousemove = MoveHandler;
    document.onclick = CaptureMove;
    document.ondblclick = EndMove;
    window.onerror = ClearError;
    
    WhileMove();
    //-->
    </script>
    

    Color coding..


    Anything with this color you should be able to change to fit your homepage without causing an error. I wouldn't recommend messing with anything in the DIV tag that is not this color.
    The two numbers with this color indicate the X and Y position of the top-left section of the table. You can change where the table is initially located by changing them. Notice that there are two sets of these numbers (4 variables total). Both sets must contain the same values.

    Nic's JavaScript Page