I'm sure someone's done this before, but I'm working on making a fairly robust php xsl templating library. It's based on the php xsl extension, but I do some preprocessing of the xsl template so that I can have essentially "tag libraries" ala java. My pages are starting to look like jsp 2.0 xml pages (which I happen to really like). I'm now creating tags like this:

<lgt:input name="address" title="Address 1:" />

On the backend it's just translating these into xsl:call-template calls. It's the model of simplicity, and really removes my big beef with xml templating. Then I'm planning on using the registerPhpFunctions function of the xsl library to load in the new 'filter_data' extension. Fields such as my input tag above will call filter_data to help reduce the risk of cross-site scripting. I think with a good enough tag library this could really be a simple and elegant templating language that could easily be ported to java. Alas filter_data is not yet out in a production php version. I might have to hack together a placeholder for now.

Now I just need to convert my architecture to easily serialize my data to xml.

    private String[] getExtendedPath(HttpServletRequest request) {
        String uri = request.getRequestURI();
        uri = uri.replaceFirst(request.getContextPath(), "");
        uri = uri.replaceFirst(request.getServletPath() + "/", "");
        return uri.split("/");
    }

To Dump an SSL cert:

openssl s_client -connect hostname.com:443

To import it into Java's keystore:

keytool -import -alias serverCert -file diva.cer   -keystore /usr/local/java/jre/lib/security/cacerts

The default password is 'changeit'

Note: While this article is under the Creative Commons license at the bottom of this page, the actual technique and code is released into the public domain. Please do with it whatever you wish (including using it in commercial products).

So debugging JavasSript in Internet Explorer has been a pain for quite a while. The tried and true method is to riddle to your code with alerts. This works well enough unless you're trying to figure out a sticky problem in a loop or with a mouseover.

I figured why not build a simple DHTML logger that could be easily included into a page and that would take care of popping up an absolute positioned logging div at the bottom of the page. Now all I need to do is include my .js file, and put in statements like this:

log("This is a debug statement");

I've create an example page and the actual javascript library you can download.

Further work to do:

• It would be nice if the logger could dump out the values of complex objects ala perl's Data::Dumper

The Problem

The Suckerfish Dropdowns were originally described on A List Apart. They're great cross-browser drop-down menus that are implemented entirely in CSS. Unless of course your site needed to support Internet Explorer. To do so a small javascript hack was added. These menus looked great, required little code, and were fast. The problem occured when you put a menu on the same page as a form select. When the drop down covered the select in Internet Explorer, it suddenly hid behind it. An example can be found here:

The Solution

The Technique

Let's say for example that there is a select in a form that we want to cover up with a warning message under certain conditions. In mozilla just a little positioning and the proper z-index value will allow the warning message to cover the select. In Internet Explorer the select shows through.

The traditional answer to this problem was to set visibility to hidden on the select when we wanted to cover it with the div. The problem occurs when the div doesn't completely cover the select. Suddenly your users have disappearing elements.

Before:

After:

It doesn't take the most astute user to wonder where the select just disappeared to, and it completely destroys the illusion that the Danger message is popping up on top of the select. Additionally if your site has a lot of forms you'll end up having custom javascript on every page to hide and unhide form elements which has the tendency to break.

The iframe is the one element that internet explorer respects as covering all elements. So all we have to do is add an iframe with the exact same dimensions as our warning popup and put it's z-index just under the div.

So that's an elegant solution to the problem.

Adding to the Suckerfish Dropdowns

So how do we add this to the suckerfish dropdowns? First we add our iframe line, just below the bottom of our menu definition:

            <li><a href="">Slender suckerfish</a></li>
        </ul>
    </li>

</ul>
<iframe id="menu_iframe" scrolling="no" frameborder="0"></iframe>

Well, now we have a big ugly iframe in the middle of the page. Let's go ahead and style that ID. We'll give it a z-index of 10. And hide it for the time being.

#menu_iframe {
    z-index: 10;
    position: absolute;
    display: none;
}

Much better our page now looks normal. Now all we need to do is add the JavaScript code that will put the iframe behind our menus.

sfHover = function() {
  if(document.getElementById("nav")) {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
        this.className+=" over";

        if(document.getElementById("menu_iframe")) {
          var iframe = document.getElementById("menu_iframe");

          var submenu = this.getElementsByTagName("UL");
          if(submenu.length) {
            iframe.style.top = submenu[0].offsetTop + this.offsetTop;
            iframe.style.left = submenu[0].offsetLeft + this.offsetLeft;
            iframe.style.width = submenu[0].scrollWidth;
            iframe.style.height = submenu[0].clientHeight;
            iframe.style.display = "inline";
          }
        }

      }
      sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" over\\b"), "");

        if(document.getElementById("menu_iframe")) {
          var iframe = document.getElementById("menu_iframe");
          iframe.style.display = "none";
        }

      }
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

On mouse over we move the iframe to cover our menu. But the onmouseover event is happening on our title. So we need to get the submenu for the current menu (I leave it to you, the reader, to implement sub-sub menus):

var submenu = this.getElementsByTagName("UL");

If the submenu has length (i.e. has items) we go ahead and find the size of the menu. Internet Explorer has many properties that describe the size of a block element. You can find out more in Microsoft's article Measuring Element Dimension and Location. All we do is use these properties to size the iframe to the exact size of the submenu.

iframe.style.top = submenu[0].offsetTop + this.offsetTop;
iframe.style.left = submenu[0].offsetLeft + this.offsetLeft;
iframe.style.width = submenu[0].scrollWidth;
iframe.style.height = submenu[0].clientHeight;

Then we make the iframe visible.

iframe.style.display = "inline";

We also add the code to the onmouseout function to make the iframe invisible again.

iframe.style.display = "none";

And that's pretty much it. "Hold up", you say, "Now I just have a blank space where my menu once was. It is covering up the selects nicely though...". One last thing. We need to change the z-index of our submenu so that it will be on top of our iframe. All we need to do is change the style of our li tag.

li { /* all list items */
    float: left;
    position: relative;
    width: 10em;
    z-index: 20;
}

That's it. A simple solution that doesn't involve writing custom javascript for every page on your website. A modified version of the original page can be found below:

function popup {
    window.open('ad.html', 'ad_window', 'height=100,width=100,top=100,left=100,resizable=yes,status=no');
}

function popup {
    window.open('ad.html', 'ad_window_', 'height=100,width=100,top=100,left=100,resizable=yes,status=no');
}