Is it possible to nest a current time clock in the header

Brett_Etzel

I'd like to be able to get screenshots of various pages, and it would be nice if the current time was displayed in those screenshots.

Justin_Workman

@Brett_Etzel - Are you wanting it like next to the search in the top header?

Justin_Workman

@Brett_Etzel - Are you wanting it like next to the search in the top header?

Brett_Etzel

Yes, that would work great, or anywhere in the header.

Thanks!

Brett_Etzel

If possible, Date and Time would be even better.

Justin_Workman

@Brett_Etzel - Try this in your custom.js:

$(document).ready(function() {

var now = new Date();

setTimeout(function() {

$('<span id="currentTime" style="color: white;padding-left: 20px;"></span>').insertAfter('.navbar__search');

$('#currentTime').text(kendo.toString(now, 'g'));

}, 1200);

setInterval(function(){

var newNow = kendo.toString(new Date(), 'g');

if ($('#currentTime').text() !== newNow) {

$('#currentTime').text(kendo.toString(newNow));

}

}, 10000);

});

Brett_Etzel

screenshot.png

Hey Justin,

Thank you that worked. Very slick! I've attached a screenshot of my header.

You'll see the "logged in user" cell got bumped down. I've tried to figure-out how to not affect that cell, but not having any luck. Is there a way to add that clock with out bumping the"logged in user" cell down?

Thanks very much for your help!

Brett

Justin_Workman

@Brett_Etzel - Judging by your screenshot, you've already got some custom css stuff going on up there. It would be hard to say what needs to change to make it fit just right. If you use the Dev Tools in your browser to inspect the clock and/or the elements around the clock, you can tinker with padding or margins on the elements till everything fits like you want and then commit that change to the custom.css file.