# Interesting post on getting Mozilla XUL running inside Internet Explorer by Jean-Yves Cronier ## Interesting post on getting Mozilla XUL running inside Internet Explorer by Jean-Yves Cronier posted on Sunday, September 12, 2004 11:46 AM Let the crossover continue!  Jean-Yves Cronier left [a comment](/archive/2003/11/23/648.aspx) on my [old post about HTC inside Mozilla](/archive/2003/11/23/648.aspx), he points to a post he left in the [XULPlanet forum](http://xulplanet.com/forum/viewtopic.php?t=1038) showing a technique to get [XUL behaviours](http://xulplanet.com/tutorials/whyxul.html) running inside of Internet Explorer using a simple HTC behaviour as a sort of interface layer. This is again, pretty cool - and would be even cooler if it could be extended to allow complete translation between all IE HTC behaviours and their XUL equivalent! Anyway, since this is posted on a forum I know nothing abot, I'll repeat the post here: I've reflected on possibilities offered by famous behavior HTC under IE. I think it would be perhaps possible to interpret a small part of specifications of XUL. A little sample: index.xul : | | | --- | | **Code:** | | <?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="xul.css" media="all"?>
<window id="example-window" title="Example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label control="some-text" value="Enter some text"/>
<textbox id="some-text" value="toto"/>
<label control="some-password" value="Enter a password"/>
<textbox id="some-password" type="password" maxlength="8"/>
<menulist label="Bus">
  <menupopup>
    <menuitem label="Car"/>
    <menuitem label="Taxi"/>
    <menuitem label="Bus" selected="true"/>
    <menuitem label="Train"/>
  </menupopup>
</menulist>
</window> | xul.css : | | | --- | | **Code:** | | label{behavior:url(label.htc)}
menuitem{behavior:url(menuitem.htc)}
menulist{behavior:url(menulist.htc)}
menupopup{behavior:url(menupopup.htc)}
textbox{behavior:url(textbox.htc)}
window{behavior:url(window.htc)} | label.htc : | | | --- | | **Code:** | | <public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="value" />
<script type="text/javascript">
function build(){this.innerHTML=this.value;}
</script>
</public:htc> | menuitem.htc : | | | --- | | **Code:** | | <public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<public:property name="label" />
<public:property name="value" />
<script type="text/javascript">
function build() {
   var option = document.createElement("option");
   var style=this.currentStyle;
   option.setAttribute("id",id);
   if(this.id!=null){option.setAttribute("id",this.id);}
   if(this.value!=null){option.setAttribute("value",this.value);}
   if(label!=null){option.innerHTML=label;}
   for(var prop in style){option.style[prop]=style[prop];}
   this.outerHTML=option.outerHTML;
}
</script>
</public:htc> | menulist.htc : | | | --- | | **Code:** | | <public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<script type="text/javascript">
function build() {
   var select = document.createElement("select");
   var style=this.currentStyle;
   select.setAttribute("id",id);
   if(id!=null){
      select.setAttribute("id",this.id);
      select.setAttribute("name",this.id);
   }
   select.innerHTML=this.innerHTML;
   for(var prop in style){
      select.style[prop]=style[prop];
   }
   select.style.width="100%";
   this.outerHTML=select.outerHTML;
}
</script>
</public:htc> | menupopup.htc : | | | --- | | **Code:** | | <public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<public:property name="label" />
<public:property name="value" />
<script type="text/javascript">
function build() {
   var optgroup = document.createElement("optgroup");
   var style=this.currentStyle;
   if(this.id!=null){optgroup.setAttribute("id",this.id);}
   if(this.label!=null){optgroup.innerHTML=this.label;}
   optgroup.innerHTML=this.innerHTML;
   for(var prop in style){optgroup.style[prop]=style[prop];}
   this.outerHTML=optgroup.outerHTML;
}
</script>
</public:htc> | textbox.htc : | | | --- | | **Code:** | | <public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="id" />
<public:property name="value" />
<public:property name="type" />
<public:property name="maxlength" />
<script type="text/javascript">
function build() {
   var input = document.createElement("input");
   var style=this.currentStyle;
   input.setAttribute("id",id);
   if(value!=null){input.setAttribute("value",value);}
   if(type!=null){input.setAttribute("type",type);}
   if(maxlength!=null){input.setAttribute("maxlength",maxlength);}
   for(var prop in style){input.style[prop]=style[prop];}
   input.style.width="100%";
   input.style.cursor="text";
   input.style.borderStyle="inset";
   input.style.borderColor="ActiveBorder";
   input.style.borderWidth="2px";
   input.style.backgroundColor="#FFFFFF";
   input.style.paddingLeft="2px";
   this.outerHTML=input.outerHTML;
}
</script>
</public:htc> | window.htc : | | | --- | | **Code:** | | <public:htc urn="window">
<public:attach event="ondocumentready" handler="build" />
<public:property name="title" />
<script type="text/javascript">
function build(){window.status=this.title;}
</script>
</public:htc> | It's Funny ! Is'nt it ? ![Very Happy](http://xulplanet.com/forum/images/smiles/icon_biggrin.gif) The goal of a project like this on isn't to rise Internet Explorer but just to show a little overview to other ones (who haven't got Mozilla Web Browser) the technologies available with Mozilla Framework