Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Community Forums > Interesting resources > Moving a chromeless HTML Application - hta

Moving a chromeless HTML Application - hta

Feed from this thread
  • nocivebrain avatar

    Posted on Dec 6, 2006 (permalink)

    Hi,
    I'm coding an HTML Application for a multimedia cd-rom.
    The page is chromeless (no borders, nor titlebar etc..) so i implemented custom titlebar and close button.
    My problem is moving the window as a normal window, with a mousedown on the titlebar.

    And this is quite weird 'cause it works with any other events, as onclick and ondblclick ! desperately user-unfriendly..  :( 

    Please help ! Thanks.

    Here's the code :

    webpad.hta
    to move the window, double click on its body - a click stops moving

    <html><head>
    <HTA:APPLICATION ID="webpad0"
    APPLICATIONNAME="webpad"
    BORDER="none"
    INNERBORDER="no"
    CAPTION="yes"
    SELECTION="no"
    SHOWINTASKBAR="yes"
    SINGLEINSTANCE="yes"
    SYSMENU="yes"
    SCROLL="no"
    TITLEBAR="no"
    ICON="ico.ico"
    NAVIGABLE="true"
    SCROLLFLAT="yes"
    SCROLL="no"></HTA:APPLICATION>


    <link href="test.css" rel="stylesheet" type="text/css">
    <title>&nbsp;webpad&nbsp;</title>

    <script language="jscript">

    function theerror()
    {
     //erreur = "Message d'erreur:\n"+ nouvelle+"\n"+fichier+"\n"+ligne;
     //alert(erreur);
     return true;
    }
    window.onerror = theerror;
    // ERROR REPORTING ON/OFF (on)
    </script>


    <script language="vbscript">
    //ONLOAD RESIZING
     dim winHeight
     dim winWidth
     dim centerX
     dim centerY
     
     winWidth=600
     winHeight=350 
     
     centerX=(screen.width/2)-(winWidth/2) 
     centerY=(screen.height/2)-(winHeight/2)
     
     window.resizeto winWidth,winHeight
     //window.moveto centerX,centerY
    </script>

     

    <script language="JavaScript" defer="defer">
    // HERE IT IS : MOVING FUNCTIONS
    var starMoving;
    var posX;
    var posY;
    var isMoving=false;


    function setPos(){ 

      posX=event.screenX-(winWidth/2);
      posY=event.screenY-12;

     document.all("viewpos").innerHTML="&nbsp;:&nbsp;x"+posX+"/y"+posY;
     document.all("infos").innerHTML=isMoving;
     
     if( isMoving == true ){
       window.moveTo(posX,posY);
     }
     
    }

    function moving(){
     isMoving=true;
    }

    function stopMoving(){
     isMoving=false;
    }

    function closeHTA(){
     window.close();
    }
    </script>
    </head>


    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onmousemove="setPos()" ondblclick="moving()" onmouseup="stopMoving()">

     
     
    <table id="titlebar" border="0" cellspacing="0" cellpadding="0" >
      <tr>
     <td width="493" align="left" valign="middle" >
     <span id="menubut" >&nbsp;&#9632;&nbsp;webpad&nbsp;&nbsp;&nbsp;</span>
     </td>
     <td width="289" align="left" valign="middle" >&nbsp;</td>
     <td width="20" align="center" valign="middle" id="exitButton" onMouseDown="closeHTA()">
       <a href="#"><strong>x</strong></a> </td>
      </tr>
    </table> 
    <br/>
    <br/>

    <div id="infos"></div>
    <br>
    <span id="viewpos"></span>


    </body></html>

    Reply

  • mathias9800 avatar

    Posted on Mar 26, 2007 (permalink)

    This problem CAN be solved. That I've done.

    http://holdgaard.1go.dk/move_hta_window.png
    Final result.

    You need to use the showModelessDialog method (open a secure popup, in a HTA, more information at MSDN). Because the big problem is that IE will not let you use the moveTo or moveBy if the mouse is pressed down. But in a ModelessDialog window, this will be allowed, and you will not get the "Access Denied" error...

    The HTA and the ModelessDialog would then have to "communicate" with eachother (with JavaScript), so that when you drag/move the ModelessDialog, the dialog will move the HTA window too.


    First I have modified your code (the HTA):

    <html><head>
    <HTA:APPLICATION ID="webpad0"
    APPLICATIONNAME="webpad"
    CAPTION="no"
    SELECTION="no"
    SHOWINTASKBAR="yes"
    SINGLEINSTANCE="yes"
    SYSMENU="yes"
    SCROLL="no"
    ICON="ico.ico"
    NAVIGABLE="true"
    SCROLL="no"></HTA:APPLICATION>


    <link href="test.css" rel="stylesheet" type="text/css">
    <title>webpad</title>

    <script language="jscript">

    function theerror(event)
    {
     error = "Error:\n"+ event;
     alert(error);
     return true;
    }
    window.onerror = theerror;
    // ERROR REPORTING ON/OFF (on)
    </script>


    <script language="vbscript">
    //ONLOAD RESIZING
     dim winHeight
     dim winWidth
     dim centerX
     dim centerY
     
     winWidth=600
     winHeight=350
     
     centerX=(screen.width/2)-(winWidth/2)
     centerY=(screen.height/2)-(winHeight/2)
     
     window.resizeto winWidth,winHeight
     //window.moveto centerX,centerY
    </script>

    <script language="JavaScript" defer="defer">
    function closeHTA(){
     window.close();
    }
    </script>
    </head>


    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <script>
    winTitle="webpad";

    minimizeButton=true;
    maximizeButton=true;
    closeButton=true;

    var titlebarDialog = window.showModelessDialog("titlebar.hta", new Array(window,winTitle+","+minimizeButton+","+maximizeButton+","+closeButton), "dialogHeight:16px; dialogWidth:"+document.body.offsetWidth+"px; dialogLeft:"+window.screenLeft+"px; dialogTop:"+window.screenTop+"px; help:no; resizable:no; status:no; unadorned:yes;");

    window.onresize=function(){
     try{
      titlebarDialog.dialogWidth=document.body.offsetWidth+"px";
      titlebarDialog.dialogLeft=window.screenLeft+"px";
      titlebarDialog.dialogTop=window.screenTop+"px";
     } catch(e){
      //error handling
     }
    }
    </script>

    <center><br>
    <div id="infos"></div>
    <br>
    <span id="viewpos"></span>
    </center>

    </body></html>


    Then I made a HTA file named titlebar.hta (the dialog):

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <HTA:application border="none"/>
     <title>TitleBar (moving fix)</title>
    <link href="test.css" rel="stylesheet" type="text/css">
    <meta name="Generator" content="Stone's WebWriter 4" />
    <script>
    if(window.dialogWidth==undefined){window.close()};

    var move = new Object();
    function mouseDown(){
    document.body.setCapture();
    move.x=window.event.screenX;
    move.y=window.event.screenY;
    move.winX=window.screenLeft;
    move.winY=window.screenTop;
    document.body.attachEvent("onmousemove", mouseMove);
    document.body.attachEvent("onmouseup", mouseUp);
    }
    function mouseMove() {
    newWinX=(move.winX+(window.event.screenX-move.x));
    newWinY=(move.winY+(window.event.screenY-move.y));
    if(newWinY>(screen.availHeight-20)){newWinY=screen.availHeight-20};
    parTop.moveTo(newWinX-3,newWinY-3);
    window.dialogLeft=newWinX;
    window.dialogTop=newWinY;
    document.body.setCapture();
    }
    function mouseUp() {
    document.body.detachEvent("onmousemove", mouseMove);
    document.body.detachEvent("onmouseup", mouseUp);
    document.body.releaseCapture();
    }

    var dontCloseMain = false;

    var parTop=window.dialogArguments;
    if(parTop.length==2){
     winCont=parTop[1].split(",");
     parTop=parTop[0];
    } else{
     dontCloseMain=true;
     window.close();
    }
    </script>
    </head>
    <body style="border:0px;" scroll="no" onbeforeunload="if(!dontCloseMain){parTop.closeHTA()}" onresize="document.getElementById('titlebar').style.width=window.dialogWidth">
    <div id="titlebar" onmousedown="mouseDown()">- <script>document.write(winCont[0])</script> -</div>
    <span style="height:16px;position:absolute;top:0px;right:0px;">
    <script>
    if(eval(winCont[1])){document.write('<input type="button" value="0" style="font-family:Marlett;" class="titlebarButton" onfocus="this.blur()">')};
    if(eval(winCont[2])){document.write('<input type="button" value="1" style="font-family:Marlett;" class="titlebarButton" onfocus="this.blur()" onclick="if(this.value!=\'2\'){this.value=\'2\'}else{this.value=\'1\'}">')};
    if(eval(winCont[3])){document.write('<input type="button" value="r" style="font-family:Marlett;" class="titlebarButton" onfocus="this.blur()" onclick="parTop.closeHTA()">')};
    </script>
    </span>
    </body>
    </html>


    And then I modified the external test.css file:

    BODY{
     background:#666;
     margin-top:16px;
     border:0px;
    }

    BODY, TABLE, INPUT, BUTTON, SELECT{
     font:8pt Ms Shell Dlg;
    }

    #titlebar{
     background:#999;
     color:#fff;
     height:16px;
     padding-top:1px;
     padding-left:17px;
     width:100%;
     position:absolute;
     top:0px;
     left:0px;
     text-align:center;
    }

    .titlebarButton{
     width:16px;
     height:16px;
     border-width:1px;
     padding-top:1px;
     padding-left:1px;
     border-color:#eee;
     background-color:#ccc;
    }




    This works perfect on my Windows XP SP2 (and Internet Explorer 7)

    Reply

    • Q1 Webinar Week
  • nocivebrain avatar

    Posted on Mar 27, 2007 (permalink)

    This just ROCKS !
    Thanks

    Reply

  • Paul avatar

    Posted on Jan 18, 2012 (permalink)

    Hi,
    Very nice code mathias9800.
    nocivebrain your code works perfect as well! You just made one mistake

    You had:
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onmousemove="setPos()" ondblclick="moving()" onmouseup="stopMoving()">

    ondblclick on your body, it should have been onmousedown, then your code works perfect too!

    "<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onmousemove="setPos()" onmousedown="moving()" onmouseup="stopMoving()">"

    The best part of it is that you can click anywhere in the body and move your window, exactly what I was looking for.

    I am going to convert all your code to VBScript, I noticed that you are using 2 javascript and VBscript.
    You can do the same thing with both languages so it's better to stick to one. Makes loading faster.

    Good luck!

    Reply

  • Paul avatar

    Posted on Jan 20, 2012 (permalink)

    I have converted your code to VBScript and adjusted it so you can move your HTA using the body while mouse stays in the same spot on the HTA:
    <html>
    <head>
    <HTA:APPLICATION ID="webpad0"
    APPLICATIONNAME="webpad"
    BORDER="none"
    INNERBORDER="no"
    CAPTION="yes"
    SELECTION="no"
    SHOWINTASKBAR="yes"
    SINGLEINSTANCE="yes"
    SYSMENU="yes"
    SCROLL="no"
    TITLEBAR="no"
    ICON="ico.ico"
    NAVIGABLE="true"
    SCROLLFLAT="yes"
    SCROLL="no"></HTA:APPLICATION>


    <link href="test.css" rel="stylesheet" type="text/css">
    <title>&nbsp;webpad&nbsp;</title>
    <script language="vbscript">
    winWidth=600
    winHeight=350
    window.resizeto winWidth,winHeight
    centerX=(screen.width-winWidth)/2
    centerY=(screen.height-winHeight)/2
    window.moveto centerX,centerY
    posX=0
    posY=0
    move=0
    Function closeHTA()
    self.close
    End Function
    Function setPos()
    posX=window.event.screenX
    posY=window.event.ScreenY
    move=1
    End Function
    Function moving()
    If move=1 Then
    moveX=0
    moveY=0
    moveX=window.event.screenX-posX
    moveY=window.event.screenY-posY
    window.moveto(window.screenLeft+moveX),(window.screenTop+moveY)
    setPos()    
    End if
    End Function
    Function stopMoving()
    move=0
    End Function
    </script>
    </head>


    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onmousedown="VBScript:Call setPos()" onmousemove="VBScript:Call moving()" onmouseup="VBScript:Call stopMoving()">

     
     
    <table id="titlebar" border="0" cellspacing="0" cellpadding="0" >
      <tr>
     <td width="493" align="left" valign="middle" >
     <span id="menubut" >&nbsp;&#9632;&nbsp;webpad&nbsp;&nbsp;&nbsp;</span>
     </td>
     <td width="289" align="left" valign="middle" >&nbsp;</td>
     <td width="20" align="center" valign="middle" id="exitButton" onMouseDown="VBScript:Call closeHTA()">
       <a href="#"><strong>x</strong></a> </td>
      </tr>
    </table>
    <br/>
    <br/>

    <div id="infos"></div>
    <br>
    <span id="viewpos"></span>


    </body>
    </html>

    If you want to create your own title bar use this:
    <html>
    <head>
    <HTA:APPLICATION ID="webpad0"
    APPLICATIONNAME="webpad"
    BORDER="none"
    INNERBORDER="no"
    CAPTION="yes"
    SELECTION="no"
    SHOWINTASKBAR="yes"
    SINGLEINSTANCE="yes"
    SYSMENU="yes"
    SCROLL="no"
    TITLEBAR="no"
    ICON="ico.ico"
    NAVIGABLE="true"
    SCROLLFLAT="yes"
    SCROLL="no"></HTA:APPLICATION>


    <link href="test.css" rel="stylesheet" type="text/css">
    <title>&nbsp;webpad&nbsp;</title>
    <script language="vbscript">
    winWidth=600
    winHeight=350
    window.resizeto winWidth,winHeight
    centerX=(screen.width-winWidth)/2
    centerY=(screen.height-winHeight)/2
    window.moveto centerX,centerY
    posX=0
    posY=0
    move=0
    Function closeHTA()
    self.close
    End Function
    Function setPos()
    posX=window.event.screenX
    posY=window.event.ScreenY
    move=1
    End Function
    Function moving()
    If move=1 Then
    moveX=0
    moveY=0
    moveX=window.event.screenX-posX
    moveY=window.event.screenY-posY
    window.moveto(window.screenLeft+moveX),(window.screenTop+moveY)
    setPos()    
    End if
    End Function
    Function stopMoving()
    move=0
    End Function
    </script>
    </head>


    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

     
     
    <table id="titlebar" border="0" cellspacing="0" cellpadding="0"  onmousedown="VBScript:Call setPos()" onmousemove="VBScript:Call moving()" onmouseup="VBScript:Call stopMoving()">
      <tr>
     <td width="493" align="left" valign="middle" >
     <span id="menubut" >&nbsp;&#9632;&nbsp;webpad&nbsp;&nbsp;&nbsp;</span>
     </td>
     <td width="289" align="left" valign="middle" >&nbsp;</td>
     <td width="20" align="center" valign="middle" id="exitButton" onMouseDown="VBScript:Call closeHTA()">
       <a href="#"><strong>x</strong></a> </td>
      </tr>
    </table>
    <br/>
    <br/>

    <div id="infos">Hi</div>
    <br>
    <span id="viewpos">Hello</span>


    </body>
    </html>

    I would advies using a <div> instead of <table> for your title bar.

    I am going to put it into my code now, thanks for starting me off.

    Good Luck!

    Reply

    • Q1 Webinar Week

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Community Forums > Interesting resources > Moving a chromeless HTML Application - hta