Solved

Javascript Display link

Posted on 2014-03-17
9
239 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 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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-…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

828 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