How to automate blockui dialog in accessible visible area using jQuery?

Question

I need to resize the div shown as a message in the block module so that it fills the visible area of ​​the screen less than some hard-coded fiction coefficient (so they say width is 100). The premise is that I can show a smaller image on the screen, but if the user needs a larger image, I just show them that the block size ui depends on the size of the screen.

The image is dynamically generated, so it can be configured for any measurements transferred to it from the application.

I looked and found code to center the div. I am working on this, so if I find an answer, I will post it here (provided that it does not replicate any elses answer!)

Here's a very simple html snippet for marking up a call:

<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 is 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 am using jQuery, here is the current code that 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 also need to figure out how to set popupcontent height for auto-fill (I use ems in my css), but I'm not sure if this is a separate question :).

Thanks:)

Answer 1

Now it works for me. I used window width and height methods as described above. The code assumes some fudge numbers to make it work :).

Please note that I am clamping the maximum width and height. Something that I am going to switch to generating a dynamic image, so I do not consume too many resources.

, , , .

    $("#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

, .

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