I recently started working on a Work Day Schedule project that requires me to use jQuery, HTML and Day.js. This project requires that I display a clock at the top of the page, text areas that can be written in and saved to local storage (this text stays even when page is reloaded) and the color of each time block is based on whether it is past(gray), present (red), or future (green).
I have displayed the clock and figured out how to keep text saved in the text area but I cannot figured out how to keep the time blocks appropriately colored based on what time it is.
This is my javascript. The documentation I found to help was sadly written in moment.js and I'm wondering how I would convert this to Day.js to meet the project requirements.
var dateTime = $('#dateTime');
var saveBtn = document.querySelector(".saveBtn");
var currentHour = moment().hour();
function printDateTime() {
var date = moment().format("dddd, MMM Do YYYY")
dateTime.text(date);
}
function hourTracker() {
$('.timeSchedule').each(function () {
var schedulehHour = $(this).attr("id").split("time")[1];
console.log("currentHour " + currentHour)
console.log("schedulehHour " + schedulehHour)
if (schedulehHour < currentHour) {
$(this).addClass("past");
}
else if (schedulehHour == currentHour) {
$(this).addClass("present");
}
else {
$(this).addClass("future");
}
})
}
$(".saveBtn").on("click", function () {
var value = $(this).siblings(".description").val();
var time = $(this).parent().attr("id");
localStorage.setItem(time, value);
})
$("#time08 .description").val(localStorage.getItem("time08"));
$("#time09 .description").val(localStorage.getItem("time09"));
$("#time10 .description").val(localStorage.getItem("time10"));
$("#time11 .description").val(localStorage.getItem("time11"));
$("#time12 .description").val(localStorage.getItem("time12"));
$("#time13 .description").val(localStorage.getItem("time13"));
$("#time14 .description").val(localStorage.getItem("time14"));
$("#time15 .description").val(localStorage.getItem("time15"));
$("#time16 .description").val(localStorage.getItem("time16"));
$("#time17 .description").val(localStorage.getItem("time17"));
printDateTime();
hourTracker();
I tried writing in moment.js but needs to be in day.js.
Related
I'm trying to write a script that will allow me to redirect to a web page every Friday at a specific time.
Was hoping to have the script redirect to an Iframe for a live video feed, and after an hour, have the script also redirect to a html file that will be stored on the pc running a splash page till the next feed the following week, which will start the script again based on day and time.
Been trying for the past 3 hours to salvage something from scripts I've found on stack overflow with no success. Would GREATLY appreciate some help on this!
I Hope this will works for You.
function myFunction() {
var d = new Date();
var n = d.getDay()
var time=.getHours()
if(n==5)
{
//based on time
if(time==14)
{
window.location.href="www.YourRedirectpage.com";
}
}
This should work (ES5 syntax):
Date.prototype.hour = function () {return (this.getHours())}
Date.prototype.day = function () {return (this.getDay())}
var today = new Date()
if (today.hour() == "10" && today.day() == "6") {
// change you url here, such as; location.href ="friday url";
}
else {
// keep (or re-attribute) your base url, such as; location.href ="base url";
}
I guess you want some kind of simplified job in UI which will keep watching and do redirect for you and you don't need to manually intervene much. You should use a setTimeout from Javascript to achieve this.
What this solution does that it calculates the millisecond difference between coming Friday with specific time till current date time and starts a timeout event.
Hope this is easy to understands and helps you.
GIT Repo: https://github.com/helloritesh000/how-to-redirect-browser-at-specific-date-and-time
<!DOCTYPE html>
<html>
<body onload="RedirectTo(5, 15, 49, 30);"> <!-- RedirectTo(day(1-7(Monday)-(Sunday)),1-24 hour,1-60 min,1-60 sec) -->
<h1>This will reload redirect page</h1>
# - <p id="demo"></p>
<script>
function getNextDayOfWeek(date, dayOfWeek) {
// Code to check that date and dayOfWeek are valid left as an exercise ;)
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
}
function RedirectTo(day, hour, min, sec) {
var d = new Date(getNextDayOfWeek(new Date(), day));
d.setHours(hour);
d.setMinutes(min);
d.setSeconds(sec);
document.getElementById("demo").innerHTML = d;
var totalMilliSecDiff = d-new Date();
if(totalMilliSecDiff > 0)
{
setTimeout(function(){ window.location.href = "http://www.google.com"; }, totalMilliSecDiff);
}
}
</script>
</body>
</html>
I have a request that goes beyond my very basic scripting abilities. I have a website with a message that tells users how many days they have left until their password expires:
"John doe's password expires in 91 days"
I'd like to add some script that evaluates this statement, which is contained in a div of class "expiryNotice," extract the number, and basically hide the entire div if greater than 60.
I've written JS/jQuery to do static modifications before, but never anything with any kind of logic, so I am a bit lost with where to begin.
Any help would be much appreciated!
Caveat, there are probably more reasonable ways to go about this than parsing the text in the message div, but this will do it:
$(function(){
var msg = $('#notice').text()
var days = msg.match(/\d+/)[0]
console.log(days)
if(Number(days) > 60) {
$('#notice').hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice">"John doe's password expires in 91 days"</div>
function CheckExpiryNotice(maxNum) {
var expiryNoticeDiv = $('.expiryNotice');
var expiryNoticeStr = expiryNoticeDiv.text();
$(expiryNoticeStr.split(" ")).each(function(i,e) {
if($.isNumeric(e)) {
if(e > maxNum) {
expiryNoticeDiv.hide();
}
}
});
}
Calling this function should work CheckExpiryNotice(60);
You can do something like this in javascript, if you don't want to use jQuery:
var elem = document.getElementsByClassName('expiryNotice');
var str = elem[0].innerText;
var days = str.match(/\d+/)[0];
if (+days > 60) {
elem[0].hidden = true;
}
I am making an app displaying the current system time but I want to get the time my page started running so I can calculate and display the time that my page is up and running. I am using angularjs and currently has no idea on how can I get this. I have my code on getting the current system time like this
Current time is:
<span my-current-time="format1"></span>
<span my-current-time="format"></span> :
<span my-current-time="format3"></span> :
<span my-current-time="format4"></span>
<span my-current-time="format5"></span>
with this script
$scope.format1 = 'M/d/yy ';
$scope.format = 'h';
$scope.format3 = 'mm';
$scope.format4 = 'ss';
$scope.format5 = 'a';
$scope.format2 = 'Z ';
and a directive like this
.directive("myCurrentTime", function(dateFilter) {
return function(scope, element, attrs) {
var format;
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
function updateTime() {
var dt = dateFilter(new Date(), format );
element.text(dt);
}
function updateLater() {
setTimeout(function() {
updateTime(); // update DOM
updateLater(); // schedule another update
}, 1000);
}
updateLater();
}
});
I just want to display the total hours my page is currently running
first save the page load value... $scope.pageLoad = new Date()
and then use a filter to display that value
<p>running since : {{pageLoan | timespan}}</p>
and define timespan filter
angular.filter(timespan, function(time){
var now = new Date();
return (now - time) / 1000;
});
Pretty much as the title. I have been asked if it is possible to have a specific banner shown in a section on a website on different days without any external user input.
My first thoughts are the use of javascript/jquery. We are limited with the functionality however as the site is controlled by the horror that is Netsuite.
Any help/ideas are appreciated :)
-Wayne
EDIT: With regard to your comment, it sounds like you want to load a different slideshow depending on the day of the week.
Here's a simple generic example of how it could be done.
// Insert the code that loads the individual slideshows in the functions below
var slideshows = [
function() { /* insert code to load some slideshow */ },
function() { /* insert code to load some other slideshow */ },
function() { /* insert code to load a different slideshow */ },
function() { /* insert code to load yet another slideshow */ }
];
// call a slideshow function depending on the day of week
slideshows[ new Date().getDate() % slideshows.length ]();
This will call a different function from the Array depending on the day of week. You don't need seven of them. It will automatically rotate.
There are other ways to approach this, but I'd need to see how the slideshows are set up. This is a simple approach.
If you have more than 7 different slideshows, it will need to be changed a bit.
EDIT: This answer assumes you meant different per day of week. Not sure if that was your intention.
This is probably better than my original answer since it doesn't require loading all the banners.
javascript only version
Example: http://jsfiddle.net/patrick_dw/5drgu/4/
var banners = [
"http://dummyimage.com/120x90/f00/fff.png&text=my+image",
"http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
"http://dummyimage.com/120x90/00f/fff.png&text=my+image",
"http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
];
var banner = new Image();
banner.src = banners[ new Date().getDate() % banners.length ];
document.getElementById('container').appendChild( banner );
jQuery version
Example: http://jsfiddle.net/patrick_dw/5drgu/7/
(changed it a bit so it doesn't start with an empty <img>)
var banners = [
"http://dummyimage.com/120x90/f00/fff.png&text=my+image",
"http://dummyimage.com/120x90/0f0/fff.png&text=my+image",
"http://dummyimage.com/120x90/00f/fff.png&text=my+image",
"http://dummyimage.com/120x90/ff0/fff.png&text=my+image"
];
var banner = $('<img>', { src:banners[ new Date().getDate() % banners.length ]})
.appendTo('#container');
html
<div id='container'></div>
Original answer:
Here's one way:
Example: http://jsfiddle.net/patrick_dw/5drgu/
var banners = $('#container img').hide();
banners.eq( new Date().getDate() % banners.length ).show();
html
<div id='container'>
<img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" />
<img src = "http://dummyimage.com/120x90/0f0/fff.png&text=my+image" />
<img src = "http://dummyimage.com/120x90/00f/fff.png&text=my+image" />
<img src = "http://dummyimage.com/120x90/ff0/fff.png&text=my+image" />
</div>
The first thought should be server-side.
If that is not an option then you could do it with javascript/jquery with the limitations it brings. Javascript enabled browsers.
You could name your files accordingly ie. image-19-7-2011.jpg and use the Date() object to create the filename to use for the current date.
Something like
var d = new Date();
var filename = 'image-' + d.getDate() + '-' + d.getMonth() + '-' + d.getFullYear() + '.jpg';
document.getElementById('banner').src = '/path/to/' + filename;
example at http://jsfiddle.net/rZaqx/
var now = new Date();
var date = now.getMonth() + "-" + now.getDay();
switch(date) {
case "04-01":
$('<p>APRIL FOOLS!</p>').appendTo("body");
break;
case "01-01":
$('<p>Happy New Year!</p>').appendTo("body");
break;
}
This answer assumes you want a different banner image for each day of the week.
If you aren't able to update the banner in the backend then it would be possible just to have all the banners on the page, hidden with the CSS display: none.
Then just use something like:
var date = new Date();
$("#banner" + date.getDay()).show();
This will work if you have 7 elements named banner0 for Sunday, banner1 for Monday, etc.
Alternatively, if you just want to change the banner image then you could set your CSS like so:
div#banner { background-image: url(default.jpg)} // Common styling
div#banner.day0 { background-image: url(image0.jpg); } // Image for Sunday
div#banner.day1 { background-image: url(image1.jpg); } // Image for Monday
div#banner.day2 { background-image: url(image2.jpg); } // Image for Tuesday
Then your jQuery could look like:
var date = new Date();
$("div#banner").addClass("day" + date.getDay());
Of course, the issue with both these options are that you need to have a different banner for each day. They're just some ways you can do it (but definitely not the only ways)
I am trying to get this to work in my iweb page hosted not on MobileMe. With the code below I continue to get the alert box on each refresh of the page instead of once per session. I am a total newbie here so be kind please.
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var answer=confirm("Click OK if you have been cleared Sutter's HR department to start
volunteering.")
if (answer)
alert ("Excellent!! Please select your dates directly within the scheduling calendar.")
else
alert ("Let's get to it then. Contact Ruth in HR at 576-4208 to schedule an appointment so you can get started.")
///No editing required beyond here/////
//answer only once per browser session (0=no, 1=yes)
var once_per_session=1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}
function loadalert(){
alert(alertmessage)
}
if (once_per_session==0)
loadalert()
else
alertornot()
</script>
Your code calls this once per session:
alert(alertmessage)
but the code on top is called on each load of the script.
Moreover - I don't see where alertmessage is defined...
So You probably want to put the code from the top inside the loadalert function resulting in this:
function loadalert(){
var answer=confirm("Click OK if you have been cleared Sutter's HR department to start volunteering.")
if (answer)
alert ("Excellent!! Please select your dates directly within the scheduling calendar.")
else
alert ("Let's get to it then. Contact Ruth in HR at 576-4208 to schedule an appointment so you can get started.")
}
EDIT:
And BTW - start using curly braces. It helps in debug and in understanding where You are. :)