CODEWITHSUNDEEP
javascriptjquerydate
h0rhay
h0rhay

Reputation: 131

Show/Hide divs based on date

I'm trying to show hide divs based on date and am experimenting with the following code:

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>

window.setInterval(function(){

  var current = new Date();
  var expiry  = new Date("October 29, 2012 12:00:00")
  var expiry2 = new Date("October 30, 2012 12:00:00")

  if(current.getTime()>expiry.getTime()){
    $('#one').hide();
    $('#two').show();
  }

  else(current.getTime()>expiry2.getTime()){
       $('#two').hide();
       $('#three').show();
   }

}, 3000);

$('#one').show(); 
</script>

<div id="one" style="display:none">
<p>content for div #one</p>
</div>

<div id="two" style="display:none">
<p>content for div #two</p>
</div>

<div id="three" style="display:none">
<p>content for div three</p>
</div>

Console in chrome is throwing up :

Unexpected token {

So it seems there's a syntax error with the if else statement, but it looks ok to me : (

Can any one spot what I'm missing?

Upvotes: 6

Views: 27882

Answers (5)

YDF
YDF

Reputation: 405

You forgot the if inside the else statement. Your if-else block should be something like below:

if (current.getTime() > expiry.getTime()) {
    $('#one').hide();
    $('#two').show();
} else if (current.getTime() > expiry2.getTime()) {
    $('#two').hide();
    $('#three').show();
}

Upvotes: 1

J. Medel
J. Medel

Reputation: 35

I've manipulated the script a bit so that you can add the class and the item will disappear on the time you decide. It will either show or hide if the content has expired. You can add more variables and else if statements, if need be.

I'm still learning JS and jQuery so please keep this in mind but everything seems to work the way I wanted it to and I have no errors in the Console.

https://jsfiddle.net/medel/qhgrtwzm/2/

HTML

<div class="houdini" style="display:none">
  <p>content for div #one</p>
</div>

JS with jQuery enabled 1.8.3

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date("January 19, 2016 17:39:00")

  if (current.getTime() > expiry.getTime()) {
    $('.houdini').hide();

  } else if (current.getTime() < expiry.getTime()) {
    $('.houdini').show();
  }

}, 0);

Upvotes: 3

Ryan
Ryan

Reputation: 428

Jacob George's answer is excellent! Posting this up in case it helps anyone. I had to modify the date/time format for UTC/GMT compatibility with Internet Explorer. I also reordered the logic so it triggers like a waterfall, only showing one div based on the expiry time, or no div's if the current time is before the expiry value.

Javascript:

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date('2015-12-03T02:00:00.000-08:00')
  var expiry2 = new Date('2015-12-04T02:00:00.000-08:00')
  var expiry3 = new Date('2015-12-05T02:00:00.000-08:00')

  if (current.getTime() > expiry3.getTime()) {
    $('#one').hide();
    $('#two').hide();
    $('#three').show();
  } else if (current.getTime() > expiry2.getTime()) {
    $('#one').hide();
    $('#two').show();
    $('#three').hide();
  } else if (current.getTime() > expiry.getTime()) {
    $('#one').show();
    $('#two').hide();
    $('#three').hide();
  }

}, 3000);

Upvotes: 1

Jacob George
Jacob George

Reputation: 2627

You can check the working jsfiddle if you want

The issue is you require an else if at else (current.getTime() > expiry2.getTime()) {

UPDATE 1

Close each div with </div>. Fiddle is also updated

UPDATE 2

You also have what I think is a logical error. If you want the condition (current.getTime() > expiry2.getTime()) to be activated, it cant come as the else of the first condition (current.getTime()>expiry.getTime()). Change the else if to if, it should work then, although to further optimize the code, you could enclose the second if within the first if (considering that expiry is always less than expiry2 )

Upvotes: 7

VisioN
VisioN

Reputation: 145378

You forgot about if after else:

else if (current.getTime() > expiry2.getTime()) {

Upvotes: 5

Related Questions