我的CodePlayer在我的Blogger帖子上不起作用

时间：2018-07-10 04:49:01

标签： javascript jquery html css

这是我的博客-http://quickeasycoder.blogspot.com/2018/07/code-player.html

它的工作方式与我的浏览器不同。博客中的每个部分都相互融合。

这在我的Google Chrome浏览器中运行良好，但是当我将其上传到Blogger帖子时却并非如此。我认为代码是完美的，但问题可能出在博客的布局中。现在应该怎么办？

<html>

    <head>

        <title>jQuery</title>


 <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>




  <style type="text/css">


            body {

                font-family: sans-serif;
                padding:0;
                margin:0;

            }

            #header {

                width:100%;
                background-color: #EEEEEE;
                padding:5px;
                height: 30px;

            }

            #logo {

                float:left;
                font-weight: bold;
                font-size: 120%;
                padding: 3px 5px;

            }

            #buttonContainer {

                width:233px;
                margin: 0 auto;

            }

            .toggleButton {

                float:left;
                border: 1px solid grey;
                padding: 6px;
                border-right: none;
                font-size: 90%;

            }

            #html {

                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;

            }

            #output {

                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                border-right: 1px solid grey;

            }

            .active {

                background-color: #E8F2FF;

            }

            .highlightedButton {

                background-color: grey;

            }

            textarea {

                resize: none;
                border-top: none;
                border-color: grey;

            }

            .panel {

                float:left;
                width: 50%;
                border-left: none;
            }

            iframe {

                border:none;

            }

            .hidden {

                display: none;

            }

           #intro{margin:10px;
            font-weight:bold;
            font-size: 20px;
            }

        </style>

    </head>

    <body>


        <p id="intro"> Learn HTML| CSS| JAVASCRIPT without any text-editor by using Code-Player <br>
        Built using HTML| CSS| JAVASCRIPT| jQuery</p>

        <div id="header">

            <div id="logo">

                CodePlayer

            </div>

            <div id="buttonContainer">

                <div class="toggleButton active" id="html">HTML</div>

                <div class="toggleButton" id="css">CSS</div>

                <div class="toggleButton" id="javascript">JavaScript</div>

                <div class="toggleButton active" id="output">Output</div>

            </div>

        </div>

        <div id="bodyContainer">

            <textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p></textarea>

            <textarea id="cssPanel" class="panel hidden"> p { color: green; }</textarea>

            <textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph").innerHTML = "Hello Rob!";</textarea>

            <iframe id="outputPanel" class="panel"></iframe>


        </div>

        <script type="text/javascript">

            function updateOutput() {

                $("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");

                document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());



            }

            $(".toggleButton").hover(function() {

                $(this).addClass("highlightedButton");

            }, function() {

                $(this).removeClass("highlightedButton");

            });

            $(".toggleButton").click(function() {

                $(this).toggleClass("active");

                $(this).removeClass("highlightedButton");

                var panelId = $(this).attr("id") + "Panel";

                $("#" + panelId).toggleClass("hidden");

                var numberOfActivePanels = 4 - $('.hidden').length;

                $(".panel").width(($(window).width() / numberOfActivePanels) - 10);

            })

            $(".panel").height($(window).height() - $("#header").height() - 15);

            $(".panel").width(($(window).width() / 2) - 10);

            updateOutput();

            $("textarea").on('change keyup paste', function() {

                updateOutput();


            });



        </script>

    </body>

</html>

2 个答案:

答案 0 :(得分：0)

由于许多博客平台禁止嵌入代码，因此有时您可以使用类似于此处的<iframe>来完成任务

<iframe height='265' scrolling='no' title='BPaNNq' src='//codepen.io/happymacarts/embed/BPaNNq/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/happymacarts/pen/BPaNNq/'>BPaNNq</a> by Joseph L. Bradfield (<a href='https://codepen.io/happymacarts'>@happymacarts</a>) on <a href='https://codepen.io'>CodePen</a>.

or something like this one i found (looks familiar)

<iframe height='265' scrolling='no' title='Code player' src='//codepen.io/akashdevgan/embed/JGbGOQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/akashdevgan/pen/JGbGOQ/'>Code player</a> by Akash Devgan (<a href='https://codepen.io/akashdevgan'>@akashdevgan</a>) on <a href='https://codepen.io'>CodePen</a>.

我认为它不能嵌入此处的代码段中，但这可能在您的博客网站上可以尝试

答案 1 :(得分：0)

由于我无法调试您的代码，因此编写了自己的Codeplayer版本。

您可能需要参考这些内容。 Make HTML elements as contenteditable，CSS Custom Variables 

$(document).ready(function(){
    $(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
    
    $(".codetype").click(function(){
        $(this).hasClass("active") ? $(this).removeClass("active") : $(this).addClass("active");
        $(".codecontent").eq($(this).index()).toggle();
        $(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
    });
});
.container
{
    width:100%;
    height:400px;
    max-height:400px;
    border:1px solid black;
}
.header
{
    position:relative;
    width:100%;
    height:50px;
    background: red;
    box-sizing: border-box;
    text-align:center;
    color:white;
}

.codetype
{
    border:1px solid black;
    width:100px;
    height:40px;
    margin:0 auto;
    display:inline-block;
}
.codetype > span
{
    text-align:center;
    line-height:40px;
}
.codetype:first-child
{
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.codetype:last-child
{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.body
{
    height:100%;
    display:inline-block;
    width:100%;
}
.codecontent
{
    height:100%;
    width:var(--contentwidth);
    background:yellow;
    border:1px solid black;
    float:left;
    box-sizing:border-box;
}

.active
{
    background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="header">
        <div id="" class="codetype active"><span>HTML</span></div>
        <div id="" class="codetype active"><span>CSS</span></div>
        <div id="" class="codetype active"><span>JS</span></div>
        <div id="" class="codetype active"><span>Output</span></div>
    </div>
    <div class="body">
        <div id="" class="codecontent" contenteditable=true>HTML</div>
        <div id="" class="codecontent" contenteditable=true>CSS</div>
        <div id="" class="codecontent" contenteditable=true>JS</div>
        <div id="" class="codecontent">Output</div>
    </div>
</div>

相关问题
最新问题