Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Tony Groome 261 posts 803 karma points
    Jan 13, 2015 @ 16:29
    Tony Groome
    0

    Display Current Time

    Hi All

    Is there a way to display the current time. I have @DateTime.Now but that only updates when I refresh the screen. Is there a way to make it current?

    Thanks.

    Tony

    Copy Link
  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Jan 13, 2015 @ 16:45
    Jan Skovgaard
    100

    Hi Tony

    Do you need to have it update dynamically without a page reload? Like this for instance? http://perishablepress.com/unobtrusive-javascript-dynamic-clock/ Or what do you have in mind?

    /Jan

    Copy Link
  • Tony Groome 261 posts 803 karma points
    Jan 13, 2015 @ 16:51
    Tony Groome
    0

    Hi Jan

    That's exactly what I had in mind. Can this be done in Razor or is this the easiest way?

    Thanks.

    Tony

    Copy Link
  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Jan 13, 2015 @ 16:53
    Jan Skovgaard
    1

    Hi Tony

    No it can be done purely in Razor since it's a serverside language. I would recommend using JavaScript purely and the link seems to be a nice tutorial on how to do it.

    You could use Razor in to fetch the datetime from the server using an AJAX approach but it seems a bit overkill when you can do it with pure JavaScript.

    Hope this helps.

    /Jan

    Copy Link
  • Tony Groome 261 posts 803 karma points
    Jan 13, 2015 @ 17:05
    Tony Groome
    0

    Hi Jan

    OK I'll follow the tutorial. Thanks a lot.

    Tony

    Copy Link
  • Tony Groome 261 posts 803 karma points
    Jan 13, 2015 @ 17:59
    Tony Groome
    0

    Hi Jan

    I just realised something....where do I put the javascript file? I tried in the scripts folder because it's possible to set the file as a js file and then on the Master template I ran <span id="http://localhost:12718/scripts/clock.js"></span> which doesn't work. Am I miles off?

    Thanks.

    Tony

    Copy Link
  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Jan 13, 2015 @ 18:03
    Dennis Aaen
    1

    Hi Tony,

    If you have your script in the script folder in Umbraco, then you should called it like this

    <script src="/scripts/clock.js" type="text/javascript"></script>

    Hope this helps,

    /Dennis

    Copy Link
  • Tony Groome 261 posts 803 karma points
    Jan 13, 2015 @ 18:15
    Tony Groome
    0

    Hi Dennis

    Thanks, but no joy. The area where I'm expecting the clock is blank, so maybe I'm not calling it correctly.

    Tony

    Copy Link
  • Dennis Aaen 4457 posts 17970 karma points admin hq c-trib
    Jan 13, 2015 @ 18:22
    Dennis Aaen
    1

    Hi Tony,

    Okay, I have made a screenshot so you can see where to find the path to file in the script folder. See the screenshot below.

    And the way that you include the script is like:

    <scriptsrc="/scripts/clock.js"type="text/javascript"></script>

    Hope this helps,

    /Dennis

    Copy Link
  • Tony Groome 261 posts 803 karma points
    Jan 13, 2015 @ 18:26
    Tony Groome
    0

    Thanks Dennis, it's still blank. I'll have another look tomorrow, with fresh eyes and a clear head!

    :)

     

    Copy Link
  • Bjarne Fyrstenborg 1182 posts 3441 karma points MVP 4x c-trib
    Jan 13, 2015 @ 18:34
    Bjarne Fyrstenborg
    3

    Hi Tony

    You could also in your razor code use DateTime.Now: http://msdn.microsoft.com/en-us/library/zdtaw1bw%28v=vs.110%29.aspx 

    <span id="time">@DateTime.Now.ToString("yyyy-MM-dd HH:mm")</span>

    and then use Moment.js to update the time, which trigger for an eventhandler, e.g. click or just after DOM is ready.

    if you use jQuery, something like this:

    $( document ).ready(function() {
    $("#time").text(moment().format("yyyy-MM-dd HH:mm"));
});

     

    /Bjarne

    Copy Link
  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Jan 13, 2015 @ 20:51
    Jan Skovgaard
    1

    Hi Tony

    There is no need to create the script within Umbraco if you have access to the disk.

    You need to copy the javascript code into a script file, that you can save in the /scripts folder on your disk. You could also have it in /assets/javascript if you would like. It does not matter.

    When you save your script file you can save it as "clock.js". Now you need to reference "clock.js" in the bottom of your master template before the ...

    so try writing it like this

       <body>
   <span id="xClock"></span>
    <script src="/scripts/clock.js"></script>
    </body>

    Does this make sense? :)

    /Jan

    Copy Link
  • Tony Groome 261 posts 803 karma points
    Jan 14, 2015 @ 11:03
    Tony Groome
    0

    Hi All

    Thanks for all the help. What a great community! :)

    @Bjarne I don't know jquery, it is something I should probably get on top of, so thanks for the links.

    @Jan I added the last bit of code, and hey presto, we have a clock! And it works! I did have a clock before, but it didn't work!!

    Thanks.

    Tony

    Copy Link
  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Jan 14, 2015 @ 11:22
    Jan Skovgaard
    1

    Hi Tony

    Glad you managed to get it working :)

    Have fun developing.

    /Jan

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies