CODEWITHSUNDEEP
javascripthtml
s0rfi949
s0rfi949

Reputation: 387

How to correctly style linebreaks in this javascript

https://jsfiddle.net/mrnf4q7g/

I've been trying to set this fiddle onto two lines such as:

123     20        13     03
Days    Hours     Min    sec

I've tried using br and \n but it tends to staircase down the page.

Upvotes: 3

Views: 105

Answers (4)

Evan Fajardo
Evan Fajardo

Reputation: 104

I don't have time to write a fiddle for you but here's my suggestion. Write out your html with zero javascript, then take that HTML as a template and write a function like this:

function updateTime(days, hours, min, sec) {
    var html = "
    <div class='row'>
        <div id='days'>"+days+"</div>
        <div id='hours'>"+hours+"</div>

        ..etc

    </div>
    ";
    document.getElementById(id).innerHTML = html;
}

Easier to look at and style in my opinion, maybe even try https://mustache.github.io/

Upvotes: 2

Matt
Matt

Reputation: 75

As xwhtLikeThis said you can use a table like this:

<table>
  <tr>
    <td>123</td>
    <td>20</td>     
    <td>13</td>
    <td>03</td>
  </tr>

  <tr>
   <td>Days</td>
   <td>Hours</td>       
   <td>Min</td>
   <td>Sec</td>
  </tr>

</table>

Upvotes: 2

Gerasimos Pap
Gerasimos Pap

Reputation: 459

Are you looking something like that?

If you need any improvements to this answer just comment.

CountDownTimer('October 21, 2015 19:00:00', 'countdown');

function CountDownTimer(date, id) {
    var end       = new Date(date);
    
    var _second   = 1000;
    var _minute   = _second * 60;
    var _hour     = _minute * 60;
    var _day      = _hour * 24;
    var timer;
    
    var showRemaining = function() {
        var now = new Date();
        var distance = end - now;

        if (distance < 0) {   
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';
            return;
        }

        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
        
        document.getElementById(id).innerHTML =  '<div class="FL M5">' + days + '<br> days </div>';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + hours + '<br> hours </div>';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + minutes + '<br> mins ';
        document.getElementById(id).innerHTML += '<div class="FL M5">' + seconds + '<br> secs </div>';
    };
    
    timer = setInterval(showRemaining, 1000);
}
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.FL{
  float:left;
}

.CB{
  clear:both;
}

.M5{
  margin:5px;
}
<div id="countdown"></div>

Did this help?

Upvotes: 2

user4639281
user4639281

Reputation:

Create four separate elements within your #countdown element

<div id="countdown">
    <span class="sect" id="days"></span>
    <span class="sect" id="hrs"></span>
    <span class="sect" id="mins"></span>
    <span class="sect" id="secs"></span>
</div>

Then set those elements to display: inline-block

.sect {
    display: inline-block;
}

Then set each element's innerHTML separately and include a line-break

days.innerHTML = Math.floor(distance / _day) + '<br> days ';
hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';


CountDownTimer('October 21, 2015 19:00:00', 'countdown');
var days = document.getElementById('days');
var hrs = document.getElementById('hrs');
var mins = document.getElementById('mins');
var secs = document.getElementById('secs');

function CountDownTimer(date, id) {
    var end       = new Date(date);
    
    var _second   = 1000;
    var _minute   = _second * 60;
    var _hour     = _minute * 60;
    var _day      = _hour * 24;
    var timer;
    
    var showRemaining = function() {
        var now = new Date();
        var distance = end - now;

        if (distance < 0) {   
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'EXPIRED!';
            return;
        }
        
        days.innerHTML = Math.floor(distance / _day) + '<br> days ';
        hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
        mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
        secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';
    };
    
    timer = setInterval(showRemaining, 1000);
}
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}
.sect {
    display: inline-block;
}
<div id="countdown">
    <span class="sect" id="days"></span>
    <span class="sect" id="hrs"></span>
    <span class="sect" id="mins"></span>
    <span class="sect" id="secs"></span>
</div>

Upvotes: 1

Related Questions