Moving a chromeless HTML Application - hta

5 posts, 0 answers
  1. nocivebrain
    nocivebrain avatar
    2 posts
    Member since:
    Dec 2006

    Posted 06 Dec 2006 Link to this post

    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>

  2. mathias9800
    mathias9800 avatar
    1 posts
    Member since:
    Mar 2007

    Posted 26 Mar 2007 Link to this post

    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)

  3. nocivebrain
    nocivebrain avatar
    2 posts
    Member since:
    Dec 2006

    Posted 27 Mar 2007 Link to this post

    This just ROCKS !
    Thanks
  4. Paul
    Paul avatar
    2 posts
    Member since:
    Jan 2012

    Posted 18 Jan 2012 Link to this post

    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!
  5. Paul
    Paul avatar
    2 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

    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!
Back to Top