CODEWITHSUNDEEP
jqueryhtml
Ryan
Ryan

Reputation: 9

JQuery hide div based on day

Here's the updated code again I want the div for Friday, not to appear on Friday. I also want it not to appear after 5pm but I could not get passed day problem. Thank you for all you help.

<html>
<head>

<script type="text/javascript"> 

  $(document).ready(function() {
    var rightNow = new Date(); 
    var day = rightNow.getUTCDay(); 
    if (day == 5) { 
      $('#friday').hide(); 
    } 
  });
</script>

<style type="text/css">

div {
border:solid black 1px;
background-color:lightblue;
color:darkblue;
font-size:14pt;
font-family:arial;
width:550px;
height:220px;
overflow:auto;
padding:5px;
}
</style>


</head>
<body>



<div id='friday'>
friday
</div>
<br>
<div id='saturday'>
saturday
</div>
<br>
<div id='sunday'>
sunday
</div>
<br>



</body>
</html>

Upvotes: 0

Views: 2655

Answers (4)

rosscj2533
rosscj2533

Reputation: 9323

The only problem with the latest code you just posted is that you removed your jQuery include (as John Fisher pointed out). Put the line

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

back in and it will work as you want it to.
To handle the after 5pm problem you would do this:

$(document).ready(function() {
    var rightNow = new Date(); 
    var day = rightNow.getUTCDay();
    if (day == 5 || rightNow.getHours() > 17) { 
      $('#friday').hide(); 
    } 
});

Here's a good reference on the javascript date object.

Upvotes: 0

David Larrabee
David Larrabee

Reputation: 384

i suggest John Fishers answer.

the only thing that you could do to expand on it would be to put the day in a switch, assuming you want to hide each item depending on the day rather than ONLY hide on friday if it's 5

<script type="text/javascript"> 

  $(document).ready(function() {
    var rightNow = new Date(); 
    var day = rightNow.getUTCDay(); 
    switch(day)
    {
      case 0:
        //whatever you want to do on 0
        break;
      case 1:
        //whatever you want to do on 1
        break;
      case 2:
        //whatever you want to do on 2
        break;
      case 3:
        //whatever you want to do on 3
        break;
      case 4:
        //whatever you want to do on 4
        break;
      case 5:
        $('#friday').hide(); 
        break;
      case 6:
        //whatever you want to do on 6
        break;
  });
</script>

Upvotes: 1

Matt
Matt

Reputation: 44058

You're assigning instead of comparing:

if (day = 5;) {

Should be:

if (day === 5) {

If you're not familiar with === .. it is the same as == except it is strict (does not perform type coercion).

You can read more about comparison operators here.

Edit:

Also be sure to read John's answer, because it looks like that is contributing to your problem as well.

Upvotes: 3

John Fisher
John Fisher

Reputation: 22721

Most likely, you're running into an issue where the script executes before the elements are part of the DOM. So, wrap your script like this:

<script type="text/javascript"> 

  $(document).ready(function() {
    var rightNow = new Date(); 
    var day = rightNow.getUTCDay(); 
    if (day == 5) { 
      $('#friday').hide(); 
    } 
  });
</script>

Notice that I also fixed the "day = 5;" mis-condition.

Upvotes: 7

Related Questions