I'm creating a website thats going to work like an online advent calendar; I want to be able to make sure that a link wont open until the correct day. Heres what I have so far:
<area shape="rect" coords="0,0,90,150" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" alt="1" target="_blank" onClick="return canOpen(this)">
<script>
function canOpen(isTrue) {
var isOpen = new Date("Dec "+isTrue+", 2020 00:00:00").getTime();
var currentTime = new Date().getTime();
var timeDifference = isOpen - currentTime;
if (timeDifference > 0) {
<! Go to link>
}
else {
<! Show popup "You can't open this yet!>
}
}
</script>
How could I make it so that you can go to the link if it is past the date in question, and how would I get the value of alt out of the link and into the script?
Thanks for any help.
You can use Element.getAttribute() to get attribute alt as event date for check in script.
Then check if the current date passed event date, redirect by change site's location, or do anything else you like otherwise, if the element has redirect as default behavior (like a tag), you will need return false; to prevent default behavior.
function canOpen(element) {
var isOpen = new Date("Dec "+element.getAttribute("alt")+", 2020 00:00:00").getTime();
var currentTime = new Date().getTime();
var timeDifference = isOpen - currentTime;
if (timeDifference > 0) {
window.location.href = element.getAttribute("href");
} else {
alert("Not yet!");
// return false; // for `a` tag
}
}
I created two functions, one to set the date, and one to check if the link can open. If the release date has passed, the href of the link changes from "#" to the Youtube link. The date updates every second with setInterval.
Example on JSFiddle
Also, did I just get RickRolled?
<a id="premiere-link" href="#">Youtube Link</a>
<script>
// setInterval(canOpen, 1000);
let month, day, year, time;
const link = document.getElementById('premiere-link');
setDate(); //set date immediatly on page load
setInterval(setDate, 1000); //update date every second
function setDate() {
var dateObj = new Date();
month = dateObj.getUTCMonth() + 1; //months from 1-12
day = dateObj.getUTCDate();
year = dateObj.getUTCFullYear();
time = dateObj.getTime();
}
function canOpen(month, day){
//set month and day for release
if (month >= 11 && day >= 1) {
alert('You just got RickRolled')
link.setAttribute('href', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
} else {
link.setAttribute('href', '#');
alert('You have to wait to get RickRolled')
}
}
link.onclick = () => {canOpen(month, day)};
</script>
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 text field that I need only to display for a certain period of time.
I need it to appear after 5pm and stop appearing at 7am daily.
The piece of text has been saved as a variable.
How do I do this?
Thanks
You can get time using Date() object and then show and hide your text. e.g
HTML:
<div class="someClass">Your text </div>
JavaScript:
var currentDate = new Date();
var currentTime = currentDate.getHours();
if(currentTime >=17 || currentTime <=7) {
document.getElementsByClassName('someClass')[0].style.visibility = 'visible';
} else {
document.getElementsByClassName('someClass')[0].style.visibility = 'hidden';
}
I am very new to HTML, CSS and JavaScript. I am trying to use jQuery to make a button active or inactive depending on the time of day. I have managed to get the image to change correctly after defining the time now (d), an open time and a close time. However I am having problems assigning a link to the buttons depending on the time of day.
This code correctly applies a class if the time is between open and close. It also correctly applies the link to the ButtonOne div, only when the ManagersChatButtonActive class is applied, in a JSFiddle. However in SharePoint, were this will be, the link is also applied even when the time condition is not met.
How can I get the link to only be applied when the 'if' condition is met?
(This is my first time on Stack Overflow, so apologies if this is not very well laid out or explained).
$(document).ready(function() {
var d = new Date();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
});
Make sure you wrap your method in the JQuery syntax for document on ready or on load as follows:
$(function(){
var d = new Date()
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
})
https://jsfiddle.net/aaronfranco/3xwhoh10/1/
It might also make more sense to use getTime() to use a UNIX timestamp, which is a number, instead of a date string.
$(function(){
var d = new Date().getTime();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
open = open.getTime()
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
close = close.getTime()
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
})
Don't forget to get the current time with the getHours or getTime method. You want this to compare to your condition. These values do not have to be in a time-format, it also possible to just use some static numbers.
You can just do something like this:
var time = new Date(),
hours = time.getHours();
if (hours >= 9 && hours < 18) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
Working example: https://jsfiddle.net/crix/7o4uhLxe/
Hope this helps!
I checked your code in browser with jQuery, but I don't know about SharePoint, so I guess if you just enclose your code which works fine with jQuery, in .ready() so that when document is ready only then your code is run and when the ".ButtonOne" element is initialized in dom:
$(document).ready(function(){
var d = new Date();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
console.info(d);
console.log(open);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
console.log(close);
if (d >= open && d < close) {
console.info("INSIDE");
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
console.info("INSIDE ELSE");
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ButtonOne" >
This is the desired ButtonOne Div
</div>
I'm trying to figure out how to onClick a buttom so that it automatically figures what day the machine is in and find the website according to it (e.g. if it is Sunday, it will find Sunday.html)
Being a beginner at HTML, CSS and Javascript, I got the code from w3schools and changed the output to just .html - obviously, it didn't work. I was wondering is there any simple way of correcting this?
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var d = new Date();
var weekday=new Array(7);
weekday[0]="Sunday.html";
weekday[1]="Monday.html";
weekday[2]="Tuesday.html";
weekday[3]="Wednesday.html";
weekday[4]="Thursday.html";
weekday[5]="Friday.html";
weekday[6]="Saturday.html";
var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>
I've also did another way through using if statement,
if (currentDay == 6)
{
window.location = 'saturday.html';
}
}
else if (currentDay == 0)
{
window.location = 'sunday.html';
}
etc.
Again, it doesn't seem to work. Is there simple way of doing this?
Thanks in advance
The second method of doing window.location to the url is correct.
I did minor modification to your code. Please try the fiddle (http://jsfiddle.net/QK2TL/1/).
Open the debug console to see the messages.
var d = new Date();
var loc = weekday[d.getDay()];
alert("about to navigate to " + weekday[d.getDay()]);
window.location = loc;
function myFunction()
{
var d = new Date();
var weekday=[];
weekday[0]="Sunday.html";
weekday[1]="Monday.html";
weekday[2]="Tuesday.html";
weekday[3]="Wednesday.html";
weekday[4]="Thursday.html";
weekday[5]="Friday.html";
weekday[6]="Saturday.html";
return weekday[d.getDay()];
}
window.location = myFunction();
I'm working on a web page and I have this function which is showing the pic of the day of a parent site
function LoadPage() {
var today = new Date();
var yyyy = today.getFullYear();
var mm = today.getMonth()+ 1;
var dd = today.getDate();
var url="http://myparentsite"+yyyymmdd+"/image.jpg";
document.getElementById("img").setAttribute("src",url);
}
The pic of the day is usually set in the morning so I've a problem between midnight and 7-8 am during those hours the browser will show the "?" of "image not found".
How can I set it to show the image of the day before?
I tried
var dd2 = today.getDate() -1;
var url2="http://myparentsite"+yyyymmdd2+"/image.jpg";
but I don't know how to handle it in the function and in the Html.
Simple answer is have the parent site reference a constant image location, when you have a new daily image then overwrite the image with the new one and archive the old daily image.
<img src='http://myparentsite/imageOfTheDay.jpg'/>
otherwise you can check for an error and set it to yesterday's image
document.getElementById("img").onError = function() {
var dd2 = today.getDate() -1;
var url2="http://myparentsite"+yyyymmdd2+"/image.jpg";
document.getElementById("img").setAttribute("src",url2);
}
or check the date of the request and determine what image to show
var now = new Date();
var now_utc_hour = now.getUTCHours();
url = "http://myparentsite"+yyyymmdd+"/image.jpg";
if( now_utc_hour > 7 && now_utc_hour < 8 ) "http://myparentsite"+yyyymmdd2+"/image.jpg";
document.getElementById("img").setAttribute("src",url);
Basically, you need to handle an event on the image.
document.getElementById("img").onError = function() {
// the image didn't load properly, change the src attribute
document.getElementById("img").setAttribute("src", url2);
}
document.getElementById("img").setAttribute("src",url);
Try This:
<img src="http://myparentsite/imageOfTheDay.jpg" alt="" onerror="this.src='http://myparentsite/alternateImageOfTheDay.jpg'"/>
-Arpit