Question

so we all know that fancybox have resize functionality and thats great,
but if the content is larger than your screen it will resize as well and you have to scroll down with you browser scroll bars, not with fancybox scroll bars.

To resize without fast clutter I do like this.

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('MyTagValue').fancybox(
        {
            'titlePosition' : 'inside',
            'transitionIn'  : 'fade',
            'transitionOut' : 'fade',
            'onStart' : function()
            { 
                $('#MyTagStyle').css(
                {
                    marginLeft: '-10000px'
                }); 
            }, 
            'onComplete' : function()
            { 
                $.fancybox.resize(); 
                $('#MyTagStyle').css(
                {
                    marginLeft: '0px'
                }); 
            }  
        });
    });
</script>

so my question is how to resize within your browser screen, or no more than a specific value, f.ex I want to autoresize, BUT no more than width: 800px; and height: 900px;

to illustrate what I have now, and what I want to achieve, here is some screens:

Current:

Wanted:

Any ideas?

Answer 1

Solved this problem by editing MyTagStyle:

.MyTagStyle
{
    max-height:600px;
    max-width:940px;
    overflow:auto;
}