varemenos
2/28/2013 - 9:12 PM

Responsive Viewer

Responsive Viewer

responsive.html
content_copyfile_download
<html>
    <head>
        <meta charset="UTF-8">
        <title>simple Responsive viewer by Adonis K.</title>
        <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"></link>
        <style>
            iframe {
                transition: 150ms ease;
                display: block;
                margin: 0 auto;
                background-color: #333;
                border: 1px solid rgba(0, 0, 0, 0.1);
                box-shadoW: 0 0 12px rgba(255, 255, 255, 0.2) inset;
            }
            .mobilePortrait {
                height: 480px;
                width: 320px;
            }
            .mobileLandscape {
                height: 320px;
                width: 480px;
            }
            .smallTabletPortrait {
                height: 800px;
                width: 600px;
            }
            .smallTabletLandscape {
                height: 600px;
                width: 800px;
            }
            .tabletPortrait {
                height: 1024px;
                width: 768px;
            }
            .tabletLandscape {
                height: 768px;
                width: 1024px;
            }
            /* styling */
            html {
                min-height: 100%;
                background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;
            }
            body {
                text-align: center;
            }
            input, select, button {
                margin: 1em 0 1em 1em;
                padding: 0.5em;
            }
        </style>
    </head>
    
    <body>
        <select id="resolution">
            <option value="mobile">480x320 Mobile</option>
            <option value="smallTablet">800x600 Small Tablet</option>
            <option value="tablet">1024x768 Tablet</option>
        </select>
        <button id="orientation">Orientation</button>
        <input type="url" value="http://varemenos.com">
        <button id="result">go</button>
        <iframe class="landscape"></iframe>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
        <script>
            $(function() {
                var selected = {};
                selected.device = "mobile";
                selected.orientation = "Landscape";
                selected.url = "http://varemenos.com";

                $("iframe")
                    .addClass(selected.device + selected.orientation)
                    .attr("src", selected.url);

                $("#result").on("click", function() {
                    $("iframe").attr("src", $("input").val());
                });

                $("#resolution").change(function() {
                    $("iframe").removeClass(selected.device + selected.orientation);

                    if ($(this).val() === "mobile") {
                        selected.device = "mobile";
                    } else if ($(this).val() === "smallTablet") {
                        selected.device = "smallTablet";
                    } else if ($(this).val() === "tablet") {
                        selected.device = "tablet";
                    } else {
                        selected.device = "mobile";
                    }

                    $("iframe").addClass(selected.device + selected.orientation);
                });

                $("#orientation").on("click", function() {
                    $("iframe").removeClass(selected.device + selected.orientation);

                    if (selected.orientation === "Portrait") {
                        selected.orientation = "Landscape";
                    } else {
                        selected.orientation = "Portrait";
                    }

                    $("iframe").addClass(selected.device + selected.orientation);
                });
            });
        </script>
    </body>
</html>