Countdown in javascript

i already found a lot of postings, concerning date-difference.
but i would need a code for a javascript countown from the resent date to a certain day next year.
i would trie it myself, but aren't able to fix the problems with my compiler.
so i would need a more or less finished version to add into my homepage!!!
thx for your support

If you want JavaScript here it is, although I can't imagine what a compiler has to do with the issue;
<script language="JavaScript">
today = new Date();
future = new Date();
future.setMonth(11); // sets the month to December
future.setDate(25); // set ths day to the 25th
future.setFullYear(2005); // sets the year
if (today.getTime() < future.getTime()) {
difference = future.getTime() - today.getTime();
difference = Math.floor(difference/(1000*60*60*24));
document.write(difference + ' days until future date');
</script>

Similar Messages

Need help with adjusting Javascript code to work in Adobe Edge (Countdown)

Hello
Im a newbie when it comes to working with Javascript and Adobe Edge and need a bit of help with adjusting some javascript code to work with Adobe Edge. A friend of mine helped me with making this javascript code: Edit fiddle - JSFiddle
Its a simple countdown which counts down to a certain time at a certain date. What I aim to do is to add this code as a trigger on a text-element called "countdown" (within a symbol called "count").
I have tried to do this as the code is, but it does not work. Anyone have any suggestions?
Thanks!
Mvh,
Øyvind Hermans

Hello again
I have stumbled upon a problem with these animations; They crash the browser after viewing them a little while, usually less than 30 seconds in.
Is this problem also occuring when you watch the animations?
Is the countdown-code to much for the browsers to handle?
Thanks in advance for your answers.
Sincerely,
Øyvind Hermans

Javascript countdown timer not working in Safari

Years ago I copied a Javascript for a countdown timer and it has been working on my website ever since in both Safari and Firefox. I have been working on updating my site and suddenly it stopped working in Safari, but still works in Firefox. Obviously, I'd like it to work in everyone's browser if possible. I've created a page which only has the countdown timer on it. Can anyone tell me what I need to do to get it to work in Safari?
The test page where you can see this is: http://hyperflite.com/countdowntest.html
TIA

Hi,
Is there any reason for the numerous body tags in there?
<pre><body onload="doCountdown();">
<body>
<body ... >
</pre>
I don't have Safari here to test with, but I wouldn't have thought they were helping matters

Embedding a countdown timer, that is linked to real time, into a video

Hey,
I'm trying to figure out how to do something I have never done and got no clue where to start.
What I am trying to accomplish is to make a 10-sec video that has a real time countdown clock to a certain part of the day (Ie: 5 hours and 10 secs left till 8 pm). Designing the clock is simple, what I cannot figure out is what program i should use and how to make it link to real time. Is this possible in after efects or do i need to use flash proffessional or something else. To give you a little bit more information, typicly I design ads that just run on a loop, this ad has to be different because it needs to run in a loop and somehow go and get the countdown according to real time and not just the videos length. (I've heard of somehow making a flash SWF file that either links to computer or RSS file, but I have no idea how to do that in aftereffects.) This is what i can find, but NOT what i want: https://www.youtube.com/watch?v=K-ilCXXAQGA&app=desktop I want it to use real time for countdown.
The media player running this 10-sec video ad is apparently compatible with Flash SWF.
Any help is good and if anyone can point me in the right direction that would be great.
Thanks in advance .

Video is video. You have to use another app to overlay something else. HTML 5, javascript, Flash. Can't be done in AE.

Updating a Date Column in SP2010 using Javascript in WP

Hi,
I know that Today() doesn't work in SP. But seeing all the various JS codes to highlight rows etc is rather cumbersome, especially if you have several operations that you may want to run based on Today().
In my list, I have a column which is hidden from public view, 'thisDate'. This column is set to Date Only and with each new item that is added, it loads today's date. That's fine at item creation; but what I want to do is use JS to
update all fields in thisDate column with today's date whenever the list is first loaded on any new day.
<script type="text/javascript" language="javascript">
var tDate = null;
allItems = null;
ExecuteOrDelayUntilScriptLoaded(UpdateList, 'sp.js'); //this is necessary to ensure the library is loaded before function triggered
function DateThis(){
tDate = new Date().toJSON();
tDate.format("m/dd/yy");
return tDate;
function UpdateList(){
var tContext = new SP.ClientContext.get_current();
var tSite = tContext.get_site();
var tWeb = tSite.get_rootWeb();
var tList = tWeb.get_lists().getByTitle('TeamDUCOM LNO Travel');
var tQuery = SP.CamlQuery.createAllItemsQuery();
this.allItems = tList.getItems(tQuery);
tContext.load(allItems, 'Include(thisDate)');
tContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySuccess), Function.createDelegate(this, this.onQueryFailed));
function onQuerySuccess(){
var listEnum = allItems.getEnumerator();
var todaysDate = DateThis();
while(listEnum.moveNext()){
var currentItem = listEnum.get_current();
var origDate = currentItem.get_item('thisDate');
currentItem.set_item('thisDate',todaysDate);
currentItem.update();
tContext.executeQueryAsync(Function.createDelegate(this, this.ListItemsUpdateSuccess), Function.createDelegate(this, this.ListItemsUpdateFailed));
function onQueryFailed (){
alert('Query List Failed ');
function ListItemsUpdateSuccess(){
alert('Success ');
function ListItemsUpdateFailed(){
alert('Update List Failed ');
</script>
Right now, I get an 'onQueryFailed' alert saying the Query list failed. Also in the watch windo, I get null for 'tDate and 'todaysDate' is undefined.
Once I can get this to work, it is my intention to add an extra line or two to compare variables
origDate with todaysDate. If they match, skip and go to next. I think this would reduce updates and minimze the List sending out email alerts (most of my users use Alerts to be notified of changes to the list. (Bonus
would be being able to suspend any alert triggers at update, but I don't believe that's possible, or?)
After all the debugging, I also intend to comment out the alerts within the code, since no one needs to see that.
Ideally, this code would be reuseable on any list that needs countdowns, traffic lights, colorcoding etc, or even calcaulated columns using
thisDate data in lieu of the nonexistent Today()
function. And, as mentioned above, the list only needs to be updated once for the 1st person to open the list on any given day.
TIA
AH-C

Victoria,
That didn't work for me. When I stripped out the script tags fro the file and placed it around the script url, I kept getting an error message within the webpart while in page edit view: "Cannot retrieve the URL specified in the Content Link
property. For more assistance, contact your site administrator."
I tried both your suggested change and the older script every which way - before the list, after the list, hidden and not. I then focused more on the IE 9's F12 developer tool and watched as it stepped thru the code. Everything was fine with the variables
(each object loaded in the Locals view) until it came time to call the executeQueryAsync.
I even traced down the stack and confirming the arguments. But a thot kept bugging me about "get_rootweb". i had seen other examples where it was "get_web" instead. When I went back to search Bing, I came across an example where the coder
just cut to the chase, bypassing varibles (in my case, dropping 'tSite' & 'tWeb'), so my trimmed code snippet now looks like this:
var tContext = SP.ClientContext.get_current();
var tList = tContext.get_web().get_lists().getByTitle('MyList Name');
var tQuery = SP.CamlQuery.createAllItemsQuery();
this.everyItem = tList.getItems(tQuery);
Prior to that, I also changed the var 'allItems', because I wondered if that was causing conflicts, case-sensitivity notwithstanding, since my default list view was 'AllItems.aspx'
Anyway, it now works regardless of CEWP positioning/hidden status (using only the reference to JS file in SiteAssets and using the script tags within the js file, not the CWEP link) -- typically, I make such CWEPs (ie EasyTabs) hidden and at the bottom of
the page, after the list and it works just fine.
I'm going to mark this thread as answered. But before I do that, I'll work out the one piece I need to add for the code to do nothing to a particular item if 'todaysDate' matches 'origDate' then post the entire code as the solution.
Thanks again.
Best regards,
AH-C
PS, I got a deluge of email alerts telling me that the list was updated. I anticipated that and will be looking for code to stop that if possible. But with the test for matching dates, at least I can limit the deluge of emails to once a day by whomever
is 1st to check the list that day (my alert is configured for instant alerting whenever a change has been made and I'd prefer to keep it that way, unless there's no workaround.

How to pass a jsp variable into javascript??

<p><%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<p><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<p><html>
<p><c:set var="binrmapi" value="http://localhost/paas-api/bingorooms.action;jsessionid=XXXXXX?userId=TEST2&sessionId=1&key=1" />
<p><c:import var="testbinrm" url="${fn:replace(binrmapi, 'XXXXXX', jsessionid)}"/>
<p><c:set var="tuples" value="${fn:split(testbinrm, '><')}" />
<p>Time until next game
<p><c:forEach var="tuple" items="${tuples}">
<p><c:if test="${fn:contains(tuple, 'row ')}">
<p> <p><code>
<p> <c:set var="values" value="${fn:split(tuple, '=\"')}" />
<p> <font color="blue">
<p> <c:out value="${values[17]}" />
<p><c:set var="remainingtime" value="${values[17]}" />
<p> </font>
<p> </code>
<p></c:if>
<p></c:forEach>
<p><form name="counter"><input type="text" size="8" name="d2"></form>
<p><script>
<p>var milisec=0
<p>var seconds=eval("document.myForm.remaining").value;
<p>function display(){
<p> if (milisec<=0){
<p> milisec=9
<p> seconds-=1
<p>}
<p>if (seconds<=-1){
<p> milisec=0
<p> seconds+=1
<p> }
<br>else
<p> milisec-=1
<p> document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
<p>}
<p>display()
<p></script>
<p></body>
<p></html>
<p>This is my code that i was working on, in the jsp part of the script, i get a api call and save a value of time in the variable remainingtime.. and in the javascript, i try to have a countdown clock counting down the remaining time.. but i guess it doesnt work.. how can i get that working? thanks alot
Message was edited by:
hamham3001
Message was edited by:
hamham3001
Message was edited by:
hamham3001
Message was edited by:
hamham3001

Re: How to pass a jsp variable into javascript??Here is the sameple one, hope it will solves your problem.
<html>
<body>
<form name=f>
<%!
String str = "A String"
%>
<script>
var avariable = <%=str%>
<script>
</form>
</body>
</html>
Let me know if you face any problem

.js update of spry accordion panel tab data for countdown functionality

Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> 
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> 
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> 
<div id="details" spry:state="ready"
spry:content="{detail}"></div> 
</div> 
</div> 
<script type="text/javascript">

</script>
</div> 
</div> 
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!

Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers.

How to develop a countdown timer in jsp

Hi all, please i have an online test application that works but i want to include a countdown timer that redirects to another page when the time runs out. please, how do i go about it. please help

Thanks, but thats not the one i need. i want the one that will show the time in hh:mm:ss and then automatically take the user to the result page when the time i up. i have a javascript code i used but the problem is in the Result.jsp page, there are some parameters that are suppose to be passed but i dont know how to do it. this is the code:
<form name="frm2" method="post">
<script language="javascript">
var sec = 10;   // set the seconds
var min = 00;   // set the minutes
var targetURL="result.jsp"; //the url
var email=this.Field('email').value;
function countDown() {
sec--;
if (sec == -01) {
    sec = 59;
    min = min - 1;
} else {
   min = min;
if (sec<=9) { sec = "0" + sec; }
time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
if (document.getElementById) { theTime.innerHTML = time; }
SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD);
window.location=targetURL;
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
    window.onload = func;
} else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      func();
addLoadEvent(function() {
countDown();
</script>
<table width="100%">
<tr><b><td width="100%" align="center"><span id="theTime" class="timeClass"></span></td></b></tr>
</table>
</form>and this is are the fields needed in the Result.jsp page..
<input type="hidden" name="email" value=<%=exno%> />
<input type="hidden" name="dbase" value=<%=names%> />
<input type="hidden" name="tamt" value=<%=total%> />

Anyone know of any killer countdown web widgets?

New to iweb, just now figuring out the use of web widgets and they sure seem cool but a bit hard to navigate as to what is what out there.
I'd like to know if anyone an point me to their favorites, in particular I am looking for a countdown widget, where the days and weeks toward a special event are counted down.
Thanks!
j

Most of canned countdown javascript widgets are based on well know date, they are well and good... but they are not good unless your birthday is on New Year day, July 4 or Xmas
Unless you have some javascript knowledge, then you can do quite a few things:
http://hdl.50webs.com/Widget2/Widget2.html
All javascript is available on my site... once again, javascript knowledge is helpful.

Countdown help.

Hey guys I need help making this countdown work. Im only getting this....
Im using the Edson Hilios countdown, but don't know how to set the countdown time....
jquery.countdown :
* jQuery The Final Countdown plugin v1.0.0 beta
* http://github.com/hilios/jquery.countdown
* Copyright (c) 2011 Edson Hilios
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
(function($) {
$.fn.countdown = function(toDate, callback) {
    var handlers = ['seconds', 'minutes', 'hours', 'days', 'weeks', 'daysLeft'];
    function delegate(scope, method) {
      return function() { return method.call(scope) }
    return this.each(function() {
      // Convert
      if(!(toDate instanceof Date)) {
        if(String(toDate).match(/^[0-9]*$/)) {
          toDate = new Date(toDate);
        } else if( toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})\s([0-9]{1,2})\:([0-9]{2})\:([0-9]{ 2})/) ||
            toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})\s([0-9]{1,2})\:([0-9]{2})\:([0-9]{ 2})/)
          toDate = new Date(toDate);
        } else if(toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})/) ||
                  toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})/)
          toDate = new Date(toDate)
        } else {
          throw new Error("Doesn't seen to be a valid date object or string")
      var $this = $(this),
          values = {},
          lasting = {},
          interval = $this.data('countdownInterval'),
          currentDate = new Date(),
          secondsLeft = Math.floor((toDate.valueOf() - currentDate.valueOf()) / 1000);
      function triggerEvents() {
        secondsLeft--;
        if(secondsLeft < 0) {
          secondsLeft = 0;
        lasting = {
          seconds : secondsLeft % 60,
          minutes : Math.floor(secondsLeft / 60) % 60,
          hours   : Math.floor(secondsLeft / 60 / 60) % 24,
          days    : Math.floor(secondsLeft / 60 / 60 / 24),
          weeks   : Math.floor(secondsLeft / 60 / 60 / 24 / 7),
          daysLeft: Math.floor(secondsLeft / 60 / 60 / 24) % 7
        for(var i=0; i<handlers.length; i++) {
          var eventName = handlers[i];
          if(values[eventName] != lasting[eventName]) {
            values[eventName] = lasting[eventName];
            dispatchEvent(eventName);
        if(secondsLeft == 0) {
          stop();
          dispatchEvent('finished');
      triggerEvents();
      function dispatchEvent(eventName) {
        var event = $.Event(eventName);
        event.date = new Date(new Date().valueOf() + secondsLeft);
        event.value = values[eventName] || "0";
        event.toDate = toDate;
        event.lasting = lasting;
        switch(eventName) {
          case "seconds":
          case "minutes":
          case "hours":
            event.value = event.value < 10 ? '0'+event.value.toString() : event.value.toString();
            break;
          default:
            if(event.value) {
              event.value = event.value.toString();
            break;
        callback.call($this, event);
      /*$this.bind('remove', function() {
        stop(); // If the selector is removed clear the interval for memory sake!
        dispatchEvent('removed');
      function stop() {
        clearInterval(interval);
      function start() {
        $this.data('countdownInterval', setInterval(delegate($this, triggerEvents), 1000));
        interval = $this.data('countdownInterval');
      if(interval) stop();
      start();
// Wrap the remove method to trigger an event when called
var removeEvent = new $.Event('remove'),
      removeFunction = $.fn.remove;
/*$.fn.remove = function() {
    $(this).trigger(removeEvent);
    return removeFunction.apply(this, arguments);
})(jQuery);
index.html :
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Nero-Hosting Updating</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
        
        <link href="css/social-font.css" rel="stylesheet">
        
        <link href="css/metronome.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            
            <h1 class="header section">Nero-Hosting</h1>
            
            
            <p class="description section">We are just updating our website and making lots and lots of changes! Check Back Soon!</p>
            
            
            <div id="countdown" class="countdown section">
                <div class="countdown-item">
                    <div class="countdown-label">Days</div>
                    <div class="countdown-number red" id="countdown-days">
                        <div class="countdown-number-side countdown-number-back"></div>
                        <div class="countdown-number-side countdown-number-front"></div>
                    </div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-label">Hours</div>
                    <div class="countdown-number yellow" id="countdown-hours">
                        <div class="countdown-number-side countdown-number-back"></div>
                        <div class="countdown-number-side countdown-number-front"></div>
                    </div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-label">Minutes</div>
                    <div class="countdown-number blue" id="countdown-minutes">
                        <div class="countdown-number-side countdown-number-back"></div>
                        <div class="countdown-number-side countdown-number-front"></div>
                    </div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-label">Seconds</div>
                    <div class="countdown-number green" id="countdown-seconds">
                        <div class="countdown-number-side countdown-number-back"></div>
                        <div class="countdown-number-side countdown-number-front"></div>
                    </div>
                </div>
            </div>
            
            
            <div class="social-links">
                <a href="https://twitter.com/Nero_Hosting" class="icon-twitter-alt red"></a>
            </div>
            
        </div>
        
        <script src="../ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
        <script src="js/jquery.countdown.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/metronome.js"></script>
    <audio loop="" autoplay="">
                              <source src="http://www.goodymusic.it/public/allegati/audio/51823_11820913007504706977.mp3" type="audio/mpeg"></audio>
    </body>
</html>
metrome design :
========================================================================================== ==============================
    Metronome - Coming Soon Page
    v 1.0, 13 May 2013
    by Alex Shnayder
========================================================================================== ==============================
    Main javascript file
$(document).ready(function() {
    var config;
    $.getJSON('config.json').done(function(data) {
        config = data;
        Countdown
========================================================================================== ========*/
        var date = new Date(config.countdown.year,
                            config.countdown.month - 1,
                            config.countdown.day,
                            config.countdown.hour,
                            config.countdown.minute,
                            config.countdown.second),
            $countdown = $('#countdown'),
            $countdown_numbers = {
                days: $('#countdown-days'),
                hours: $('#countdown-hours'),
                minutes: $('#countdown-minutes'),
                seconds: $('#countdown-seconds')
            tab_focused = true;
        $(window).on('focus', function() {
            tab_focused = true;
        $(window).on('blur', function() {
            tab_focused = false;
        $.each($countdown_numbers, function() {
            var $this = $(this);
            $this.data({
                angle: 0,
                sides: {
                    current: $('.countdown-number-front', $this),
                    other: $('.countdown-number-back', $this)
                current_side: 1
        $countdown.countdown(date, function(event) {
            if (event.type == 'finished') {
                $countdown.hide();
            } else if (tab_focused) {
                var $tile,
                    $current_side,
                    $other_side,
                    angle,
                    timer;
                $tile = $countdown_numbers[event.type];
                if (!$tile) {
                    return;
                $current_side = $tile.data('sides').current;
                $other_side = $tile.data('sides').other;
                angle = $tile.data('angle') + 180;
                $tile.css('transform', 'rotateY(' + angle + 'deg)').data('angle', angle);
                $other_side.text(event.value);
                timer = setTimeout(function() {
                    $current_side.hide();
                    $other_side.show();
                    $tile.data('sides', {
                        current: $other_side,
                        other: $current_side
                    clearTimeout(timer);
                }, 250);
        Subscription form
========================================================================================== ========*/
        var messages = config.subscription_form_tooltips,
            error = false,
            $form = $('#subscription-form'),
            $email = $('#subscription-email'),
            $button = $('#subscription-submit'),
            $tooltip;
        function renderTooltip(type, message) {
            var offset;
            if (!$tooltip) {
                $tooltip = $('<p id="subscription-tooltip" class="subscription-tooltip"></p>').appendTo($form);
            if (type == 'success') {
                $tooltip.removeClass('error').addClass('success');
            } else {
                $tooltip.removeClass('success').addClass('error');
            $tooltip.text(message).fadeTo(0, 0);
            offset = $tooltip.outerWidth() / 2;
            $tooltip.css('margin-left', -offset).animate({top: '100%'}, 200).dequeue().fadeTo(200, 1);
        function hideTooltip() {
            if ($tooltip) {
                $tooltip.animate({top: '120%'}, 200).dequeue().fadeTo(100, 0);
        function changeFormState(type, message) {
            $email.removeClass('success error');
            if (type == 'normal') {
                hideTooltip();
            } else {
                renderTooltip(type, message);
                $email.addClass(type);
        $form.submit(function(event) {
            event.preventDefault();
            var email = $email.val();
            if (email.length == 0) {
                changeFormState('error', messages['empty_email']);
            } else {
                $.post('./admin/index.php?page=subscribe', {
                    'email': email,
                    'ajax': 1
                }, function(data) {
                    if (data.status == 'success') {
                        changeFormState('success', messages['success']);
                    } else {
                        switch(data.error) {
                            case 'empty_email':
                            case 'invalid_email':
                            case 'already_subscribed':
                                changeFormState('error', messages[data.error]);
                                break;
                            default:
                                changeFormState('error', messages['default_error'])
                                break;
                }, 'json');
        // Remove tooltip on text change
        $email.on('change focus click keydown', function() {
            if ($email.val().length > 0) {
                changeFormState('normal');
============================================================
If you need more info or files just tell me...

Read the documentation:
http://hilios.github.io/jQuery.countdown/
Nancy O.

Help with anonymus pl/sql layout using javascript

Hi people.
i want to display some records on a region (using apex 4.2) , this anonymous pl/sql script below shows 3 records from database, but the layout only shows me the first record with it's data, the others 2 records, only show me labels.
i have verified this same query creating a report and it shows the 3 records correctly.
i guess i am doing something wrong with this javascript routine or i am surely missing something,
in this link you can see the layout i am getting. (http://sdrv.ms/Xrv0J8).
the other little help i need is to display in one row for each record. actually i am getting one row for each label and one row for each data record. i have read and found is something about /div, but i don't no how to change it to get desired results, any suggestion is welcome.
thanks in advance for any help.
i am completely new in apex and java script, but i have several years experience in pl/sql.
The Script :
Begin
Declare
Cursor Deliv Is
Select item,
To_char (Delivery, 'month dd, yyyy hh24:mi:ss') Delivery,
Current_date
From pending_items;
Begin
For A In Deliv Loop
Begin
Sys.Htp.P ('<script type="text/javascript">');
Sys.Htp.P ('function cdtd() {');
Sys.Htp.P (' var xmas = new Date("' || a.delivery || '")');
Sys.Htp.P (' var now = new Date();');
Sys.Htp.P (' var timeDiff = xmas.getTime() - now.getTime();');
Sys.Htp.P (' if (timeDiff <= 0) {');
Sys.Htp.P (' clearTimeout(timer);');
-- Sys.Htp.P (' document.write("Some Text Here!");');
Sys.Htp.P (' // Run any code needed for countdown completion here');
Sys.Htp.P (' }');
Sys.Htp.P (' var seconds = Math.floor(timeDiff / 1000);');
Sys.Htp.P (' var minutes = Math.floor(seconds / 60);');
Sys.Htp.P (' var hours = Math.floor(minutes / 60);');
Sys.Htp.P (' var days = Math.floor(hours / 24);');
Sys.Htp.P (' hours %= 24;');
Sys.Htp.P (' minutes %= 60;');
Sys.Htp.P (' seconds %= 60;');
Sys.Htp.P (' document.getElementById("daysBox").innerHTML = days;');
Sys.Htp.P (' document.getElementById("hoursBox").innerHTML = hours;');
Sys.Htp.P (' document.getElementById("minsBox").innerHTML = minutes;');
Sys.Htp.P (' document.getElementById("secsBox").innerHTML = seconds;');
Sys.Htp.P (' var timer = setTimeout("cdtd()",1000);');
Sys.Htp.P ('}');
Sys.Htp.P ('</script>');
Sys.Htp.P ('Days ');
Sys.Htp.P ('<div id="daysBox"></div>');
Sys.Htp.P ('Hours');
Sys.Htp.P ('<div id="hoursBox"></div>');
Sys.Htp.P ('Minutes');
Sys.Htp.P ('<div id="minsBox"></div>');
Sys.Htp.P ('Seconds');
Sys.Htp.P ('<div id="secsBox"></div>');
Sys.Htp.P ('<script type="text/javascript">');
Sys.Htp.P ('cdtd();</script>');
End;
End Loop;
End;
End;

Let's focus on your delivery dates and javascript for now.
Why you would put your javascript in htp.p calls in a plsql region is quite beyond me. When you edit the page there is a javascript region where you can put global variables and functions, an excellent spot for this then, and a lot more maintainable than this.
Now it's also obvious that your query on pending items will return more than one record. So, using a report would serve you well in this case. However, using code like this:
document.getElementById("daysBox").innerHTML = days;
document.getElementById("hoursBox").innerHTML = hours;
document.getElementById("minsBox").innerHTML = minutes;
document.getElementById("secsBox").innerHTML = seconds;will not serve you. getElementById is meant to return one element uniquely identified by an ID. If you have a report with multiple rows, and elements on each row with the same ID, you are doing something wrong. You would need the delivery date per row, and I guess that you put out your code with htp.p because you do not know how to deal with that and passing it in to the javascript procedure.
But wouldn't it be more oppurtune for you to simply create a report with a source sql where you calculate each part of the date, and then refresh this region with a certain interval. If you'd refresh every 5 minutes, wouldn't that be more than fast enough to keep track of things? Don't forget, refreshing a region will execute the sql again.
It's not that you can't accomplish a multirecord report with a countdown per row, but are you comfortable enough with javascript and jquery to code and maintain that versus leveraging plsql and dynamic actions (there is even a dynamic action timer plugin provided by oracle)?

Will spry show a javascript function from an external page?

I have two pages
http://www.autosnetfree.com/clock_buttonajax.php //this page has the spry calling the external page.
http://www.autosnetfree.com/clock_auction1.php //this page has a countdown clock to a future date
The buttonajax page has a submit button which updates a database with the current date plus 60 seconds.
The countdown clock page pulls that future date from the database with a recordset
The spry on the buttonajax page is
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<link href="SpryAssets/SpryStackedContainers.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
</head>
<body>
<div spry:region="ds2" class="StackedContainers">
<div spry:repeat="ds2" class="RowContainer">
<div class="RowColumn">{column0}</div>
</div>
</div>
The button updates but the called page with the javascript function does not show?
thanks for your help,
-Jim balthrop

It looks like you need an onPostLoad observer that updates the region similar to what is done here http://labs.adobe.com/technologies/spry/samples/data_region/SharingDataBetweenDataSets.htm l

IWeb - Can I add a countdown clock ?

Hello all. Could anyone tell me if its possible to add a clock on my iWeb to countdown the days, hours, minutes to a certain event ? I am publishing to my .mac account. Thanks in advance for any help. Regards, Paul P

Is it possible by using javascript, but you will need to paste the relevant code into the published HTML page.
As an example, go to http://www.javascriptkit.com and search for 'countdown'. There are quite a few scripts there that you could use. Or do a google search on javascript countdown.
Michael
Quicksilver G4 Dual 1GHz www.rowan-cottage.co.uk

ResultSet date into JavaScript Function HELP!!

I am developing an auction web site for a end year project in college, it is all done except this countdown thingy. I got the 'endDate' of an auction in a table. I can get the date out no problem at all, where im stuck is where i gotta pass the date from the result set into the javascript countdown function so it can countdown to the end of the auction. Code below
<%@ page language = "java" contentType = "text/html"%>
<%@ page language = "java" import = "com.sybase.jdbcx.SybDriver" %>
<%@ page language = "java" import = "java.sql.*" %>
<%@ page language = "java" import = "java.util.*"%>
<% Connection dbConn = null;
try
Class.forName("com.sybase.jdbc2.jdbc.SybDriver");
dbConn = DriverManager.getConnection("jdbc:sybase:Tds:compserver:5000/syb3044","
syb3044", "syb3044");
Statement b = dbConn.createStatement();
ResultSet bid = b.executeQuery("select * from bid where carID=1");
if(bid.next()){}
%>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
mDate = new Date("20 April 2004 16:45") //Hard Coded Date Here, Want ResultSet Date Passed Here
function countdown()
     var now=new Date()
     var diff=mDate.getTime()-now.getTime()
     if (diff <= 0)
     document.bid.mseconds.value = 0
     return 0;
     document.bid.days.value = Math.round(diff/(24*60*60*1000))
     document.bid.hours.value = Math.round(diff/(60*60*1000))
     document.bid.minutes.value = Math.round(diff/(60*1000))
     document.bid.seconds.value = Math.round(diff/1000)
     document.bid.mseconds.value = diff
     var id=setTimeout("countdown()",0)
</SCRIPT>
</HEAD>
<BODY onLoad="countdown()">
<BR>
<form name="bid" method="post" action="">
<p>Timeleft</p>
<TABLE BORDER=0>
<TD width="79">Days: </TD>
<TD width="81">
<INPUT TYPE="text" NAME="days" SIZE=15></TD> <TR>
<TD width="79">Hours: </TD>
<TD width="81">
<INPUT TYPE="text" NAME="hours" SIZE=15></TD> <TR>
<TD width="79">Minutes:</TD>
<TD width="81">
<INPUT TYPE="text" NAME="minutes" SIZE=15></TD> <TR>
<TD width="79">Seconds: </TD>
<TD width="81">
<INPUT TYPE="text" NAME="seconds" SIZE=15></TD> <TR>
<TD width="79">Milliseconds:</TD>
<TD width="81">
<INPUT TYPE="text" NAME="mseconds" SIZE=15></TD> <TR>
</TABLE>
</form>
</BODY>
</HTML>
<%
bid.close();
catch (SQLException sqle)
out.println(sqle.getMessage());
catch (ClassNotFoundException cnfe)
out.println(cnfe.getMessage());
catch (Exception e)
out.println(e.getMessage());
finally
try
     if(dbConn != null)
     dbConn.close();
catch (SQLException sqle)
     out.println(sqle.getMessage());
%>
...........................................................SQLTable.......................................................................................................................
create TABLE bid
bidID     integer primary key,
carID     numeric NOT NULL,
seller     varchar(50) NOT NULL,
username varchar(50),
startDate varchar(25) not null,
endDate datetime not null
PS, tried putting endDate as varchar but same result
Please note I am a computer science student
Regards Don Colvin

org.apache.jasper.JasperException: Unable to compile class for JSP
An error occurred at line: 19 in the jsp file: /Test.jsp
Generated servlet error:
[javac] Compiling 1 source file
C:\Tomcat\work\Catalina\localhost\Mess\org\apache\jsp\Test_jsp.java:55: cannot resolve symbol
symbol : class SimpleDateFormat
location: class org.apache.jsp.Test_jsp
out.print( new SimpleDateFormat("dd MMMM YYYY hh:MM").format(bid.getDate("endDate")) );
^
1 error
It throwing back this error, any suggestions

Countdown timer in adobe form from a field and pop-up warnings

I have created a form in adobe livecycle and I would like to add a Countdown timer that clicks off when a user enter's a time. I need the countdown timer to be 2 hours from the entered time. The user will have 2 hours to complete the form. I need warning boxes that will pop up at 30 minutes and at 15 minutes. If not completed in the 2 hour time frame from when the time was entered then the form will prompt to close.
I have found where the timer starts from the start or stop button but I would like it to start from when the time field is excited.
I am new to form scripting and any help would be greatly appreciated.
Thank you

Do you mean the JavaScript methods setTimeout(), clearTimeout(), setInterval() and clearInterval() ???
I don't think these methods will work within Adobe LiveCycle forms.
Nith

Countdown in javascript

Similar Messages

Maybe you are looking for