[SOLVED] [JavaScript] Bootstrap/jQuery Custom Modal Scripting

[AoN]

So, as yall know, I try not to make posts for help, especially since I'm supposed to be the Internet programmer, but some things just take up too much time more me (want) to solve. I created a StackOverflow (I swore I'd never use it, but I did) and never got a response. Updated a week in, now nearly two, and still nothing. Posted up on TSF, though I don't honestly expect any help there for this sort of issue. As such, to save myself some time, I basically just copied and pasted the post from TSF.

Basic idea of what I'm trying to do: Place GoogleDocs Viewer (GDV) inside Bootstrap modal, hiding the controlbar from the GDV, while centering the modal on the page without losing the inherent responsiveness expected from Bootstrap.

I've got everything working, just not 100% together. Centering the modal was easy. Doing the <IFRAME> while hiding the controlbar was easy. Making it responsive, took me about 10 days of rewrite after rewrite to make it work, is good. Putting it all together, not so much. The problem is with applying the responsive sizing when the screen is sized that the width dictates the sizes of everything else.

Rather than fill this post with the code, I just created a JSFiddle of the code in action: Edit fiddle - JSFiddle

I know the problem is showhow caused by the line

modalMarginTop = (windowY - modalY) / 2;

So long as I specify a fixed value, it gives no problems, but it should be calculated the same way as the modalMarginLeft value is when the sizing is controlled vertically, except for the y-axis instead of the x.

If you remove the last two lines of the function, which set the margins, you can see that the responsiveness works perfectly. Put the margin-left back in and it still works great. It's just the margin-top during height is determined by the width.

Let me know if yall have any ideas. I don't have a clue on how else I could go about rewriting the function, and this is the closest to 100% functional as I've gotten, so it's probably the most broken. ^^'

 

[AoN]

I fixed it myself. Took me a while to figure out the problem was at the beginning of the function, not half-way through or towards the end.

It turns out the issue is with the definition of the "outerModalPadding" variable. Previously, I had it set to pull the value from the CSS, which worked great, until the width of the page fell below 768px. I tried to simply remove the resolution constraint on the CSS that defined this value, but that made no difference.

In the end, I just defined the fixed value in the jQuery.

Here's the working function:

    $(document).ready(function() {
     $('iframe').each(function() {
      if($(this).hasClass('google')) {
       $(this).wrap('<div class="googleDIV"></div>');
      }
     });
     function resizeModal() {
      $(this).css('display', 'block');
      var modal = $(this).find('.modal-dialog');
      var header = $(this).find('.modal-header');
      var content = $(this).find('iframe');
      var modalBody = $(this).find('.modal-body');
    
      var outerModalPadding = 10;
      var innerModalPadding = 15;
      var defaultContentWidth = 600;
      var defaultContentHeight = 768;
      var googleControlbarHeight = 37;
      var defaultBodyWidth = defaultContentWidth + (innerModalPadding * 2)
      var defaultBodyHeight = defaultContentHeight - googleControlbarHeight + (innerModalPadding * 2);
      var headerY = header.height() + (innerModalPadding * 2) + parseInt(header.css('border-top')) + parseInt(header.css('border-bottom'));
      var defaultModalWidth = defaultBodyWidth;
      var defaultModalHeight = headerY + defaultBodyHeight;
      var defaultScreenWidth = defaultModalWidth + (outerModalPadding * 2);
      var defaultScreenHeight = defaultModalHeight + (outerModalPadding * 2);
    
      var windowX = $(window).width();
      var windowY = $(window).height();
      var bodyPX = parseInt(modalBody.css('padding-left')) + parseInt(modalBody.css('padding-right'));
      var bodyPY = parseInt(modalBody.css('padding-top')) + parseInt(modalBody.css('padding-bottom'));
    
      if((windowX / windowY) > (defaultScreenWidth / defaultScreenHeight))
      {
       modalY = windowY - (outerModalPadding * 2);
       modalX = (modalY * defaultModalWidth) / defaultModalHeight;
       modalMarginTop = outerModalPadding;
       modalMarginLeft = (windowX - modalX) / 2;
      }
      else
      {
       modalX = windowX - (outerModalPadding * 2);
       modalY = (modalX * defaultModalHeight) / defaultModalWidth;
       modalMarginTop = (windowY - modalY) / 2;
       modalMarginLeft = outerModalPadding;
      }
      bodyY = modalY - headerY;
      bodyX = modalX;
      contentY = bodyY + googleControlbarHeight - (innerModalPadding * 2);
      contentX = bodyX - (innerModalPadding * 2);
    
      content.css({width: contentX, height: contentY});
      modalBody.css({width: bodyX, height: bodyY});
      modal.css({width: modalX, height: modalY, 'margin-top': modalMarginTop, 'margin-left': modalMarginLeft});
     }
     $('.modal').on('show.bs.modal', resizeModal);
     $(window).resize(function resize() {
      $('.modal:visible').each(resizeModal);
     });
    });

It can be found working at: Edit fiddle - JSFiddle

If I find myself feeling the urge to do so, I'll revamp it so the Google controlbar removal is optional, likely through another class, but that's for another day.