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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    tigger at a certain time?

    Hello, how can I trigger an event at a certain time of the day. Say at 5:30pm everyday, a specified div (initially hidden) is automatically shown for 3 seconds, and then goes back to being hidden?

    I have this script which changes div content based on certain time ranges, but haven't figured a way to adjust it to do what I need here.. Any ideas??

    Code:
    $.fn.mood = (function(){
        var Mood = function(el, opts){
            this.el = $(el);
            
            this.range = { bottom: opts.range[0]*1, top: opts.range[1]*1 };
            this.init();
        };
        Mood.prototype = {
            init: function(){
                this.initTime = this.checkTime(); // 1, 0, -1
                
                this.initTime == 0 ? this.show() : this.hide();
                this.start();
            },
            start: function(){
                var t = new Date(), 
                    showDate = new Date(t), 
                    hideDate = new Date(t), 
                    h = t.getHours(), hide = false, show = false;
                
                if(this.initTime < 0) {// time has not yet come
                    showDate.setHours(this.range.bottom);
                    showDate.setMinutes(0);
                    show = true;
                   
                }
                if(this.initTime <= 0){
                    hideDate.setHours(this.range.top);
                    hideDate.setMinutes(0);
                    hide = true;
                }
                debugger;
                show && setTimeout($.proxy(this.show, this), Math.ceil(showDate.getTime()-t.getTime()));
                hide && setTimeout($.proxy(this.hide, this), Math.ceil(hideDate.getTime()-t.getTime()));
            },
            
            checkTime: function(){
                var t = new Date(), h = t.getHours();
                if(h >= this.range.bottom && h <= this.range.top)
                    return 0;
                if(h < this.range.bottom)
                    return -1;  
                if(h > this.range.top)
                    return 1;  
            },
            show: function(){
                this.el.show('slow');
            },
            hide: function(){
                this.el.hide('slow');
            }
          
        };
          
        return function(opts){
            return this.data('rotateMood', new Mood(this, opts));    
        };
    })();
    $(function(){
        
        $('#timeperiod1').mood({
            range: [1, 7]
        });
        $('#timeperiod2').mood({
            range: [7, 15]
        });
        $('#timeperiod3').mood({
            range: [15, 24]
        });
    });

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,180
    Thanks
    23
    Thanked 603 Times in 602 Posts
    You could use cron to fire your script, IF your server has cron.
    Google it but wikipedia has the best explanation.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 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="tst" style="visibility:hidden;width:100px;height:100px;background-Color:red;"  ></div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Timer(id,time,show){
     var obj=document.getElementById(id),t=time.split(':'),now=new Date();
     now.setHours(t[0]);
     now.setMinutes(t[1]);
     now.setSeconds(0);
     Timer['zxc'+id]={
      obj:obj,
      show:now.getTime(),
      hide:show*1000
     }
     Tick(Timer['zxc'+id]);
    }
    
    function Tick(o){
     var now=new Date().getTime();
     clearTimeout(o.to);
     if (o.show-now>0){
      o.to=setTimeout(function(){ Tick(o); },1000);
     }
     else if (o.show+o.hide-now>0){
      o.obj.style.visibility='visible'
      o.to=setTimeout(function(){ o.obj.style.visibility='hidden'; },o.hide);
     }
    }
    
    Timer('tst','16:10',3)
    
    /*]]>*/
    </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/

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Another way:-

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <div id = "mydiv" style="color:red; display:none">Div Content In Here</div>
    
    <script type = "text/javascript">
    
    function showDiv() {
    var triggerhrs = 17;
    var triggerminutes = 30;
    var triggerseconds = 0;
    
    var now = new Date();
    var hrs = now.getHours();
    var mins = now.getMinutes();
    var secs = now.getSeconds();
    
    if ((triggerhrs == hrs) && (triggerminutes == mins) && (triggerseconds == secs)) {
    document.getElementById("mydiv").style.display="block";
    window.setTimeout(enddisplay,3000);  // display for 3 seconds
    }
    
    }
    
    function enddisplay() {
    document.getElementById("mydiv").style.display="none";
    }
    
    showDiv()
    window.setInterval(showDiv,1000);
    
    </script>
    
    
    
    </body>
    </html>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Wow thanks once again to Philip and Phillips (almost sounds like the name of a law firm lol) for your excellent scripts. Both work great, but I favor Vic's script just a tad more, as Vic's offers the ability to list multiple divs and set a different time and time length to each div individually. With Philip's it seems I'd have to write the entire script a second time, if I wanted to set a separate time or time length on a second div. I know I didn't say anything about needing to set a time to more than one div in my original post, so I don't discredit you for not including that. Both of you came through with exactly what I needed, if not more. sunfighter, not too familiar with cron, but I doubt my free host allows that. It does sound like a powerful tool though, I'll keep it in mind for the future.


  •  

    Posting Permissions

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