Hide web part on Sharepoint 2013 page on certain day - javascript

I have to hide one web part on page or whole page (whatever I find quicker) on every Friday. I made javascript code few months ago to hide web parts after 10AM, so I edited that code for new purpose.
window.addEventListener("load", function(){
var currentDay = new Date();
var day = currentDay.getDay();
var hideMe = document.getElementById("MSOZoneCell_WebPartWPQ3");
/* This is web part that I need to hide */
if(day=3) { /* I put 3 for today to check if it will work, but I need Friday as a day */
hideMe.style.display = "none";
}
else {
hideMe.style.display = "block";
}
}, false);

I put == instead of = inside If clause
if(day==3)
and now it works.

Related

JavaScript to change page color based on day of week and time frame schedule

I'm working on building a page to be a simple to look at page that tells the user if a shop is open or closed. I'm trying to have it display a green background and "yes, open" or a red background with "no, closed". The schedule varies every day of the week and some days the shop closes midday and reopens later. I'm having trouble getting the background and text to correctly change according to the time.
I tried implementing solutions from this user's similar problem, but I couldn't quite get them to work. I tried both the solution from 'Arnav Aggarwal' as well as the one below it from 'Darkisa'. Arnav's uses a flag set false and if statements.
When using the flag it seems to not care about the hours, only the day, put perhaps I am simply doing it wrong. Below is a code snippet, but I also have the code set up on codepen.io
let t = document.getElementById("Status");
t.innerHTML = "No";
document.body.style.backgroundColor = "red";
var q = new Date();
var hour = q.getHours();
var day = q.getDay();
function isBetween(testNumber, lowerLimit, upperLimit) {
return testNumber >= lowerLimit || testNumber <= upperLimit;
}
var flag = false;
if (day === 2 && (isBetween(hour, 0, 5) || isBetween(hour, 6, 7))) {
flag = true;
}
if (flag) {
let t = document.getElementById("Status");
t.innerHTML = "Yes";
document.body.style.backgroundColor = "green";
}
#status {width: 3em}
<div id="Status"></div>
For me, Arnav's code seems more my speed as it is clearer what is happening and I'm not super familiar with loops and arrays like Darkisa's reply.
I additionally tried making a series of if else statements, but they do not work unless the day is [6], or Saturday.
Code using Arnav's Flag solution
Code using stacked If Else

Automatically Show a Popup when it reaches 5PM without a refresh (In real time)

I have searched online to get my result but i wasn't able to come across any right solution.
I want my page to automatically show a popup everyday by 5:00PM without refreshing the page.
So, if i visit a page by 4:50Pm or anytime before 5:00PM, Once i am still on that page, it should auto pop up a div without refreshing the page.
I tried using this code but i have to refresh the page before it works which doesn't seem efficient.
$(document).ready(function() {
var currentTime = toUTC(new Date());
var startTime = toUTC(new Date());
var endTime = toUTC(new Date());
startTime.setHours(20);
startTime.setMinutes(10);
startTime.setSeconds(59);
endTime.setHours(20);
endTime.setMinutes(0);
endTime.setSeconds(0);
var currentTimez = (currentTime.getHours() + 1);
if (currentTimez == 20 && currentTime.getMinutes() == 20){
popup();
}
});
function popup() {
alert("Thanks")
}
function toUTC(inDate) {
inDate.setMinutes(inDate.getMinutes() + inDate.getTimezoneOffset());
return inDate;
}
I don't mind if i have to hit the db to get this done or using cookies.
you need to use a timer
var current = new Date();
var fivePM = new Date(current.getYear(), current.getMonth(), current.getDayOfMonth());
fivePM.setHour(17);
if (current < fivePM) {
var diff = fivePM.getTime() - current.getTime();
}
var timerID = setTimeout(popup, diff);

How to make it so when I run my script it will not run again for the day and will change another item on the page

Okay the questions are. I need help on making it so when I click the button it runs the free_cash variable in the function which I have set up. But I want it to add the givin amount to the total money the person has.
I also want to know how I can make it so when you click the button to get your free daily cash it only allows you to do it once a day and if you click it more the message switches to Something like you already been givin a handout today.
<!DOCTYPE html>
<html>
<head>
<title>
Character
</title>
<style>
</style>
</head>
<body>
<p style="margin-right: 20px; margin-left: 20px; margin-top: 5px; color: darkblue; font-size: 35px;">Money:</p>
<button onclick="FreeCash()">Free Daily Cash</button><br>
<p id="freecash"></p>
<script>
function FreeCash(){
var free_cash = "Someone handed you \"$100\" You must be a lucky man";
var nofree_cash = "Sorry you already got your handout for the day. Come back tomorrow ight.";
document.getElementById("freecash").innerHTML = free_cash;
}
</script>
<br><br><br><br>
<noscript>
<h3>This site requires JavaScript</h3>
</noscript>
</body>
</html>
You should do something like this:
function FreeCash() {
//Checks whether lastDate has been set.
if (!!localStorage.getItem("lastDate")) {
//If so and a day did not pass since then, then end the function
if ((new Date() - new Date(localStorage.getItem("lastDate"))) / (1000 * 3600 * 24) < 1) {
return;
}
}
//Set last date to current moment. You can set it to 00:00:00 of the day as well, if that fulfills your requirements better.
localStorage.setItem("lastDate", new Date());
var free_cash = "Someone handed you \"$100\" You must be a lucky man";
var nofree_cash = "Sorry you already got your handout for the day. Come back tomorrow ight.";
document.getElementById("freecash").innerHTML = free_cash;
}
This should solve the problem on client-side even if the user navigates off the page, however, you need a validation at server-side as well, because I could modify your client-side functions in my browser console whenever I want to do so.
You can use a variable to check if the button was clicked :
var clicked = false;
function FreeCash(){
var free_cash = "Someone handed you \"$100\" You must be a lucky man";
var nofree_cash = "Sorry you already got your handout for the day. Come back tomorrow ight.";
if(!clicked) {
document.getElementById("freecash").innerHTML = free_cash;
clicked = true;
} else {
document.getElementById("freecash").innerHTML = nofree_cash;
}
}
You can see the DEMO here.
EDIT:
And to make it available once a day you could use a setInterval() to reset the value of clicked to false after a day.
setInterval(function(){
clicked = false;
}, 1000*60*60*24); // after a day
It's a dirty way but it should do the trick.
You can see the updated fiddle wich executes every 10 seconds.
try this
var givenDateTime = new Date();
var isGiven = false;
function FreeCash(){
var cuurDateTime = new Date();
var message = '';
var free_cash = "Someone handed you \"$100\" You must be a lucky man";
var nofree_cash = "Sorry you already got your handout for the day. Come back tomorrow ight.";
alert(isGiven);
alert((cuurDateTime.getDate() - 1) < givenDateTime);
if(isGiven && (cuurDateTime.getDate() - 1) < givenDateTime){
message=nofree_cash;
document.getElementById("freecash").innerHTML = message;
}else{
message=free_cash;
isGiven = true;
givenDateTime = new Date();
document.getElementById("freecash").innerHTML = message;
}
}
You cannot do this with only javascript.... you need a database to store the time when your user clicked, tough a web side language (PHP, Java EE....ect).

Display html content between defined hours mon to friday

i was wondering if there is a quite simple solution to display content between certain hours and only during working days in a Europe timezone?
The hours will be everyday (except weekends) between 9AM and 5PM, between those times a html content should be shown.
If possible a different html content from 5PM till 9AM.
The short version is that you use new Date() to get the current date/time, and then you use DOM manipulation to add/remove that content as appropriate. If you want content to change in-between page loads, you'll probably also want a window.setInterval running to update things constantly.
You might want to check out the Moment.js library (http://momentjs.com/), as it has a number of functions which make working with dates/times easier.
Here's a quickie example (without using Moment) that just checks "are we past 5 or not?":
window.setInterval(function() {
if (new Date().getHours() > 17) { // if it's after 5pm (17:00 military time)
$('#someContent').hide();
} else {
$('#someContent').show();
}
}, 1000 * 60) // this will run every minute
With that hopefully you can figure out how to add the other needed if checks.
Here you go! :)
<html>
<head>
<script type="text/javascript">
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate(); // fixed
function SetDivContent() {
var div=document.getElementById('date_dependent');
if (year==2010 && month==11) { // fixed (the JavaScript months order is 0-11, not 1-12)
if (day>=3 && day<11) { // the following content will be displayed 12/03/2010, 12/04/2010, [...], 12/09/2010, 12/10/2010
div.innerHTML='content 1';
}
else if (day==11 || day==12) { // this one will be displayed 12/11/2010 and 12/12/2010
div.innerHTML='content 2';
}
else if (day>12) { // this one - 12/13/2010 and later, until the end of December
div.innerHTML='content 3';
}
}
else if (year==2011 && month>=0) div.innerHTML='content 3'; // OPTIONAL - just to ensure that content 3 is displayed even after December.
}
</script>
</head>
<body onload="SetDivContent()">
<div id="date_dependent"></div>
</body>
</html>
answered Nov 30 '10 at 22:16
rhino

How do change javascript cookie from 15 day count to manually do a new cookie?

I'm implementing a script with Colorbox which shows a nice popup the first time a user visits a website. This script that I found is setting the cookie to last for 15 days - what I want is to manually be able to manage the "cookie-update" by my own. In my case I want to use this script to show the user that my website has been updated and using the Colorbox to show the changelog; just on the first visit. Something like this:
Update #1 -> New cookie tells there's a new update -> Show Colorbox 1 time -> Then no more, until...
Update #2 -> New cookie tells there's a new update -> Show Colorbox -> ...and so on...
Short version of the question: How do I change the script from a 15 day timer to manually be able to change it so I can decide when I want to show my Colorbox with a new changelog?
The original script is located here:
http://papermashup.com/automatic-jquery-site-subscription-lightbox/
You need to put a date in the site - Note JS months start at zero
DEMO
var latestUpdate=new Date(2012,11,10).getTime(); // 10th of December
var whatVersionSeen = parseInt($.cookie("visited"));
if (isNaN(whatVersionSeen)) whatVersionSeen = 0; // first time
if (whatVersionSeen < latestUpdate) { // whatever in the cookie < latest update
$.cookie('visited', latestUpdate, { expires: 365 });
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
the above code replaces
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
completely and expects to find $.cookie
There is Jquery Code in that Script.
$("document").ready(function (){
// load the overlay
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
$(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
});
if you want to change the days then change it here.
var fifteenDays = 1000*60*60*24*15;

Categories