listen > understand > code > teach

Flexibly titled pop-up windows

Here's a tip to add to the previous articles here about pop-up windows. When you invoke a pop-up with Javascript, the window is automatically given a title which is the URL of the page it is viewing. But often one wants a simpler title like, say, "Play audio", instead of the URL of the audio file. What to do?

An easy solution I found was to put the file within its own Javascript IFrame(). That way, the invisible title of the IFrame is the file URL, while the window can have whatever title one sets.

Here's the sample Javascript code:

if (Drupal.jsEnabled) {
        $(document).ready(function(){
                $("a.popup-link").click(function() {
                        newwindow2=window.open('','myPopup','height=100,width=400');
                        if (window.focus) {newwindow2.focus()}
                        var tmp = newwindow2.document;
                        tmp.write('<html><head><title>Play audio</title>');
                        tmp.write('<link rel="stylesheet" href="js.css">');
                        tmp.write('</head><body>');
                        tmp.write('<iframe src=',this.href,' width="100%" height="100%"> </iframe>')
                        tmp.write('</body></html>');
                        tmp.close();
                        return false;
                });
        });
};

If you are having trouble placing this code, see the earlier article for a more complete explanation.

The tradeoff here is that the IFrame appears within a sunken border, but it was great for my purposes. Here's my final result:

playaudio.jpg

Drupal SEO