JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<script src="http://css-tricks.com/examples/AnythingZoomer/js/jquery.anythingzoomer.js"></script>
<!-- iframe id="zoomer" scrolling="no" src="http://hubspot.com"></iframe -->
<div id="wrapper"><iframe id="zoomer" scrolling="no" frameborder="no" src="http://en.wikipedia.org/wiki/Digital_zoom"></iframe></div>

CSS

html, body { margin: 0px; padding: 0px; }
/*
.ie #zoomer {
    zoom: 20%;
    height: 10000px;
    width: 10000px;
}
.non-ie #zoomer {
    transform: scale(0.2);
    -moz-transform: scale(0.2);
    -webkit-transform: scale(0.2);
    -o-transform: scale(0.2);
    margin: -800px 0px 0px -800px;
    height: 2000px;
    width: 2000px;    
}
*/

JavaScript

(function($){
    var plugin = 'zoomer';

    $[plugin] = function(el, options) {
        var self = this;

        if (options === 'update' && $(el).data(plugin)) {
            return true;
        }

        $(el).data(plugin, self);

        self.options = $.extend({}, {
            width: 600,
            marginLeft: 0,
            marginRight: 0,
            marginTop: 0,
            marginBottom: 0,
            tranformOrigin: '0 0',
            message: 'Open Page'
        }, options);
    };

    $.fn[plugin] = function(settings) {
        return this.each(function(){
            (new $[plugin](this, settings)); //wrapped for packing
            
            var $el = $(this),
                plgn = $el.data(plugin),
                options = plgn.options,
                unselectable =  {
                    '-webkit-user-select': 'none',
                    '-khtml-user-select': 'none',
                    '-moz-user-select': 'none',
                    '-o-user-select': 'none',
                    'user-select': 'none'
                };
            
            if (!options.zoom) {
                options.zoom = options.width / $(window).width();
            }

            if (!options.height) {
                options.height = $(window).height() * options.zoom;
                //options.height = $(window).height() * options.zoom;
            }

            //fix bug in older version of chrome:
            //http://stackoverflow.com/questions/5159713/
            if (navigator.userAgent.indexOf('Chrome/10.0.648') > -1) {
                options.zoom = Math.sqrt(1 / options.zoom);
            }

            if ($.browser.msie) {
                $el
                    .css(unselectable)
                    .css({
                        zoom: options.zoom,
                        height: (options.height / options.zoom) * 5,
                        width: (options.width / options.zoom) * 5
                    })
                ;
            } else {
  ...