Telerik Forums / Community Forums
This is a migrated thread and some comments may be shown as answers.

Moving a chromeless HTML Application - hta

4 Answers 751 Views
Interesting resources
This is a migrated thread and some comments may be shown as answers.
nocivebrain
Top achievements
Rank 1
nocivebrain asked on 06 Dec 2006, 02:23 PM

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>

4 Answers, 1 is accepted

Sort by
0
mathias9800
Top achievements
Rank 1
answered on 26 Mar 2007, 01:48 PM
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)

0
nocivebrain
Top achievements
Rank 1
answered on 27 Mar 2007, 04:47 PM
This just ROCKS !
Thanks
0
Paul
Top achievements
Rank 1
answered on 18 Jan 2012, 07:09 AM
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!
0
Paul
Top achievements
Rank 1
answered on 20 Jan 2012, 06:23 PM
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!
Tags
Interesting resources
Asked by
nocivebrain
Top achievements
Rank 1
Answers by
mathias9800
Top achievements
Rank 1
nocivebrain
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Share this question
or