I want to make my countdown timer responsive in mobile view I want to make it responsive in mobile device such a way that it should be like a list days ,hours,min,seconds how to do that ?
jsfiddle
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="main">
<div class="content">
<div class="text">
</div>
<!-- /.Text Div -->
<div class="counter">
<h3>Registration Closes In :</h3>
<div id="countdown"><span class="days">10 <b>Days</b></span> <span class="hours">7 <b>Hours</b></span> <span class="minutes">26 <b>Minutes</b></span> <span class="seconds">58 <b>Seconds</b></span></div>
<!-- /#Countdown Div -->
</div>
<!-- /.Counter Div -->
</div>
<!-- /.Content Div -->
</div>
<!-- /#Main Div -->
</div>
<!-- /.Columns Div -->
</div>
<!-- /.Row Div -->
According to what I understood, you are asking for, How to calculate the time difference between Today and the FinalDay ?
var today = new Date();
var FinalDay = new Date("7-01-2017 18:00");
var milliSecondsRemaining = (FinalDay - today); // milliseconds between now & FinalDay
var daysRemaining = Math.floor(milliSecondsRemaining / 86400000); // days
var hoursRemaining = Math.floor((milliSecondsRemaining % 86400000) / 3600000); // hours
var minutesRemaining = Math.round(((milliSecondsRemaining % 86400000) % 3600000) / 60000); // minutes
alert("Registration Closes In" + daysRemaining + " Days, " + hoursRemaining + " Hours, " + minutesRemaining + " Minutes");
Hope this solves your problem.
Related
I am working on a simple Electron app project. So far I am only at the Javascript and HTML stage.
I am making a countdown timer where the user enters a future date –their birthday for example– and the app then displays a counter with the remaining days, hours, minutes and seconds. You only see the input fields at first, then a simple toggle function removes the input fields and brings up a large clock instead.
So far I have a working prototype with a basic styling. But this prototype will need a new input every time you bring it up. If I can make the window local storage work, then I would get a website (hence Electron app) that will remember your special date even when closed.
My failed attempt at coding below (see headline with 'local storage problem' in capitol letters) has been taken from various youtube tutorials and StackOverflow questions. But I guess I am missing a fairly basic principle in order to make it work.
All suggestions would be greatly appreciated.
Thanks.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="javascript" src="p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// Event listener made to work with Materialize's .hide class
let hideInput = document.getElementById('input-hide');
// console.log(hideInput);
let hideCountdown = document.getElementById('countdown-hide');
// console.log(hideCountdown);
let button = document.querySelector("button");
// console.log(button);
button.addEventListener('click', () => {
if (hideInput.classList.contains("hide")) {
hideInput.classList.remove("hide");
hideCountdown.setAttribute("class", "hide")
} else {
hideInput.setAttribute("class", "hide");
hideCountdown.classList.remove("hide");
}
});
// Find the user's input
const Calender = document.querySelector('.datepicker');
M.Datepicker.init(Calender, {
format: 'yyyy-mm-dd',
firstDay: 1,
// minDate: '15 05 2021', <-- I could't get this to work...
})
// Create a countdown timer and display the user's text
function enterSpecialDate() {
let userDate = new Date(document.getElementById('special-date').value);
// console.log(userDate);
let currentTime = new Date();
/////// LOCAL STORAGE PROBLEM ///////
// window.localStorage.setItem("storedObject", userDate.value);
// console.log(storedObject);
// console.log(dtUserDate);
// let diff = storedObject - currentTime;
let diff = userDate - currentTime;
/* we've been given the difference in milliseconds, so some division is needed */
const d = Math.floor(diff / 1000 / 60 / 60 / 24);
const h = Math.floor(diff / 1000 / 60 / 60) % 24;
const m = Math.floor(diff / 1000 / 60) % 60;
const s = Math.floor(diff / 1000) % 60;
/* send values back into HTML document */
document.getElementById('days').innerHTML = d;
document.getElementById('hours').innerHTML = h;
document.getElementById('minutes').innerHTML = m;
document.getElementById('seconds').innerHTML = s;
// console.log(s < 10 ? ‘0’ + s : s;) <-- I could't get this to work...
/*collect user's special occasion and send back into document*/
var userOccasion = document.getElementById('user-occasion').value;
document.getElementById('userOccasionOutput').innerHTML = userOccasion;
console.log(document.getElementById('user-occasion').value);
}
setInterval(enterSpecialDate, 1000);
<body>
<div class="container">
<!-- welcome message and input area - should show on start then dissappear after you click buttton-->
<div class="" id="input-hide">
<div class="row">
<div class="col s12 m12 distance-1"></div>
<div class="col s12 m3"></div>
<div class="col s12 m6">
<h2>
Countdown to your special occasion!
</h2>
</div>
<div class="col s12 m3"></div>
</div>
<div class="row">
<div class="col s12 m3"></div>
<div class="col s12 m6">
<form action="">
<div class="input-field">
<textarea class="materialize-textarea" name="user-occasion" id="user-occasion"
placeholder="e.g. my birthday"></textarea>
<label for="user-occasion">what is your special occasion?</label>
</div>
</form>
</div>
<div class="col s12 m3"></div>
</div>
<div class="row">
<div class="col s12 m3"></div>
<div class="col s12 m6">
<form action="">
<div class="input-field">
<input type="text" id="special-date" class="datepicker" placeholder="click here">
<label for="date">when is your special occasion?</label>
</div>
</form>
<button onclick="enterSpecialDate()">Enter</button>
</div>
<div class="col s12 m3"></div>
</div>
</div>
<!-- countdown ticker - should appear only after you click the button -->
<div class="hide" id="countdown-hide">
<div class="row">
<div class="col s12 m12 distance-2">
<p></p>
</div>
<div class="col s12 m12">
<div class="time col s12 m3">
<span class="number" id="days"></span>
<br>
<span id="unit">days</span>
</div>
<div class="time col s12 m3">
<span class="number" id="hours"></span>
<br>
<span id="unit">hours</span>
</div>
<div class="time col s12 m3">
<span class="number" id="minutes"></span>
<br>
<span id="unit">minutes</span>
</div>
<div class="time col s12 m3">
<span class="number" id="seconds"></span>
<br>
<span id="unit">seconds</span>
</div>
<!-- <div class="time col s12 m3"></div> -->
</div>
<div class="col s12 m12 distance-3"></div>
<div class="col s12 m12">
<div class="time col s12 m12 until">
<span>until </span><span id="userOccasionOutput"></span></p>
</div>
<div class="col s12 m12">
start again
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/DatePicker1.css">
I don't really see the problem.
I've just made something like this for a 'promo'.
I haven't tested your code, but in order to make it work using localStorage,
I would, and did, something like this:
Retrieve user inputs ONCE, after checking if localStorage hasn't that item.
if (!localStorage.getItem('birthday_key_HASH'))
// Retrieve user's input and then store it.
let userDate = new Date(document.getElementById('special-date').value);
localStorage.setItem('birthday_key_HASH', userDate);
If it's already set, just do your math using the user birthday value.
// ...Do your calculus.
userBirthdayDate = localStorage.getItem('birthday_key_HASH');
Let me know if this is clear enough.
How to sort divs by a specific date or by two dates
Example:
if i taped 27-09-2018 I posted from 27-09-2018
this my code
1-I created a function who compared between date and input
2-after compare i display the chosen date
function sortDescending(a, b) {
var date1 = $("#datepick").val();
date1 = new Date(date1[0], date1[1] - 1, date1[2]);
var date2 = $(b).find(".year").text();
date2 = date2.split('-');
date2 = new Date(date2[2], date2[1] - 1, date2[0]);
return date1 >= date2;
};
$('#datepick').click(function () {
console.log("tt");
$('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
});
<input type="date" id="datepick"/>
<div id="all_elements">
<!-- one element -->
<div class="element">
<div class="display-number">02</div>
<div class="year">20-10-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">03</div>
<div class="year">22-09-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">01</div>
<div class="year">01-12-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">04</div>
<div class="year">01-06-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">05</div>
<div class="year">29-09-2019</div>
</div><!-- element -->
</div> <!--all_elements--
I want my javascript result to iterate as my form element iterate. The javascript result is displaying only in one part of the iteration results. I want it to display the unique result for each of the results from the iteration. How do I do this?
I included the javascript code in the loop but I'm still not getting the desired outcome. Other section of the code is iterating but not the javascript section
{% for post in public_posts%}
<!-- Products tab & slick -->
<div class="col-md-12">
<div class="row">
<div class="products-tabs">
<!-- tab -->
<div id="tab1" class="tab-pane active">
<div class="products-slick" data-nav="#slick-nav-1">
<div class="product">
<div class="product-img">
<img src="static/img/product03.png" alt="">
</div>
<div class="product-body">
<p class="product-category" >{{post.total_slot}}</p>
<h3 class="product-name">{{post.post_title}}</h3>
<h4 class="product-price">₦{{post.slot_value/post.total_slot}}</h4>
<h4 class="remaining-time" id="demo"></h4>
<div class="product-rating">
</div>
<div class="product-btns">
<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
<button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
</div>
</div>
<div class="add-to-cart">
<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
</div>
</div>
</div>
<div id="slick-nav-1" class="products-slick-nav"></div>
</div>
<!-- /tab -->
</div>
</div>
</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("{{post.share_date}}").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the difference between now and the count down date
var difference = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(difference / (1000 * 60 * 60 * 24));
var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((difference % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (difference < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<!-- Products tab & slick -->
{% endfor %}
![Image link]:https://www.canva.com/design/DADdASfyIuM/wkC2OlaGbWDymv5ehTXkIg/view?utm_content=DADdASfyIuM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton
I expected the area mark with red to appear all through the remaining form but with a different result according to the iteration results
I think the script called multiple times, but every time it find the first element with id="demo" on the screen, and override its content, so you get only the first H4#demo filled in..
I am using code in example mentioned here
Pie chart Example
JS
$(function(){
var $ppc = $('.progress-pie-chart'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+'%');
});
HTML:
<div class="progressDiv">
<div class="statChartHolder">
<div class="progress-pie-chart" data-percent="67"><!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
</div>
<div class="statRightHolder">
<ul>
<li> <h3 class="blue">39.4k</h3> <span>Interactions</span></li>
<li> <h3 class="purple">1.8k</h3> <span>Posts</span></li>
</ul>
<ul class="statsLeft">
<li><h3 class="yellow">22%</h3> <span>Comments</span></li>
<li><h3 class="red">37%</h3> <span>Cheers</span></li>
</ul>
<ul class="statsRight">
<li><h3>18%</h3> <span>Tasks</span></li>
<li><h3>23%</h3> <span>Goals</span></li>
</ul>
</div>
</div>
The html, css and js are exactly same as in the link above.
I want to use more than 1 pie chart in my html (say 5) in the same format.
How do you identify the id that is passed to $fintion() in js.
At present the has same class name(progress-pie-chart), so if I change the data at one pie chart it is replicated to other as well..
You just have to give every chart an ID. Then you can select the ID from JS.
See my example below.
JS:
var $chart1 = $('#chart1'),
percent = parseInt($chart1.data('percent')),
deg = 360 * percent / 100;
if (percent > 50) {
$chart1.addClass('gt-50');
}
$('#chart1-fill').css('transform', 'rotate(' + deg + 'deg)');
$('#chart1-percents span').html(percent + '%');
HTML:
<!--Pie Chart1 -->
<div class="progress-pie-chart" id="chart1" data-percent="10">
<div class="ppc-progress">
<div class="ppc-progress-fill" id="chart1-fill"></div>
</div>
<div class="ppc-percents" id="chart1-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>
<!--End Chart1 -->
I have also edited the example see here http://codepen.io/anon/pen/egqRPQ
You can do it by passing different id="pie-chart-1" to your multiple pie charts.. like this..
<div class="progress-pie-chart" id="pie-chart-1" data-percent="67">
<!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
Similarly you can do for another id="pie-chart-2"
<div class="progress-pie-chart" id="pie-chart-2" data-percent="67">
<!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
& your JS will be like this
$(function(){
var $ppc = $('#pie-chart-1'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+'%');
});
Similarly for another var $ppc = $('#pie-chart-2'),
I'm using Bootstrap with the latest version of jQuery and am having an issue displaying a modal following a partial update of the page via Ajax.
The modal fires ok multiple times before the UpdateRegister function runs after 60 seconds, after that I receive a "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'" when I click on the button to open the modal again.
The button that fires the modal ('#cmdAdd') is outside the Div updated by the Ajax call.
The javascript is as below:
$(function() {
// Display Add Visitor modal
$("#cmdAdd").on("click", function () {
var url = "/Visitor/Add/";
$.get(url, function (data) {
$("#myModal").html(data);
$('#myModal').modal('show');
});
});
// Update register every 60 seconds
setInterval(function () {
UpdateRegister();
}, 60000);
});
function UpdateRegister() {
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var thisDate = month + "/" + day + "/" + year;
var url = "/Visitor/RegisterList?date=" + thisDate + "&filter=current";
$.get(url, function (data) {
$("#RegisterList").html(data);
});
}
HTML is as follows:
<div class="row">
<div class="col-lg-12">
<h2>#Model.Date.DayOfWeek #Model.Date.ToLongDateString()</h2><br />
<div class="btn-group pull-right">
<button type="button" class="btn btn-danger" id="cmdEmergency">Emergency</button>
<button type="button" class="btn btn-default" id="cmdAdd">Add Visitor</button>
<button type="button" class="btn btn-default" id="cmdAddBulk">Add Bulk Visitors</button>
</div>
<ul class="nav nav-tabs">
<li class="active">Current Register <span class="label label-success" id="CountIn">#Model.VisitorsIn</span></li>
<li>Visitors Expected <span class="label label-success">#Model.VisitorsExpected</span></li>
<li>All Visitors <span class="label label-success" id="CountTotal">#Model.TotalVisitors</span></li>
</ul>
<div class="tab-content">
<!-- Visitors currently in the building -->
<div class="tab-pane active" id="register">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="RegisterList">
#Html.Action("RegisterList", new { date = Model.Date, filter="current" })
</div>
</div>
</div>
</div>
<!-- Expected visitors not yet arrived -->
<div class="tab-pane" id="expected">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="ExpectedList">
#Html.Action("RegisterList", new { date = Model.Date, filter="expected" })
</div>
</div>
</div>
</div>
<!-- All visitors for the day -->
<div class="tab-pane" id="all">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="AllList">
#Html.Action("RegisterList", new { date = Model.Date, filter="all" })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal">
<!-- Modal content goes here -->
</div><!-- /.modal -->
How can I ensure that the modal still works after the update?
I know it sounds trivial but are you possibly missing a reference to bootstrap.js within the AJAX Html? Adding a reference worked for me when I faced the same error.
I think your #myModal just disappear when #RegisterList is set the data. You should go to check about it.