Display hidden div as content in new window

Question

I am trying to mirror the functionality of the video player on this page, when you click View a Product Demonstration. It pops up with a new window (not a new tab) where scrolling is disabled and a size is defined. It is important that my pop-up has this too. A dialog box won't work.

The video I'm using is a YouTube video; I can make the video pop-up by itself from clicking a link on a page. However, I need to also be able to display other content in the pop-up (images + text) window.

I am new to jQuery so I don't know the best approach to achieve this. My first thought was that I could put everything in a hidden div, and then make that content display in a new window when an element is clicked, and apply css with the jQuery when clicked to make it display properly.

After researching on SO, I found this, which sort of works. The problem is that it opens in a new tab, not a new window, and the CSS is lost in the new tab (which I can fix with inline styles, not ideal but I can live with it). I could use this if I could make it a new window instead of tab. Here is my code in a fiddle and here it is below:

<script type="text/javascript">
    function printClick() {
        var w = window.open();
        var html = $("#video-container").html();
        $(w.document.body).html(html);
    }

    $(function() {
        $("a#video-link").click(printClick);

    });
</script>

and then:

<div id="product-description">
    <a href="#" id="video-link">
    <img src="cookware-product-demonstration-video.png" alt="View Product Demonstration Video" width="355" height="55" style="padding: 0px 0px 10px 0px;" border="0" />
    </a>
</div>
<div id="video-container" style="display: none;>
    <div id="video" style="width: 600px; position: relative; margin: 0px auto;">
        <div id="video-header">
            <img src="logo.gif" height="30" width="120" alt="Company Logo" style="float: left;"/>
            <p style="float: right">Product Demonstration Video</p>
        </div>
        <iframe width="600" height="338" src="http://www.youtube.com/embed/yeuCLMppZzc?rel=0"  frameborder="0" allowfullscreen></iframe>
    </div>
</div>

But, is this really the best approach? I feel like there must be a better way to do this. I found a few posts where target="_blank" is added to the href (example here), but since I'm not opening a URL this hasn't worked for me so far.

Any help or advice on how to do this is appreciated. Thank you so much.

Answer 1

What you could do is use a querystring.

Using the function from How can I get query string values in JavaScript?, have the following on another page:

JAVASCRIPT:

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(document).ready(function(){
    var width = 400,
    height = 300;

    //I've constructed it like this to prevent possible embedding errors

   var vid = 'http://www.youtube.com/v/' + getParameterByName("test");
   $('<object width="' + width + '" height="' + height + '">' +
   '<param name="movie" value="' + vid + '" />' +
   '<param name="allowFullScreen" value="true" />' +
   '<param name="allowscriptaccess" value="always" />' +
   '<param name="wmode" value="opaque">' +
   '<embed src="' + vid + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" /></object>')
   .appendTo($('#div1')); 
});

Example of Page 1: http://fiddle.jshell.net/dirtyd77/rmEvY/5/

Then on another page, use the following:

JAVASCRIPT:

$(document).ready(function(){
    $("#b1").click(function(){
       var url = 'http://fiddle.jshell.net/dirtyd77/rmEvY/5/show/?test=yeuCLMppZzc';
       window.open(url, '_blank', "height=400,width=450");  //set height and width to make new window
    });
});

DEMO: http://jsfiddle.net/dirtyd77/tVEBj/1/

Here is a demo of the final product: http://fiddle.jshell.net/dirtyd77/tVEBj/1/show/

This is how I would possibly go about it, but it is by no means the best way to. Hopefully this is what you are looking for. Let me know if you have any questions! Good luck!

---

EDIT:

After some tinkering, I found a way to do this in one page.

Try something like this:

$(document).ready(function(){
    $("#b1").click(function(){
        var win = window.open('', '_blank', "height=400,width=450");
        var width = 400,
        height = 300,
        vid='http://www.youtube.com/v/yeuCLMppZzc';
        var obj = '<object width="' + width + '" height="' + height + '">' +
                            '<param name="movie" value="' + vid + '" />' +
                            '<param name="allowFullScreen" value="true" />' +
                            '<param name="allowscriptaccess" value="always" />' +
                            '<param name="wmode" value="opaque">' +
                            '<embed src="' + vid + '" type="application/x-shockwave-flash" width="' + width + '" height="' + height + '" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" /></object>';
        win.document.write(obj);
    });
});

DEMO:

http://fiddle.jshell.net/tVEBj/6/