Solved

Javascript Display link

Posted on 2014-03-17
9
236 Views
Last Modified: 2014-04-17
Javascript for the following logic if on a specific date example 03/20/14 hours in between 1230 pm and 1:00 pm display the button, Else I will set the minutes dynamically for the oneHour variable. I will always need to capture the real date and time while the user is on the page.


<script type="text/javascript">
var oneHour = 60 * 60, // 60 seconds * 60 minutes dynamic variable
    twentyMins = 20 * 60, // 20 minutes * 60 seconds
    oneMin = 60, // 60 seconds
    fiveSecs = 5;

window.onload = function () {
    countDown('btnappear', '<input type="button" value="Get free MCLE Credit" name="MCLE" onclick=window.open("index.cfm","_self") />', oneHour);
}

function countDown(elID, output, seconds) {
    var mins,
    secs = seconds,
        pad = function (n) {
            return n > 9 ? n : '0' + n;
        };

    // get the hours by dividing by the number of seconds in an hour
    hours = Math.floor(secs / 3600); //  60 * 60 = 3600
    // get the remaining seconds
    secs %= 3600;
    // likewise, get the number of minutes of by dividing the remaining seconds by 60
    mins = Math.floor(secs / 60);
    // again, get the remainder of seconds
    secs %= 60;

    // pad any numbers less than 9 with a leading 0
    secs = pad(secs);
    mins = pad(mins);
    hours = pad(hours);

    document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;

    // instead of returning, just don't call setTimout if we are done
    if (seconds !== 0) {
        seconds -= 1;
        // there is no need to pass a string to setTimout, you just pass the function name,
        // followed by the timeout in ms, followed by any params
        //setTimeout(countDown, 1000, elID, output, seconds);
        setTimeout("countDown('" + elID + "', '" + output + "', " + (seconds) + ")", 1000);
    }

}
</script>
<div style="margin:10px; 0; 10px; 10px;" id="btnappear"></div>

Open in new window

0
Comment
Question by:smares323
  • 4
  • 4
9 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39936161
So what exactly is your question?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39936193
Your script works as a countdown

http://jsfiddle.net/mplungjan/ZQNyv/

You want to change the script so it shows the button for one hour on a specific date?

This will do that

I changed the top of the script plus this line

    document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time link is still active: ' + hours + ':' + mins + ':' + secs +'<br/>'+link;



http://jsfiddle.net/mplungjan/HXP5t/

var oneHour = 60 * 60, // 60 seconds * 60 minutes dynamic variable
    twentyMins = 20 * 60, // 20 minutes * 60 seconds
    thirtyMins = 30 * 60, // 20 minutes * 60 seconds
    oneMin = 60, // 60 seconds
    fiveSecs = 5,
    when = new Date(2014,2,18,8,32,0), // change to the date and time you want to show - months start at 0
    timeToShow=thirtyMins
    link = '<input type="button" value="Get free MCLE Credit" name="MCLE" onclick=\'window.open("index.cfm","_self")\' />';


window.onload = function () {
    var then = new Date(when.getTime());
    then.setMinutes(then.getMinutes()+30);
    var d = new Date();
    if (d.getTime() >= when.getTime() && d.getTime() <then.getTime()) {
      document.getElementById('btnappear').innerHTML=link;
      countDown('btnappear', '', timeToShow); 
    }
}

function countDown(elID, output, seconds) {
    var mins,
    secs = seconds,
        pad = function (n) {
            return n > 9 ? n : '0' + n;
        };

    // get the hours by dividing by the number of seconds in an hour
    hours = Math.floor(secs / 3600); //  60 * 60 = 3600
    // get the remaining seconds
    secs %= 3600;
    // likewise, get the number of minutes of by dividing the remaining seconds by 60
    mins = Math.floor(secs / 60);
    // again, get the remainder of seconds
    secs %= 60;

    // pad any numbers less than 9 with a leading 0
    secs = pad(secs);
    mins = pad(mins);
    hours = pad(hours);

    document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time link is still active: ' + hours + ':' + mins + ':' + secs +'<br/>'+link;

    // instead of returning, just don't call setTimout if we are done
    if (seconds !== 0) {
        seconds -= 1;
        // there is no need to pass a string to setTimout, you just pass the function name,
        // followed by the timeout in ms, followed by any params
        //setTimeout(countDown, 1000, elID, output, seconds);
        setTimeout("countDown('" + elID + "', '" + output + "', " + (seconds) + ")", 1000);
    }
}

Open in new window

0
 

Author Comment

by:smares323
ID: 39937823
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39938133
Yes it is. Change the date to now
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Closing Comment

by:smares323
ID: 39938162
Great Work
0
 

Author Comment

by:smares323
ID: 39938378
The date & time is only working if page is loaded after the date & time you have set, It does'nt work if you load the page before the date & time you have set.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39938970
Okee,. That was like actual work

http://jsfiddle.net/mplungjan/HXP5t/

// show button script by mplungjan http://plungjan.name/
var oneMinInMilli=1000,//60*1000,
    tId,
    when = new Date(2014,2,19,9,56,0), // change to the date and time you want to show - months start at 0
    timeToShow=30, // minutes - will be added to the date above
    link = '<input type="button" value="Get free MCLE Credit" name="MCLE" onclick=\'window.open("index.cfm","_self")\' />';

function formatTime(time){
  time = Math.abs(time);  
  var str= "",
      aMinute =60*1000,
      anHour = 60*aMinute,
      aDay = 24*anHour,
      d = Math.floor(time / aDay),
      h = Math.floor( (time - d * aDay) / anHour),
      m = Math.round( (time - d * aDay - h * anHour) / aMinute);
  if (d>0) str += d+" day"+(d==1?"":"s");

  if (h==0) { str = ""; h=+h+(d*24); d=0}
  else if (d>0) str += ", ";
  str += h+" hour"+(h==1?"":"s")+" and ";
  return str+m+" minute"+(m==1?"":"s");
}

function testTime() {
  var then = new Date(when.getTime());
  then.setMinutes(then.getMinutes()+timeToShow);
  var d = new Date();
  if (d.getTime() >= when.getTime() && d.getTime() <then.getTime()) {
    clearInterval(tId)  
    document.getElementById('btnappear').innerHTML=link;
    timeToShow = parseInt((then.getTime()-d.getTime())/1000,10);  
    countDown('btnappear', '', timeToShow);
  }
  else {
    var diff = d.getTime()-when.getTime();
    document.getElementById('btnappear').innerHTML=(diff<0?"Button will appear in ":"You are too late by ")+formatTime(diff);
  }
}

window.onload = function () {
  tId=setInterval(function() {
    testTime();
  },500);
}

// countdown by kolink/niet-the-dark-absol
function countDown(elID, output, seconds) {
    var mins,
    secs = seconds,
    pad = function (n) {
      return n > 9 ? n : '0' + n;
    };

    // get the hours by dividing by the number of seconds in an hour
    hours = Math.floor(secs / 3600); //  60 * 60 = 3600
    // get the remaining seconds
    secs %= 3600;
    // likewise, get the number of minutes of by dividing the remaining seconds by 60
    mins = Math.floor(secs / 60);
    // again, get the remainder of seconds
    secs %= 60;

    // pad any numbers less than 9 with a leading 0
    secs = pad(secs);
    mins = pad(mins);
    hours = pad(hours);

    document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time link is still active: ' + hours + ':' + mins + ':' + secs +'<br/>'+link;

    // instead of returning, just don't call setTimout if we are done
    if (seconds !== 0) {
        seconds -= 1;
        // there is no need to pass a string to setTimout, you just pass the function name,
        // followed by the timeout in ms, followed by any params
        //setTimeout(countDown, 1000, elID, output, seconds);
        setTimeout("countDown('" + elID + "', '" + output + "', " + (seconds) + ")", 1000);
    }
}

Open in new window

0
 

Author Comment

by:smares323
ID: 40007413
how can I use the Server date time  instead of  new Date();
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 40008225
when = new Date(<?php echo time(); ?>*1000);

and if needed

when.setHours(when.getHours()+5); // 5 hours later
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now