Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript Display link

Posted on 2014-03-17
9
Medium Priority
?
250 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 39936161
So what exactly is your question?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39938133
Yes it is. Change the date to now
0
 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

721 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