How do I autosize a blockui dialog to the available visible area with JQuery?

Question

I need to resize a div shown as a message in blockUI so that it fills the visible screen area less some hardcoded fudge factor (so width - 100 say). The premise is that I can show a smaller image on the screen but if the user needs an enlarged image then I just show them block ui dialog sized to their screen.

The image is dynamically generated so can be sized to whatever dimensions are passed to it from the application.

I've looked and have only found code for centering a div. I'm working on this so if I find an answer I'll post it here (assuming it doesn't replicate anyone elses answers!)

Here's a very simple html snippet for the calling markup:

<div>
   <img src="someurl" class="image" height="280px" width="452px" alt="" />
</div>
<div style="text-align: right;">
   <a href="#viewpopup" id="viewpopup">View larger map</a>
</div>

And here's the popup markup

<div id="popup">
   <div class="titlebar">
      <div class="title left">Map details</div>
      <div class="closebuttons right"><a class="close">x</a></div>
      <div class="clearer"></div>
   </div>
   <div class="popupcontent">
   <!-- auto append content here --> 
   </div>
   <div class="buttonbar">
      <a class="close">Close</a>
   </div>
</div>

I'm using JQuery, here's the current code I have:

var popup = $("#popup");
var popupcontent = popup.children(".popupcontent");
var image = $(".image");
$(document).ready(function(){
    $("#viewpopup").click(function(){
        // Fudged indent on the top left corner
        var top = 20;
        var left = 20;

        // Dynamically set the contents
        // popupcontent.empty();
        // popupcontent.append();
        $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left   } });

    });

    $(".close").live("click",function(){
        $.unblockUI();
    });
});

I've also got to figure out how to set the popupcontent height to auto fill the currently available space (I'm using ems in my css) but I'm unsure if that's a separate question :).

Thanks :)

Answer 1

I've got it working now. I've used the window width and height methods as described above. The code assumes some fudge numbers purely to make it work :).

Note that I'm clamping the maximum width and height. Something that I'm going to move to my dynamic image generation so I don't consume too many resources.

Also note I've not included the code to pass the new dimensions to the dynamic image app, I figured that would be custom to each individual implementation.

    $("#viewmap").click(function(){
        var width = $(window).width();
        if(width < 200)
            width = 200;
        if(width > 1200)
            width = 1200;

        var height = $(window).height();
        if(height < 200)
            height = 200;
        if(height > 800)
            height = 800;

        var popupwidth = $(window).width() - 100;
        var popupheight = $(window).height() - 100;
        var top = 20;
        var left = (width - popupwidth) / 2 ;
        popup.css("width", popupwidth);
        popup.css("height", popupheight);
        popupcontent.css("height", popupheight - 40) ;

        popupcontent.empty();
        popupcontent.append("<img src=\"someurl\" width=\""+ popupwidth + "\" height=\""+ (popupheight - 40) +"\" />");
        $.blockUI({ message: popup, css : { border : 'none', height: 'auto', 'cursor': 'auto', 'width': 'auto', 'top': top, 'left' : left   } });

    });

Answer 2

You will only be able to size the dialog to the size of the window not the screen.

$(window).width(); $(window).height();