Clock on toolbar

General
1

Hi, guys I found this code of a clock toolbar but it apears on the top right corner I wanted in the middle some help

[{"id":"4a511482.a2accc","type":"ui_template","z":"33639ff3.68c29","group":"","name":"Reloj","order":0,"width":0,"height":0,"format":"<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n    if($('.md-toolbar-tools').length != 0){\n        loadClock();\n    }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n    $('#clock').remove();\n    var toolbar = $('.md-toolbar-tools');\n    \n    var div = $('<div/>');\n    var p = $('<p/ id=\"clock\">');\n    \n    div.append(p);\n    div[0].style.margin = '5px 5px 5px auto';\n    toolbar.append(div);\n\n    function displayTitle(lh) {\n        p.text(lh); \n    }\n    \n    function upTime() {\n        var d = new Date();\n        p.text(d.toLocaleString());\n    }\n\n    if(document.clockInterval){ \n            clearInterval(document.clockInterval);\n            document.clockInterval = null;\n    }\n        \n    document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1090,"y":140,"wires":[[]]}]
2

Play with the margin styling you are using:
div[0].style.margin = '5px 5px 5px auto';
and you should be able to get it centered. Hint: I'd change one of the values to a percentage.

3

Thanks @zenofmud, what do you mean to a percentage?

4

Why don't you do some CSS homework and read up on the 'CSS margin Property` https://www.w3schools.com/cssref/pr_margin.asp

1 Like
5

thanks I'll read it. It works thanks

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.