Script Editor web part not allowing me to insert code (or cancel)

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/266401

Question

Whenever I paste the following code into the script editor, instead of it allowing me to click 'insert', the entire window changes into the output of my script. There is no way to circumnavigate this without exiting the page - see error below:

Error occurring

For clarity, have posted my code below (it is a countdown clock, to a specific date).

<!DOCTYPE html>
<html>
  <head>
    <title>APRA Countdown</title>
    <style type="text/css">
    body {
        background: #f6f6f6
    }

    .countdownContainer{
        position: absolute;;
        top: 50%;
        left: 50%;
        transform : translateX(-50%) translateY(-50%);
        text-align: center;
        background: #ddd;
        border: 1px solid #999;
        padding: 10px;
        box-shadow: 0 0 5px 3px #ccc;
    }

    .info {
        font-size: 80px;
    }
    </style>
  </head>
<body>
    <table class="countdownContainer">
        <tr>
            <td colspan="4" class="info">APRA Countdown</td>
        </tr>
        <tr class="info">
            <td id="days">2</td>
            <td id="hours">3</td>
            <td id="minutes">5</td>
            <td id="seconds">7</td>
        </tr>
            <td>Days</td>
            <td>Hours</td>
            <td>Minutes</td>
            <td>Seconds</td>
   </table>
   <script type="text/javascript">

    function countdown(){
        var now = new Date();
        var eventDate = new Date(now.getFullYear(), 7, 19);

        var currentTime = now.getTime();
        var eventTime = eventDate.getTime();

        var remTime = eventTime - currentTime;

        var s = Math.floor(remTime / 1000);
        var m = Math.floor(s / 60);
        var h = Math.floor(m / 60);
        var d = Math.floor(h / 24);

        h %= 24;
        m %= 60;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

      document.getElementById("days").textContent = d;
      document.getElementById("hours").textContent = h;
      document.getElementById("minutes").textContent = m;
      document.getElementById("seconds").textContent = s;

      setTimeout(countdown, 1000);

   }

   countdown();


</body>
</html>
Was it helpful?

Solution

This is happening because of your CSS(Maybe some already defined classes you are using).

After adding your code, somehow the div with .ms-dlgOverlay class is displayed on browser window which has z-index:1504 and CSS as below(which is blocking you from inserting your code in Script Editor web part):

element.style {
    display: block;
    z-index: 1504;
    width: 1366px;
    height: 490px;
}
.ms-dlgOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-color: #999;
    display: none;
}

Copy below code and paste it in Script editor web part:

<table class="countdownContainer">
    <tr>
        <td colspan="4" class="info">APRA Countdown</td>
    </tr>
    <tr class="info">
        <td id="days">2</td>
        <td id="hours">3</td>
        <td id="minutes">5</td>
        <td id="seconds">7</td>
    </tr>
    <tr>
        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>
    </tr>
</table>
<script type="text/javascript">
    function countdown() {
        var now = new Date();
        var eventDate = new Date(now.getFullYear(), 7, 19);

        var currentTime = now.getTime();
        var eventTime = eventDate.getTime();

        var remTime = eventTime - currentTime;

        var s = Math.floor(remTime / 1000);
        var m = Math.floor(s / 60);
        var h = Math.floor(m / 60);
        var d = Math.floor(h / 24);

        h %= 24;
        m %= 60;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

      document.getElementById("days").textContent = d;
      document.getElementById("hours").textContent = h;
      document.getElementById("minutes").textContent = m;
      document.getElementById("seconds").textContent = s;

      setTimeout(countdown, 1000);
    }
   countdown();
</script>

It will work.

Now, inspect the element and try applying the CSS according to your requirement(But make sure you are using your unique classes).

OTHER TIPS

You are missing an end script tag. This breaks the JavaScript in the rest of the page.

   countdown();
</script>

</body>
</html>

While it should not have any impact on your JavaScript, you are also missing some tags around one table row.

        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>

Should be

     <tr>
        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>
     </tr>

Recheck the rest of your code for parens, braces, semicolons, etc.

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top