Search code examples
javascriptjqueryhtmlmarquee

integrating javascript time with content in marquee tag to show on the same line


Can't seem to get this javascript clock to appear on the same line as the content i would like scrolling in my marquee. At the moment the text I would like as content following the time appears on a line underneath? Is there a way to display the text content next to the time on the same line? Thank you

<body>
<header id="pageHeader">
<marquee style="
width: 100%;
/* position: fixed; */
display: block;
background: #000;
z-index: 999999999999;
margin: 0;
font-size:18px;
color: #FFB6C1;
left: 0;
"> <!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt">  </div>
CONTENT TEXT TO FOLLOW THE TIME / WRITING HERE
</body>
</html>  </marquee>


Solution

  • I just added display: inline-block to your div so it doesn't take up the entire row space.

    #txt {
        display: inline-block;
    }
    <body>
    <header id="pageHeader">
    <marquee style="
    width: 100%;
    /* position: fixed; */
    display: block;
    background: #000;
    z-index: 999999999999;
    margin: 0;
    font-size:18px;
    color: #FFB6C1;
    left: 0;
    "> <!DOCTYPE html>
    <html>
    <head>
    <script>
    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML =
        h + ":" + m + ":" + s;
        var t = setTimeout(startTime, 500);
    }
    function checkTime(i) {
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }
    </script>
    </head>
    
    <body onload="startTime()">
    
    <div id="txt">  </div>
    CONTENT TEXT TO FOLLOW THE TIME / WRITING HERE
    </body>
    </html>  </marquee>