JSFiddle - React, Tailwind, and code Playground

by arrie1992

HTML

<!-- default jQuery theme !-->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
 
<!-- Custom jQuery theme !-->
<!--
<link rel="stylesheet" href="http://dev.lucason.nl/anytimemarketing/pms/assets/stylesheets/jquery_ui/jquery-ui-1.9.1.custom.min.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://dev.lucason.nl/anytimemarketing/pms/assets/js/jquery/jquery-ui-1.9.1.custom.min.js"></script>
!-->


<div class="liveviewtriggerDialog" style="display:none" title="Module preview">
    <div class="liveviewHeader">
        <input type="hidden" class="base_m_url" value="" />
        <table>
            <tr>
                <td><a class="reloadBtn">Herladen</a></td><td>&nbsp;</td><td><input type="text" class="m_url_prefix" size="70" value="/" /></td><td><a class="m_url_prefix_submit">Ga</a></td>
            </tr>
        </table>
    </div>
    <div class="liveviewContent"></div>
</div>

<a class="liveviewtrigger" href="http://www.weer.nl" title="Module preview"><span class="ui-icon ui-icon-play"></span></a>

JavaScript

$(".reloadBtn").click(function(e){
    e.preventDefault();
    $(".iPrev").attr("src", $(".iPrev").attr("src"));
}).button();
    
$(".m_url_prefix_submit").click(function(e){
    e.preventDefault();
    $(".iPrev").attr("src", $(".base_m_url").val()+$(".m_url_prefix").val());
}).button();

$(window).resize(function(){
    var wHeight = $(window).height() * 0.95;
    var wWidth = $(window).width() * 0.95;
    $(".liveviewtriggerDialog").dialog("option", "width", wWidth);
    $(".liveviewtriggerDialog").dialog("option", "height", wHeight);
});

$(".liveviewtrigger").click(function(e){
    e.preventDefault();
    var wHeight = $(window).height() * 0.95;
    var wWidth = $(window).width() * 0.95;
    var href = $(this).attr("href");
    
    $(".liveviewtriggerDialog").dialog({
        width: wWidth,
        height: wHeight,
        buttons: {
            "Sluiten": function(){
                $(this).dialog("close");
            }
        },
        resizable: false,
        draggable: false,
        open: function(){
            $(".m_url_prefix").blur();
            $(".liveviewContent").html('<iframe class="iPrev" height="94%" width="98%" src="'+href+'"></iframe>');
            $(".base_m_url").val(href);
        },
        close: function(){
            $(".liveviewContent").html('');
            $(".base_m_url").val('');
            $(".m_url_prefix").val('/');
        },
        modal: true
    });
});