Disable a link on Friday at 4PM and enable on Sunday 7:00AM

Question

I'm trying to use a bit of JavaScript to get the date and time and then use some jQuery to enable/disable a link.

So I have something like this,

<a href="link.html" title="Link">
<img src="link.gif" alt="link" />
</a>

And between Friday at 4PM and Sunday at 7:00AM, I'd like to have it just say this,

<img src="link.gif" alt="link">

How would I be able to do that?

P.S. I would prefer to have the link hardcoded rather than to have it propped with the JavaScript...

Should the date/time being checked only on page load (I'd suggest to do this in a server side script), or should the page be updated exactly on 4 PM and 7 AM? — Yogu, Jan 01 '12 at 21:29
As @Yogu was hinting at - you really need to do this server side. If you do it in javascript, someone could enable the link on the client side and still click it. How important is it that the link is unavailable? — Origin, Jan 01 '12 at 21:33
All that I don't mind, if I have to remove the link altogether rather than disabling it, that's fine. — henryaaron, Jan 01 '12 at 21:34
The problem with JavaScript will be that it will be disabled/removed between those times on the client machine and not on your machine. SO say if you want to disable the link in that period in your time (say US) it will not be disabled at the same time in say Europe. — Virendra, Jan 01 '12 at 22:03
But I would still suggest you to use a standard method, as to what if a user from US is travelling outside US. Also, even in US we have different timezones, so in that case also the link would not be disabled simultaneously for all the users. I have added an answer which you might be interested in. — Virendra, Jan 01 '12 at 22:19
It's not going to be very nice for the user if you use the same image whether enabled or not. Better to replace with a "disabled" image, or remove the link entirely, or leave it enabled but if clicked display a message "Sorry, not available between 4 pm Friday and 7 am Sunday". — nnnnnn, Jan 01 '12 at 22:33

score 1 · Answer 1 · answered Jan 01 '12 at 21:59

Instead of removing the anchor tags () just disable it using code like this:

function AGoodTime() {
    var now = new Date();
    var day = now.getDay();
    var hour = now.getHours();
    var IsBadTimeOnFriday = day == 5 && hour >= 16;
    var IsBadTimeOnSaturday = day == 6;
    var IsBadTimeOnSunday = day == 7 && hour <= 7;
    return !IsBadTimeOnFriday && !IsBadTimeOnSaturday && !IsBadTimeOnSunday;
}

$('.GoodTimes').click(function(event) {
    if(!AGoodTime()) {
        event.preventDefault();
    }
});

with HTML like this:

<a class="GoodTimes" href="http://www.google.com" target="_blank">test link</a>

Yogu · Answer 2 · 2012-01-01T22:39:15.610

0

A javascript solution that moves the image out of the link and removes the link, when the date is within the specified range:

var d = new Date();
var doDisable = (d.getDay() == 5 && d.getHours() >= 16) || d.getDay() == 6 || (d.getDay() == 0 && d.getHours() < 7);
if (doDisable) {
  $('#link img').insertBefore('#link');
  $('#link').remove();
}

Put this into a jQuery-DOM-Ready-Loader. Here's the jsfiddle.

As @Origin pointed out, this does not prevent the user from accessing the linked url, it only hides the link in javascript-enabled browsers.

edited Jan 01 '12 at 22:39

answered Jan 01 '12 at 21:38

Yogu

9,165
5
37
58

Didn't Work... My computer is set to Friday 5PM – henryaaron Jan 01 '12 at 21:51
Have you added `id="link"` to the link? I forgot to mention that. – Yogu Jan 01 '12 at 22:29
A semicolon was missing, but this didn't matter on Firefox. See the jsfiddle for a working version. In contrast to the other solutions, this code really removes the link instead of disabling it. – Yogu Jan 01 '12 at 22:40

alonisser · Answer 3 · 2012-01-01T22:12:04.020

0

something like:

// caching the time variables.
var today = new Date();
var d = today.getDay();
var h = today.getHours();

if (d == 6 || (d ==5 && h>16) || (d == 0 && h < 7)) {
   $('a').click(function(e){
   e.preventDefault(); #prevent the link from working, without hiding it..
});
}

edited Jan 01 '12 at 22:12

answered Jan 01 '12 at 21:41

alonisser

11,542
21
85
139

Didn't Work... My computer is set to Friday 5PM – henryaaron Jan 01 '12 at 21:51
maybe the Date object works with a different day numbering.. check in the console what are you getting.. or maybe js takes the time from the web server? or is the link preventing doesn't work? do you have errors in the console? – alonisser Jan 01 '12 at 22:07

score 0 · Accepted Answer · answered Jan 01 '12 at 21:50

0

here's a working version http://jsbin.com/ahitiv/9/edit#source

function ShowHide()
{
  var d = new Date();
  var dayofweek = d.getDay();
  var hourofday = d.getHours();
  if ((dayofweek === 0 && hourofday <= 7) || dayofweek === 6 || (dayofweek === 5 &&     hourofday >= 16)) 
  {
    $("#hello a").click(function(e){
    e.preventDefault();});
  }

}



$(document).ready(function(){

    ShowHide();

});

answered Jan 01 '12 at 21:50

mhps

166
5

i would prefer Virendra's solution. – Jan 01 '12 at 22:51

score 0 · Answer 5 · answered Jan 01 '12 at 21:50

first of all, I have to say, this sounds more like a job for server side.

something like (pseudo code)

if shouldDisplayLink
 echo "<a ... <img ... </a> "
else
 echo "<img ... />"

but if JS solution is required, you can do the following the jquery. Create 2 divs. lets call one "with link" and the other "without link". Check if the time is before or after, and then invoke "hide" on the one you don't want to display. it will look something like

<div id="withlink">
    <a href="http://steps.mograbi.info">
       <img src="http://steps.mograbi.info/images/steps-logo.png?1321507410" alt="steps"/> 
    </a>
</div>

<div id="withoutlink">
    <img src="http://steps.mograbi.info/images/steps-logo.png?1321507410" alt="steps"/>
</div>
<script type="text/javascript">
    $(function(){
        var d = new Date();

        if (( d.getDay() == 5 && d.getHours() > 16 ) ||
            ( d.getDay() == 0 && d.getHours() < 7 ))
        {
            console.log("hiding with link");
            $("#withlink").hide(0);
        }

        console.log("hiding without link");
        $("#withoutlink").hide(0);
    })
</script>

let me know if there's something I should add/modify.

score 0 · Answer 6 · edited May 23 '17 at 12:20

The problem with JavaScript will be that it will be disabled/removed between those times on the client machine and not on your machine. SO say if you want to disable the link in that period in your time (say US) it will not be disabled at the same time in say Europe.

So the best way to do this is to disable the link from server side.

Alternate way to do in JavaScript can be to get the server time or time from some standard location, which will not change according to user's location and depending on that enable or disable the link. I found this code to get the time.

$(document).ready(function(){
  var timezone = "Europe/Berlin";
  $.getJSON("http://json-time.appspot.com/time.json?tz="+timezone+"&callback=?",
    function(data){
      if (data.hour < 12) {
        alert ("Good morning in "+timezone);
      } else {
        alert ("Good afternoon in "+timezone);
      }
    })
});

Now you can use this code to show/hide the link by creating 2 divs/spans and displaying one based on your time.

Update:
Here is an working example of the method I just mentioned. http://jsfiddle.net/pkDNX/

You will have to adjust the code to your timezone and the if conditions.

Update: Here is the working example for your requirements. http://jsfiddle.net/pkDNX/1/

Disable a link on Friday at 4PM and enable on Sunday 7:00AM

6 Answers6

Linked