Solved

Javascript Display link

Posted on 2014-03-17
9
243 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 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

617 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