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

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:

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

Ganesh Sanap · Accepted Answer · 2019-07-17 04:52:08Z

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

Mike Smith - MCT - MVP · Accepted Answer · 2019-07-17 00:01:39Z

0

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

   countdown();
</script>

</body>
</html>

answered Jul 17 at 0:01

Mike Smith - MCT - MVP

6,2422 gold badges5 silver badges19 bronze badges

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

add a comment |

Mike Smith - MCT - MVP · Accepted Answer · 2019-07-17 00:37:10Z

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.

Stack Exchange Network

current community

your communities

more stack exchange communities

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

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged sharepoint-enterprise javascript css script-editor-webpart or ask your own question.

Hot Network Questions

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

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged sharepoint-enterprise javascript css script-editor-webpart or ask your own question.

Related

Hot Network Questions