Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: javascript help

  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript help

    Hello, I am a bit of a rookie still, so this forum has been really helpful to say the least.

    I'm working on installing a chat box on my company's website, but had one question. I was wondering if there was a script to make a chat box appear/disappear during specific times of day and on certain days? I want to have it on our website Mon-Fri from 8:30-4:30 only and then disappear during our off hours.

    Any help would be greatly appreciated!!!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="MyDiv" style="width:200px;height:200px;background-Color:red;" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcOpenTimes(o){
     var p=document.getElementById(o.ID),a=o.Open,ms=o.Refresh,n=new Date(),s,f,m=n.getHours()*60+n.getMinutes();
     if (p&&a instanceof Array){
      p.style.display=p.style.display!='block'?'none':'block';
      clearTimeout(o.to);
      a=a[n.getDay()];
      if (a instanceof Array&&typeof(a[0])=='string'&&typeof(a[1])=='string'){
       s=a[0].split(/\D/);f=a[1].split(/\D/);
       p.style.display=(isFinite(s[0]*1)&&isFinite(s[1]*1)&&isFinite(f[0]*1)&&isFinite(f[1]*1)&&m>=s[0]*60+s[1]*1&&m<=f[0]*60+f[1]*1)?'block':'none';
       typeof(ms)=='number'&&ms>100?o.to=setTimeout(function(){ zxcOpenTimes(o); },1000):null;
      }
     }
    }
    
    zxcOpenTimes({
     ID:'MyDiv',
     Open:[
      [],                // sunday
      ['8:30','16:30'],  // monday
      ['8:30','16:30'],  // tuesday
      ['8:30','16:30'],  // wednesday
      ['8:30','16:30'],  // thursday
      ['8:30','16:30'],  // friday
      ['8:30','16:30']   // saturday
     ],
     Refresh:2000
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    ynous93 (05-19-2014)

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much! Quick question, would I place this on all the pages? or just one?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    One thing that you might want to take into account here is that calculating the time using the javascript date object (as the posted script does) will give you the time according to the clock on the user's computer. That means that if their have their clock set to 10am Monday even though in reality it is 3am on Sunday, the chat box will show.

    Equally, if they are in a different time zone and they do have their clock set correctly, it could be 10am on Monday for them, but 10 pm on Sunday for you, but the chat box will still show.

    If I understand your requirements correctly, it would be better to get the time from your server (assuming that your server is in the same time zone as you) to make sure that the chat box only appears during your business hours, regardless of how the user's clock is set, or which time zone they are in.

    This seems to work OK...
    Code:
    <head>
    <title></title>
    <style>
    #box{
    display:none;
    width:200px;
    height:200px;
    background-Color:red;
    }
    </style>
    </head>
    <body>
    <div id="box"></div>
    <script>
    var xmlHttp;
    function srvTime(){
    	xmlHttp = new XMLHttpRequest();
    	xmlHttp.open('HEAD',window.location.href.toString(),false);
    	xmlHttp.setRequestHeader("Content-Type", "text/html");
    	xmlHttp.send('');
    	return xmlHttp.getResponseHeader("Date");
    }
    
    var open = [
      [],              // sunday
      ['830','1630'],  // monday
      ['830','1630'],  // tuesday
      ['830','1630'],  // wednesday
      ['830','1630'],  // thursday
      ['830','1630'],  // friday
      []   // saturday
     ]
    
    var st = srvTime();
    var date = new Date(st);
    
    var hours = open[date.getDay()];
    
    var mins=date.getMinutes();
    mins= mins<10?"0"+date.getMinutes().toString():date.getMinutes().toString();
    var time=Number(date.getHours().toString()+mins);
    
    if (typeof(hours[0])=="string"&&time>hours[0] && time<hours[1]){
    document.getElementById("box").style.display="block";
    }
    </script>
    
    </body>

  • Users who have thanked xelawho for this post:

    ynous93 (05-19-2014)

  • #5
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you!!

  • #6
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i tried it on our site but it's still showing. i just pasted it on the home page. am i supposed to put it somewhere specific?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    no, only where you want the chat box to appear or not. Did you include the css styling (display:none being the important one)?


  •  

    Posting Permissions

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