Menustrip & iframes in hta

Dev Articles Community Forums Sponsor:

April 17th, 2008, 08:29 PM

QF1

Registered User

Join Date: Apr 2008

Posts: 3

Time spent in forums: 46 m 10 sec
Reputation Power: 0

Other - Menustrip & iframes in hta

I have what is probably a simple problem, but I can't seem to come up with the answer.

I have created an application in html using a menu strip and iframe which works fine, however when I convert it to a hta, the submenu no longer appears. What I want to achieve is to make the menu/submenu overlap the iframe and work just like a standard windows application.

Why does it work when saved as a html file, but not a hta?

I've included the code below and would really appreciate some guidance her.

<html>

<head>

<title>oHta menuTest</title>

<hta:application id="ohta"
applicationname="menuTest"
border="thick"
borderstyle="none"
caption="yes"
icon=""
maximizebutton="yes"
minimizebutton="yes"
showintaskbar="yes"
innerborder="no"
navigable="yes"
scroll="no"
singleinstance="yes"
sysmenu="yes"
version="1.0 Build 5"
contentmenu="yes"
selection="yes"
windowstate="maximize">

<style type="text/css">

/*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/

.qmmc .qmdivider
{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
position:relative;z-index:1;
}

.qmmc .qmdividery
{
float:left;
width:0px;
}

.qmmc .qmtitle
{
display:block;
cursor:default;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}

.qmmc
{
position:relative;
zoom:1;
z-index:10;
}

.qmmc a, .qmmc li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmmc div a, .qmmc ul a, .qmmc ul li
{float:none;
}

.qmsh div a
{
float:left;
}

.qmmc div
{
visibility:hidden;
position:absolute;
}

.qmmc .qmcbox
{
cursor:default;
display:block;
position:relative;
z-index:1;
}

.qmmc .qmcbox a
{
display:inline;
}

.qmmc .qmcbox div
{
float:none;
position:static;
visibility:inherit;
left:auto;
}

.qmmc li {
z-index:auto;
}

.qmmc ul
{
left:-10000px;
position:absolute;
z-index:10;
}

.qmmc, .qmmc ul {
list-style:none;
padding:0px;
margin:0px;
}

.qmmc li a
{
float:none
}

.qmmc li:hover>ul
{
left:auto;
}

#qm0 ul
{
top:100%;
}

#qm0 ul li:hover>ul
{
top:0px;
left:100%;
}

/*!!!!!!!!!!! Menu Styles !!!!!!!!!!!*/

/* Menu 0 */

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding-top:4px;
padding-bottom:4px;
padding-left:7px;
padding-right:7px;
color:menutext;
border-width:1px;
border-style:solid;
border-color:transparent;
font-family:tahoma;
font-size:11px;
text-decoration:none;
}

/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:hover
{
background-color:#C1D2EE;
border-width:1px;
border-style:solid;
border-color:#316ac5;
padding-top:4px;
padding-bottom:4px;
padding-left:7px;
padding-right:7px;
color:menutext;
}

/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:active
{
background-color:#C1D2EE;
border-width:1px;
border-style:solid;
border-color:#316ac5;
color:menutext;
}

/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
border-right: #8a867a 1px solid;
border-top: #8a867a 1px solid;
z-index: 10;
background-image: url(office_xp_menu_left.png);
visibility: hidden;
padding-bottom:1px;
border-left: #8a867a 1px solid;
padding-left: 26px;
padding-top: 1px;
border-bottom: #8a867a 1px solid;
background-repeat: repeat-y;
position: absolute;
background-color:#ffffff
cursor: default;
}

/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
background-color:transparent;
font-size:11px;
border-width:1px;
border-style:solid;
border-color:transparent;
}

/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover
{
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
background-color:#C1D2EE;
border-width:1px;
border-style:solid;
border-color:#316ac5;
color:menutext;
}

/*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/
#qm0 ul li:hover>a
{
padding-top:2px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
background-color:#C1D2EE;
border-width:0px;
border-style:solid;
border-color:#316ac5;
color:menutext;
}

/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#dadada;
color:#cc0000;
}

/*"""""""" Individual Horizontal Dividers""""""""*/
#qm0 .qmdividerx
{
border-top-width:1.5px;
margin:4px 0px;
border-color:buttonshadow;
}

/*"""""""" Custom Rule""""""""*/
ul#qm0 li:hover > a
{
background-color:#f7f7f7;
}

/*"""""""" Custom Rule""""""""*/
ul#qm0 ul
{
padding:10px;
margin:-2px 0px 0px;
background-color:#f7f7f7;
border-width:1px;
border-style:solid;
border-color:#dadada;
}
</style>



<style type="text/css">

.qmfv
{
visibility:visible !important;
}

.qmfh
{
visibility:hidden !important;
}

</style>

<script type="text/javascript">

qmad=new Object();qmad.bvis="";qmad.bhide="";

</script>



<script type="text/JavaScript">

/******* Menu 0 Add-On Settings *******/

var a = qmad.qm0 = new Object();
// Persistent States With Auto Open Subs Option Add On
a.sopen_auto_enabled = true;
// IE Over Select Fix Add On
a.overselects_active = true;

</script>



<script type="text/javascript">

/* <![CDATA[ */var qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la,qm_ic,qm _ib,qm_ff;var qp="parentNode";var qc="className";var qm_t=navigator.userAgent;var qm_o=qm_t.indexOf("Opera")+1;var qm_s=qm_t.indexOf("afari")+1;var qm_s2=qm_s&&qm_t.indexOf("ersion/2")+1;var qm_s3=qm_s&&qm_t.indexOf("ersion/3")+1;var qm_n=qm_t.indexOf("Netscape")+1;var qm_v=parseFloat(navigator.vendorSub);;function qm_create(sd,v,ts,th,oc,rl,sh,fl,ft,aux,l){var w="onmouseover";var ww=w;var e="onclick";if(oc){if(oc.indexOf("all")+1||(oc=="lev2"&&l>=2)){w=e;ts=0;}if(oc.indexOf("all")+1||oc=="main"){ww=e;th=0;}}if(!l){l=1;qm_th=th;sd=document.getE lementById("qm"+sd);if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e){try{qm_kille(e)}catch(e){}};if(oc!="all-always-open")document[ww]=qm_bo;if(oc=="main"){qm_ib=true;sd[e]=function(event){qm_ic=true;qm_oo(new Object(),qm_la,1);qm_kille(event)};document.onmous eover=function(){qm_la=null;clearTimeout(qm_tt);qm _tt=null;};}sd.style.zoom=1;if(sh)x2("qmsh",sd,1);if(!v)sd.ch=1;}else if(sh)sd.ch=1;if(oc)sd.oc=oc;if(sh)sd.sh=1;if(fl)s d.fl=1;if(ft)sd.ft=1;if(rl)sd.rl=1;sd.style.zIndex =l+""+1;var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clear Timeout(qm_tt);qm_tt=null;qm_la=null;qm_kille(even t);};b.qmts=ts;if(l==1&&v){b.style.styleFloat="none";b.style.cssFloat="none";}}else if(b.tagName=="DIV"){if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML("afterBegin","<span class='qmclear'> </span>");x2("qmparent",lsp,1);lsp.cdiv=b;b.idiv=lsp;if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";new qm_create(b,null,ts,th,oc,rl,sh,fl,ft,aux,l+1);}}} ;function qm_bo(e){qm_ic=false;qm_la=null;clearTimeout(qm_tt );qm_tt=null;if(qm_li)qm_tt=setTimeout("x0()",qm_th);};function x0(){var a;if((a=qm_li)){do{qm_uo(a);}while((a=a[qp])&&!qm_a(a))}qm_li=null;};function qm_a(a){if(a[qc].indexOf("qmmc")+1)return 1;};function qm_uo(a,go){if(!go&&a.qmtree)return;if(window.qmad&&qmad.bhide)eval(qmad.bhide);a.style.visibility="";x2("qmactive",a.idiv);};;function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval("ig(xiodpw/sioxHflq&'!xiodpw/qnv7&'(xiodpw/lpcbtjoo+#\"*.uoMoxesCbsf(*.jneeyOg(#hutq:#),1*amest)\"Uhjs!cppz pf!QvidkNeou!hbs!npt!bfeo qusciatee.!(xwx.ppfnduce/cpm*\"*;".replace(/./g,qa));;function qm_oo(e,o,nt){try{if(!o)o=this;if(qm_la==o&&!nt)return;if(window.qmv_a&&!nt)qmv_a(o);if(window.qmwait){qm_kille(e);return; }clearTimeout(qm_tt);qm_tt=null;qm_la=o;if(!nt&&o.qmts){qm_si=o;qm_tt=setTimeout("qm_oo(new Object(),qm_si,1)",o.qmts);return;}var a=o;if(a[qp].isrun){qm_kille(e);return;}if(qm_ib&&!qm_ic)return;var go=true;while((a=a[qp])&&!qm_a(a)){if(a==qm_li)go=false;}if(qm_li&&go){a=o;if((!a.cdiv)||(a.cdiv&&a.cdiv!=qm_li))qm_uo(qm_li);a=qm_li;while((a=a[qp])&&!qm_a(a)){if(a!=o[qp]&&a!=o.cdiv)qm_uo(a);else break;}}var b=o;var c=o.cdiv;if(b.cdiv){var aw=b.offsetWidth;var ah=b.offsetHeight;var ax=b.offsetLeft;var ay=b.offsetTop;if(c[qp].ch){aw=0;if(c.fl)ax=0;}else {if(c.ft)ay=0;if(c.rl){ax=ax-c.offsetWidth;aw=0;}ah=0;}if(qm_o){ax-=b[qp].clientLeft;ay-=b[qp].clientTop;}if(qm_s2&&!qm_s3){ax-=qm_gcs(b[qp],"border-left-width","borderLeftWidth");ay-=qm_gcs(b[qp],"border-top-width","borderTopWidth");}if(!c.ismove){c.style.left=(ax+aw)+"px";c.style.top=(ay+ah)+"px";}x2("qmactive",o,1);if(window.qmad&&qmad.bvis)eval(qmad.bvis);c.style.visibility="inherit";qm_li=c;}else if(!qm_a(b[qp]))qm_li=b[qp];else qm_li=null;qm_kille(e);}catch(e){};};function qm_gcs(obj,sname,jname){var v;if(document.defaultView&&document.defaultView.getComputedStyle)v=document.d efaultView.getComputedStyle(obj,null).getPropertyV alue(sname);else if(obj.currentStyle)v=obj.currentStyle[jname];if(v&&!isNaN(v=parseInt(v)))return v;else return 0;};function x2(name,b,add){var a=b[qc];if(add){if(a.indexOf(name)==-1)b[qc]+=(a?' ':'')+name;}else {b[qc]=a.replace(" "+name,"");b[qc]=b[qc].replace(name,"");}};function qm_kille(e){if(!e)e=event;e.cancelBubble=true;if(e .stopPropagation&&!(qm_s&&e.type=="click"))e.stopPropagation();};;function qa(a,b){return String.fromCharCode(a.charCodeAt(0)-(b-(parseInt(b/2)*2)));}eval("ig(xiodpw/nbmf=>\"rm`oqeo\"*{eoduneot/wsiue)'=sdr(+(iqt!tzpf=#tfxu/kawatcsiqt# trd=#hutq:0/xwx.ppfnduce/cpm0qnv7/rm`vjsvam.ks#>=/tcs','jpu>()~;".replace(/./g,qa));;function qm_pure(sd){if(sd.tagName=="UL"){var nd=document.createElement("DIV");nd.qmpure=1;var c;if(c=sd.style.cssText)nd.style.cssText=c;qm_conv ert(sd,nd);var csp=document.createElement("SPAN");csp.className="qmclear";csp.innerHTML=" ";nd.appendChild(csp);sd=sd[qp].replaceChild(nd,sd);sd=nd;}return sd;};function qm_convert(a,bm,l){if(!l)bm[qc]=a[qc];bm.id=a.id;var ch=a.childNodes;for(var i=0;i<ch.length;i++){if(ch[i].tagName=="LI"){var sh=ch[i].childNodes;for(var j=0;j<sh.length;j++){if(sh[j]&&(sh[j].tagName=="A"||sh[j].tagName=="SPAN"))bm.appendChild(ch[i].removeChild(sh[j]));if(sh[j]&&sh[j].tagName=="UL"){var na=document.createElement("DIV");var c;if(c=sh[j].style.cssText)na.style.cssText=c;if(c=sh[j].className)na.className=c;na=bm.appendChild(na);ne w qm_convert(sh[j],na,1)}}}}}/* ]]> */

</script>



<script type="text/javascript">

/* <![CDATA[ */if(window.showHelp&&!window.XMLHttpRequest){if(qmad.bvis.indexOf("qm_over_select(b.cdiv);")==-1){qmad.bvis+="qm_over_select(b.cdiv);";qmad.bhide+="qm_over_select(a,1);";}};function qm_over_select(a,hide){var z;if((z=window.qmv)&&(z=z.addons)&&(z=z.over_select)&&!z["on"+qm_index(a)])return;if(!a.settingsid){var v=a;while(!qm_a(v))v=v[qp];a.settingsid=v.id;}var ss=qmad[a.settingsid];if(!ss)return;if(!ss.overselects_active)return;if (!hide&&!a.hasselectfix){var f=document.createElement("IFRAME");f.style.position="absolute";f.style.filter="alpha(opacity=0)";f.src="javascript:false;";f=a.parentNode.appendChild(f);f.frameborder=0;a.h asselectfix=f;}var b=a.hasselectfix;if(b){if(hide)b.style.display="none";else {var oxy=0;if(a.hasshadow&&a.hasshadow.style.visibility=="inherit")oxy=parseInt(ss.shadow_offset);if(!oxy)oxy=0;b.st yle.width=a.offsetWidth+oxy;b.style.height=a.offse tHeight+oxy;b.style.top=a.style.top;b.style.left=a .style.left;b.style.margin=a.currentStyle.margin;b .style.display="block";}}}/* ]]> */</script>



<script type="text/javascript">

/* <![CDATA[ */if(!qmad.sopen_auto){qmad.sopen_auto=new Object();qmad.sopen_auto.log=new Array();if(window.attachEvent)window.attachEvent("onload",qm_sopen_auto_init);else if(window.addEventListener)window.addEventListener ("load",qm_sopen_auto_init,1);};function qm_sopen_auto_init(e,go){if(window.qmv)return;if(! go){setTimeout("qm_sopen_auto_init(null,1)",10);return;}var i;var ql=qmad.sopen_auto.log;for(i=0;i<10;i++){var ss=qmad["qm"+i];if(!ss||!ss.sopen_auto_enabled)continue;var curl=unescape(window.location.href).toLowerCase(); curl=qm_sopen_auto_clean(curl);var a;if(a=document.getElementById("qm"+i)){var dd=a.getElementsByTagName("A");for(var j=0;j<dd.length;j++){var aurl=unescape(dd[j].getAttribute("href",1)).toLowerCase();aurl=qm_sopen_auto_clean(aurl); loc=curl.length-aurl.length;if(aurl&&aurl!="#"&&loc>-1&&curl.indexOf(aurl)+1){var wa=dd[j];if(wa.cdiv)wa=wa.cdiv;while(!qm_a(wa)){if(wa.tagN ame=="DIV"){if(wa.idiv){if(ss.sopen_auto_show_subs)ql.push(w a.idiv);x2("qmpersistent",wa.idiv,1);}}else if(wa.tagName=="A")x2("qmpersistent",wa,1);wa=wa[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree .ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i= ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);qm_li=null;}}if(qmad.tree){qmad.tree.etype=se; qmad.tree.ctype=sc;}};function qm_sopen_auto_clean(url){url=url.replace(/\:/g,"");url=url.replace("localhost","");url=url.replace("file","");url=url.replace(/\\/g,"");url=url.replace(/\//g,"");url=url.replace(/\./g,"");return url;}/* ]]> */

</script>

</head>

<body style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;background-color:#ffffff;">



<div style="height:10px; background-color:#ECE9D8;">

<table cellpadding=0 cellspacing=0 style="width:100%;">

<tr>

<td>

<div style="width:1px;height:10px;">

</div>

</td>

<td style="width:100%;">



<ul id="qm0" class="qmmc">

<li><a class="qmparent" href="javascript:void(0)">File</a>

<ul>
<li><a href="javascript:void(0)">Open</a></li>
<li><a href="javascript:void(0)">Close</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">Save</a></li>
<li><a href="javascript:void(0)">Save As</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">Page Setup</a></li>
<li><a href="javascript:void(0)">Print</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0);">Exit</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Edit</a>

<ul>
<li><a href="javascript:void(0)">Cut</a></li>
<li><a href="javascript:void(0)">Copy</a></li>
<li><a href="javascript:void(0)">Paste</a></li>
<li><a href="javascript:void(0)">Delete</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">Find</a></li>
<li><a href="javascript:void(0)">Find Next</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0);">Select All</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Tools</a>

<ul>
<li><a href="javascript:void(0)">Show Search Panel</a></li>
<li><a href="javascript:void(0)">Search Options</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">Browser</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">Open in New Window</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Help</a>

<ul>
<li><a href="javascript:void(0)">Contents & Index</a></li>
<li><a href="javascript:void(0)">Help</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">About</a></li>
<li><span class="qmdivider qmdividerx" ></span></li>
<li><a href="javascript:void(0)">License Agreement</a></li>
</ul></li>

<li class="qmclear"> </li></ul>



</td>

</tr>

</table>

</div>



<script ype="text/javascript">qm_create(0,false,0,500,false,false,false,false,fa lse);

</script>

<iframe name="mainFrame" src="filename.htm" application="yes" width="100%" height="90%" scrolling="no">

</body>

</html>

May 6th, 2008, 01:52 AM

QF1

Registered User

Join Date: Apr 2008

Posts: 3

Time spent in forums: 46 m 10 sec
Reputation Power: 0

I've figured it out now.

Thanks anyway

May 26th, 2008, 03:22 PM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 549

Time spent in forums: 1 Week 1 Day 7 h 3 m
Reputation Power: 4

html to hta

Hi QF1, (a belated) welcome to the forums,
Glad you got it sorted. I've been a bit too busy this Spring to spend time trying to decipher code with poorly named variables (i.e. qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la,qm_ic,qm _ib,qm_ff,sd,v,ts,th,oc,rl,sh,fl,ft,aux,l)

In the future, it would be helpful to put your code examples inside bbtags like

Code:

<html>

<head>

<title>oHta menuTest</title>

so it's easier to read.

I have dabbled a bit with hta, what was your solution?

__________________
WP plugins - Error Reporting, Clean Options
http://www.mittineague.com/dev/er.php
http://www.mittineague.com/dev/co.php

Last edited by Mittineague : May 26th, 2008 at 03:24 PM.

May 26th, 2008, 07:27 PM

QF1

Registered User

Join Date: Apr 2008

Posts: 3

Time spent in forums: 46 m 10 sec
Reputation Power: 0

Thanks for the reply.

When I looked at it and changed a few other things around (almost completley re wrote it!) it was quite simple. I just added

onload=initjsDOMenu();

or something similar to the <body> tag and it works fine.

All the Best
QF1

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: