1

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>
  • Try copying this code in .html file and using Content Editor web part. No need to give <html>,<head> and <body> tags. Also, are you using z-index or something in CSS somewhere? – Ganesh Sanap Jul 17 at 4:33
0

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).

0

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

   countdown();
</script>

</body>
</html>
  • Appreciate it, but sharepoint still has the same error as above when the code is posted into the Script Editor. There is no way to insert the code once it has been pasted. – Heartthrob_Rob Jul 17 at 0:07
  • Are you saying that you can't edit the web part after adding the broken code? Try adding "&ToolPaneView=2" to the end of the URL. (Or "?ToolPaneView=2" if that does not work) This will let delete any problem web parts from the page. – Mike Smith - MCT - MVP Jul 17 at 0:33
  • The "&ToolPaneView=2" appending hasn't changed the outcome. Have edited the code with the below comment but am still facing the same issue as in above image. I have a feeling it has to do with the CSS . Do you know if CSS has problems with Sharepoint web parts? – Heartthrob_Rob Jul 17 at 2:37
  • When I remove the CSS portion (everything between <style> xyz </style> I am allowed to insert the code, it works, but looks awful. – Heartthrob_Rob Jul 17 at 2:39
  • See if the two semicolons are a problem: position: absolute;; – Mike Smith - MCT - MVP Jul 17 at 4:00
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.