A Pen by Kara Siegert

Thumbnail
This awesome code was written by dragonbridge, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dragonbridge ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Kara Siegert</title>
   <script type="text/javascript">
      // Store app settings here.
      var app = {};
    
      // Keep track of website preview toggle state.
      app.websitePreview = false;
    
      // Keep track of iframe loading.
      var ee = new EventEmitter();
    
      // Reloads the breakpoint animation.
      // NOTE we need to completely reload the creative (ISI widget doesn't return to original state otherwise).
      function refresh(selector) {
        var el = $(selector)[0];
        el.src = el.src;
      }
    
      // Standalone preview.
      function standalone(tab, bp) {
        var width = bp.width || window.innerWidth,
            height = bp.height || window.innerHeight;
        // Responsive dimensions.
        if (bp.dimensions) {
          // Get the ratio.
          var r = bp.width / bp.height;
    
          if (bp.dimensions.minWidth && width < bp.dimensions.minWidth) {
            width = bp.dimensions.minWidth;
            height = width / r;
          }
          if (bp.dimensions.minHeight && height < bp.dimensions.minHeight) {
            height = bp.dimensions.minHeight;
            width = height * r;
          }
          if (bp.dimensions.maxWidth && width > bp.dimensions.maxWidth) {
            width = bp.dimensions.maxWidth;
            height = width / r;
          }
          if (bp.dimensions.maxHeight && height > bp.dimensions.maxHeight) {
            height = bp.dimensions.maxHeight;
            width = height * r;
          }
        }
    
        var w = window.open([
          '/preview/?pageId=OC0AzGOMn3E&templateId=4890',
          'tab=res-preview-' + bp.name,
          'back=res-' + tab,
          'standalone=true'
        ].join('&'), bowser.msie && bowser.version <= 9 ? '' : bp.name, [ // will be overriden by <title>
          'toolbar=no',
          'location=no',
          'directories=no',
          'status=no',
          'menubar=no',
          'scrollbars=no',
          'resizable=yes',
          'chrome=no',
          'width=' + width,
          'height=' + height
        ].join(','));
    
        if (w === null || typeof w === 'undefined') {
          $('#popup').show();
        } else {
          $('#popup').hide();
        }
    
        return false;
      }
    
      function batch() {
        $('#overlay').addClass('show');
    
        // FLX-4816 Update all iframes (just in case they render into "0x0" size).
        $('.tab-pane:visible iframe[src]').each(function(i, el) {
          // IE9 doesn't support objects.
          if (!(bowser.msie && bowser.version <= 9)) {
            try {
              el.contentWindow.postMessage({
                action: 'update',
                width: el.offsetWidth,
                height: el.offsetHeight
              }, window.location);
            } catch(err) {
    
            }
          }
        });
    
        batchflow($('.tab-pane:visible iframe[data-src]').toArray())
        // FLX-4447 Load all iframes in batches of (up to) 5 or 1.
        .parallel(bowser.msie && bowser.version <= 9 ? 1 : 5)
        .each(function(i, el, done) {
          var iframe = $(el),
              src = iframe.attr('data-src'),
              name = iframe.attr('data-breakpoint'),
              loaded = false;
    
          // FLX-4816 Stop iframe loading if we navigate to a different tab.
          var cancel = function() {
            loaded = true;
            iframe.removeAttr('src').attr('data-src', src);
            done();
          };
          ee.addOnceListener('showBreakpoints', cancel);
    
          // Generic on load.
          var onLoad = function() {
            loaded = true;
            $(window).off('message', onMessage);
            ee.removeListener('showBreakpoints', cancel);
            iframe.closest('.ratio-slot').addClass('loaded');
            done();
          };
    
          // Filter for our "load" message.
          var onMessage = function(e) {
            var event = e.originalEvent;
            if (event.data !== 'load') return;
            if (event.source !== el.contentWindow) return;
            !loaded && onLoad();
          };
    
          // Old onload event.
          el.onload = function() {
            !loaded && onLoad();
          };
    
          // PostMessage API.
          $(window).on('message', onMessage);
    
          iframe
          // FLX-4741 Sized breakpoints.
          .attr('src', name ? src + '-/breakpoint/' + name : src)
          .removeAttr('data-src');
        })
        .end(function() {
          $('#overlay').removeClass('show');
        });
      };
    
      // Show/load breakpoints for a particular category.
      function showBreakpoints() {
        ee.emitEvent('showBreakpoints');
    
        // The selected categories.
        var args = [].concat.apply([], arguments);
    
        // The category counts.
        var cats = {"fix":{"size":{"all":7,"sel":7},"cats":{"inPage":{"all":7,"sel":7},"fullScreen":{"all":0,"sel":0},"social":{"all":0,"sel":0}}},"res":{"size":{"all":0,"sel":0},"cats":{"inPage":{"all":0,"sel":0},"fullScreen":{"all":0,"sel":0}}}};
    
        // Hide all panes and navbars.
        $('.tab-pane').hide();
        $('.nav-sub').hide();
        $('.nav-tab').removeClass('active');
        $('.tabs-container .navbar.nav-sub .actions').hide();
    
        // Find the largest category if not provided.
        if (!args.length) {
          args.unshift(['fix', 'res'][+(cats.res.size.sel > cats.fix.size.sel)]);
        }
    
        // Find the largest subcategory if not provided.
        if (args.length === 1) {
          // If it is fixed and we have website preview, show that.
          if (args[0] === 'fix' && app.websitePreview) {
            args = ['fix', 'inPage', 'webFit'];
          } else {
            var c = cats[args[0]].cats;
            args[1] = Object.keys(c).reduce(function(t, k) {
              return (c[k].sel > t[1]) ? [k, c[k].sel] : t;
            }, [null, -Infinity])[0];
          }
        }
    
        // Coming back from fixed size "full-screen" to "in-page" preview?
        if (args.length === 2 && args[0] === 'fixed' && args[1] === 'inPage' && app.websitePreview) {
          args.push('webFit');
        }
    
        // A category/tab ref.
        var catId = args.join('-');
    
        $('.app-wrapper').attr('class', ['app-wrapper', 'section-' + catId].join(' ')); // global class
        $(['.cat', args[0]].join('-')).addClass('active'); // category tab
        $(['.nav-sub.cat', args[0]].join('-')).show(); // show the subcategory
        $(['.nav-sub .cat', args[0], args[1]].join('-')).addClass('active'); // subcategory tab
    
        $('#pane-' + catId).show(); // pane with iframes
    
        // Can we change the URL?
        if ('history' in window && 'pushState' in history) {
          history.pushState({}, null, '');
        }
    
        // Reset the tab content height.
        $('.tab-content').css('maxHeight', 'none');
    
        // Show standalone for "All Active Breakpoints"?
        if (catId === 'res-all') {
          $('.tabs-container .navbar.nav-sub .actions').show();
        }
    
        // Prep the iframes in this pane for loading.
        var iframes = [];
        $('.tab-pane:visible iframe:not([data-src])').each(function(i, iframe) {
          // Already loaded?
          if (iframe.src.length) return;
          // Nein then.
          iframes.push(iframe);
          // To be batch loaded.
          var el = $(iframe);
          el.attr('data-src', 'https://app.flexitive.com/page/v2/OC0AzGOMn3E/').show();
        });
    
        // Start batch load.
        batch();
      }
    
      $(function() {
        // Hide overlay onclick.
        var note;
        (note = $('#overlay .note')).on('click', function() {
          note.remove();
        });
    
        // Show the first tab content.
        showBreakpoints.apply(null, []);
      });
    </script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <div class="app-wrapper section-fix-inPage" >
        <div class="wrapper-container">
            <div class="header">
                <img alt="Dragonbridge" src="http://oonimediamobile.com/files/images/dragonbridge_gray.svg" class="logo-img" align="none" style="width:0px; height:0;">
                    <div class="header-title">
                        <h1 class="title">Display Preview</h1>
                    </div>
                    </div>
            
            <div role="tabpanel" class="tabs-container">
                
                
                <div class="module-title">
                    <p>Amerihealth Caritas Digital Banners</p>
                </div>
                
                <div id="content">
                    
                    <div class="tab-content" style="max-height: none;">
                        <!-- FIXED -->
                        
                        <div role="tabpanel" class="tab-pane ratio-slots" id="pane-fix-inPage" style="display: block;">
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    160x600
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-portrait-1')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 160px; height: 600px;">
                                    <iframe style="width: 160px; height: 600px;" id="iframe-fix-inPage-portrait-1" data-breakpoint="160x600" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    300x600
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-portrait-0')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 300px; height: 600px;">
                                    <iframe style="width: 300px; height: 600px;" id="iframe-fix-inPage-portrait-0" data-breakpoint="300x600" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    300x250
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-landscape-0')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 300px; height: 250px;">
                                    <iframe style="width: 300px; height: 250px" id="iframe-fix-inPage-landscape-0" data-breakpoint="300x250" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    300x50
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-landscape-1')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 300px; height: 50px;">
                                    <iframe style="width: 300px; height: 50px;" id="iframe-fix-inPage-landscape-1" data-breakpoint="300x50" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    320x50
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-landscape-2')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 320px; height: 50px;">
                                    <iframe style="width: 320px; height: 50px;" id="iframe-fix-inPage-landscape-2" data-breakpoint="320x50" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    970x250
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-landscape-4')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 970px; height: 250px;">
                                    <iframe style="width: 970px; height: 250px;" id="iframe-fix-inPage-landscape-4" data-breakpoint="970x250" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            <div class="ratio-slot-outer">
                                <div class="iframe-label">
                                    728x90
                                    <a class="iframe-refresh" onclick="refresh('#iframe-fix-inPage-landscape-3')">
                                        <span class="glyphicon glyphicon-repeat"></span>
                                    </a>
                                </div>
                                <div class="ratio-slot loaded" style="width: 728px; height: 90px;">
                                    <iframe style="width: 728px; height: 90px;" id="iframe-fix-inPage-landscape-3" data-breakpoint="728x90" allowfullscreen="" scrolling="no" frameborder="0" src="https://app.flexitive.com/page/v2/2MDg1WcKJ0t/">
                                    </iframe>
                                    <div class="spinner"></div>
                                </div>
                            </div>
                            
                            <div style="height:75px;width:100%;"></div>
                            
                            
                        </div>
                        <!-- iab layout element -->
                        
                        
                        
                        
                        <!-- RESPONSIVE -->
                        
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>
    
    
    <div id="viewPortSize" class="top_left" style="display: none; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); font-size: 12px;"></div></body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dragonbridge/a-pen-by-kara-siegert-JMoZEN */
iframe {
  border:1px solid #000;

}
.ratio-slot-outer {
   position:relative;
  display:inline-block;
  vertical-align:top;
  margin:25px 25px;
}
.iframe-label {
  display:block;
  width:100%;
  clear:both;
  position:relative;
}
.header {
 background-color: #fff;
padding-bottom:13px;
padding-top:12px;
background-image:url(https://oonimediamobile.com/files/images/dragonbridge_gray.svg);
background-repeat:no-repeat;
background-position: center 52%;
background-size:auto 75%;
min-height:40px;
}
body {
  padding:0;
}
.wrapper-container {
  padding:0;
  margin:0;
}
  .header-title {
      	display: inline-block;
      	color: #666;
      	margin-left:7px;
font-family:San Francisco;
font-weight:500;


      }
    
      .title {
      display: inline;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    font-size: 1.25em;
    text-transform: uppercase;
    margin-right: 5px;
      }
      .tab-pane .title {
        margin: 0;
        padding: 20px 0 0 20px;
      }
    
      .logo-img {
      	height: 35px;
 
      	vertical-align: baseline;
      	margin-left: 15px;
        margin-top:12px;
      }
      .iframe-label {
        padding: 7px 5px 11px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
    background-color: #f7f7f7;
    text-align: center;
    color: #5b5b5b;
    width: 115px;
    line-height: 110%;
    font-size: 1.1em;
      }
  .iframe-refresh {
        color: #666;
        cursor: pointer;
        font-size: 15px;
      }
    
      .iframe-refresh:hover {
        color: #999;
      }
    
      .tabs-container,
      .tab-content {
        width: 100%;
      }

Comments