Analog clock JavaScript doesn't work in xibo 1.5.2 dotNet client

Asked by vvlads

Hello guys,

I am implementing layout with analog clock as embedded html code. hereby is the code:
============== starting code block =========================
<style type="text/css">
        * {
         margin: 0;
         padding: 0;
        }

        #clock-wrapper {
         position: relative;
         width: 150px;
         height: 150px;
         margin: 0px auto 0 auto;
         background: none;
         list-style: none;
         }
        .clock{
         background: none;
         list-style: none;
        }

        #sec, #min, #hour {
         position: absolute;
         width: 150px;
         height: 30px;
         top: 58px;
         left: 0px;
         }

        #sec {
         background: url('http://www.signatact.com/widgets/clock/images/sechand-left.png');
         z-index: 3;
            }

        #min {
         background: url('http://www.signatact.com/widgets/clock/images/minhand-left.png');
         z-index: 2;
            }

        #hour {
         background: url('http://www.signatact.com/widgets/clock/images/hourhand-left.png');
         z-index: 1;
            }

        p {
            text-align: center;
            padding: 10px 0 0 0;
            }
    </style>

    <script type="text/javascript">

        $(document).ready(function() {

              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";
              /* window.alert(srotate); */

              $("#sec").css({"-ms-transform" : srotate, "-moz-transform" : srotate, "-webkit-transform" : srotate});

              }, 1000 );

              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";

              $("#hour").css({"-ms-transform" : hrotate, "-moz-transform" : hrotate, "-webkit-transform" : hrotate});

              }, 1000 );

              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = "rotate(" + mdegree + "deg)";

              $("#min").css({"-ms-transform" : mrotate, "-moz-transform" : mrotate, "-webkit-transform" : mrotate});

              }, 1000 );
        });
    </script>

<div id="clock-wrapper">
 <ul class="clock">
     <li id="sec"></li>
     <li id="hour"></li>
  <li id="min"></li>
 </ul>
</div>
======================= end of block of code =============================

The code works well if I put it into a separate file and place it on the server and open the file via Internet Explorer, in my case it is IE11. But in Xibo client arrows are not moving. But if I uncomment window.alert, I constantly get popup window.

Any ideas why IE doesn't redraw arrows after css styles are changed in xibo?

Thank you in advance,
Vlad.

Question information

Language:
English Edit question
Status:
Solved
For:
Xibo Edit question
Assignee:
No assignee Edit question
Solved by:
Alex Harrington
Solved:
Last query:
Last reply:
Revision history for this message
Best Alex Harrington (alexharrington) said :
#1

See the FAQ on html5 support in the dotnet client

Revision history for this message
vvlads (t-vla7-l) said :
#2

Alex, thanks a lot - it solves my problem partially. Now I need to align styles and sizes...

B.r. Vlad.

Revision history for this message
vvlads (t-vla7-l) said :
#3

Thanks Alex Harrington, that solved my question.

Revision history for this message
vvlads (t-vla7-l) said :
#4

Vlad suggests this article as an answer on his question: FAQ #2246
FAQ #2246: “HTML5 in the Windows .net Client”.