时间戳

首页 > 解决方案 > 我的 CodePlayer 无法处理我的 Blogger 帖子

javascript - 我的 CodePlayer 无法处理我的 Blogger 帖子

问题描述

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

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

这在我的谷歌浏览器中运行良好，但当我将它上传到我的 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>

标签： javascriptjqueryhtmlcss

解决方案

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

您可能需要参考这些。将 HTML 元素设为 contenteditable，CSS 自定义变量

$(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>

推荐阅读