dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Hide <div> from Mon at noon through Thur till noon? JavaScript

  1. #1
    Join Date
    Mar 2015
    Posts
    7

    Question Hide <div> from Mon at noon through Thur till noon? JavaScript

    Hello,
    I am new to JS and running into a slight problem. I am hoping/thinking this is a simple fix. I researched how to do some of this online, but still have't been able to find exactly what I am looking for. I have a "contactform" <div> that I would like to have hidden every Monday at Noon until Thursday at noon when it would become viewable again. Also when it is hidden I would like to have some message displayed in place of the form. So far I have:

    <script type="text/javascript">
    onload=function(){
    var rightNow = new Date();
    var day = rightNow.getUTCDay();
    var hour = rightNow.getUTCHours();
    var minute = rightNow.getUTCMinutes();
    var newDisplay = 'none'; // unless we see otherwise

    if(day == 1 || day== 2 || day==5 || day==6 || day==7) { // if we're on the air these days
    newDisplay = 'block';
    }
    document.getElementById('contactform').style.display = newDisplay;
    }
    </script>

    As you can see I have the form hiding on certain days, but for the life of me can't figure out how to have it hide from Noon on Mon to noon on Thurs, and replace it with some text instead.

    Any help and knowledge would be greatly appreciated.

  2. #2
    Join Date
    Mar 2015
    Posts
    7
    Also I would just like to add, I live in EST time zone. I had trouble changing from UTC. So, if there is a way to make it pull the time for EST as well.

    Thank you

  3. #3
    Join Date
    Oct 2013
    Posts
    976
    This would possibly be more reliable if done on the server, but whatever.

    Let's get a couple of number things out of the way first. Javascript starts counting days at '0'. So Sunday=0, Monday=1, etc. As to your time question you're probably best off using UTC/GMT time which is Eastern Time plus 5 hours, therefore Noon Eastern is 5PM UTC. Since Javascript uses a 24 hour clock that is 17:00 UTC. You'll only need the hour to determine what gets displayed.

    I found it easier to test for days "closed" rather than days "open" it was also the very slightest bit less code.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>your title</title>
     <script>
     onload=function(){
    	var rightNow = new Date(),
    	    d = rightNow.getUTCDay(),
    	    h = rightNow.getUTCHours(),
    	    cForm = document.getElementById('contactform'),
    	    cText = document.getElementById('closed');
    
    	if ((d==1 && h>=17) || d==2 || d==3 || (d==4 && h<17)) { // closed these days
    		cForm.style.display = 'none';
    		cText.style.display = 'block';
    	}
    	else {
    		cForm.style.display = 'block';
    		cText.style.display = 'none';
    	}
     }
     </script>
    </head>
    <body>
    	<div id="contactform">[Your form]</div>
    	<div id="closed">We're closed!</div>
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,597
    Slightly different approach, but 'Kevin2' types faster than me.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    <style type="text/css">
    
    </style>
    
    </head>
    <body>
    <pre id="debug">Remove after testing</pre>
    <div id='contactform'>Contact Form</div>
    
    <script type="text/javascript">
    onload=function(){
      var rightNow = new Date();
      rightNow += rightNow.getTimezoneOffset();                                    // adjust GMT to user's locale 
        document.getElementById('debug').innerHTML = rightNow.toString(); // remove after testing
      var day = rightNow.getUTCDay();
      var hour = rightNow.getUTCHours();
    
      var newDisplay = document.getElementById('contactform');
      if ((day >= 1) && (hour >= 12)) {                                            // here if after Monday @ noon
        if ((day <= 4) && (hour <= 12)) { newDisplay.innerHTML = 'Contact Form'; } // here if before Thurs @ noon
                                   else { newDisplay.innerHTML = ''; }             // reverse messages for Fri-Sun
      }
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Mar 2015
    Posts
    7
    Thank your for the lesson and code fix. This worked out perfectly! I really appreciate your quick response on this.

  6. #6
    Join Date
    Mar 2015
    Posts
    7
    Thank you JMRKER for the reply. This also looks good. I have a little experience in JS, but not a lot. After looking at these codes I get how they work, just sometimes coming up with stuff from scratch for myself just doesn't work out right. I really appreciate your time on this!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles