...

View Full Version : Count-up from a particular year + Javascript within Javascript? Help!



Azam.net
06-02-2005, 01:10 PM
My question is in three parts:

(1) I've found various scripts (http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Countdowns/) which allow you to count-up from a particular date, but they display the result in seconds, hours, minutes, years etc. I'd like to show the result in just years and don't need a bloated script.

A couple of scripts that I've found are:

http://javascript.internet.com/clocks/days-old.html

http://www.javascriptkit.com/script/script2/countup.shtml

(2) The reason I need a count-up feature is so that I can show how old a film festival is on my movie site (e.g. "the 52nd Sydney Film Festival"). Is there a way of incorporating the "nd", "th" etc. to the above results please?

(3) Finally, is there any way of incorporating the above script inside another script?

I'm currently using another javascript to link to a different page each month, with info. about the film festival taking place that month.

The script is this one:



<!------------------------------- FILM FESTIVALS ------------------------------------->
<SCRIPT language=JavaScript>
<!-- Begin
var months=new Array(13);
months[1]="The festival year kicks of with Sundance, or \"Cannes in the snow\" as some have come to describe it. If you can't make it to Utah, read out it at UKHotMovies.com here";
months[2]="Read about this February\'s Berlin Film Festival in our new film festivals section <A HREF=\"/film-festivals/berlin-film-festival\">here</A>.";
months[3]="New! Find out more about this month\'s Amnesty International Film Festival (Amsterdam) <A HREF=\"/festival/Amnesty\">here</A>";
months[4]="Read about this month\'s Tribeca Film Festival in our new film festivals section <A HREF=\"/film-festivals/tribeca-film-festival\">here</A>.";
months[5]="Read about this May\'s Cannes Film Festival in our new film festivals section <A HREF=\"/film-festivals/cannes-film-festival\">here</A>.";
months[6]="Read about this June\'s Sydney Film Festival in our new film festivals section <A HREF=\"/film-festivals/sydney-film-festival\">here</A>.";
months[7]="Cambridge Film Festival July";
months[8]="Edinburgh International Film Festival August";
months[9]="Venice Film Festival September";
months[10]="Edmonton International Film Festival October";
months[11]="Los Angeles Intíl Film Festival November";
months[12]="Cairo International Film Festival - December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
document.write(" " + lmonth + " ");
// End -->
</SCRIPT>
<!------------------------------- FILM FESTIVALS ------------------------------------->


You can see it in action towards the bottom of this page (http://www.UKHotMovies.com).

What I'd basically like to do is that instead of it saying "read about the Edmonton Film Festival taking place this October", say "read about the 15th Edmonton Film Festival taking place this October".

Thanks a million. Spent a while trying to solve the conundrum myself, but my Javascript skills are limited.

glenngv
06-02-2005, 01:52 PM
<SCRIPT language=JavaScript>
<!-- Begin

//from JS FAQ by liorean: http://www.codingforums.com/showthread.php?p=178925#post178925
Number.prototype.toOrdinal=function(m){
return (this +
["th","st","nd","rd"][(!(
((m=this%10) >3) ||
(Math.floor(this%100/10)==1)
))*m]);
}

var months=new Array(13);
months[0]=[2000, "The $anniv; festival year kicks of with Sundance, or \"Cannes in the snow\" as some have come to describe it. If you can't make it to Utah, read out it at UKHotMovies.com here"];
months[1]=[1990, "Read about this February\'s $anniv; Berlin Film Festival in our new film festivals section <A HREF=\"/film-festivals/berlin-film-festival\">here</A>."];
months[2]=[1950, "New! Find out more about this month\'s $anniv; Amnesty International Film Festival (Amsterdam) <A HREF=\"/festival/Amnesty\">here</A>"];
months[3]=[1900, "Read about this month\'s $anniv; Tribeca Film Festival in our new film festivals section <A HREF=\"/film-festivals/tribeca-film-festival\">here</A>."];
months[4]=[1940, "Read about this May\'s $anniv; Cannes Film Festival in our new film festivals section <A HREF=\"/film-festivals/cannes-film-festival\">here</A>."];
months[5]=[1945, "Read about this June\'s $anniv; Sydney Film Festival in our new film festivals section <A HREF=\"/film-festivals/sydney-film-festival\">here</A>."];
months[6]=[1980, "$anniv; Cambridge Film Festival July"];
months[7]=[1925, "$anniv; Edinburgh International Film Festival August"];
months[8]=[1986, "$anniv; Venice Film Festival September"];
months[9]=[1973, "$anniv; Edmonton International Film Festival October"];
months[10]=[1960, "$anniv; Los Angeles Intíl Film Festival November"];
months[11]=[1978, "$anniv; Cairo International Film Festival - December"];
var time=new Date();
var month=months[time.getMonth()];
var anniv=Number(time.getFullYear()-month[0]).toOrdinal();
document.write(month[1].replace(/\$anniv;/, anniv));

// End -->
</SCRIPT>

Azam.net
06-03-2005, 01:40 AM
Works like magic. You are absolutely incredible. Cheers :)

How can I just display the year for one festival (just question 1 of my original post)? On the individual pages about each film festival I would like to show how old it is. Change this page (http://www.ukhotmovies.com/film-festivals/sydney-film-festival/) for instance, from "Sydney Film Festival" to "52nd Sydney Film Festival".

Can't thank you enough, Glenn. Have voted for you as 'most helpful member' :)

glenngv
06-03-2005, 05:33 AM
Thanks for the vote! :thumbsup:

There's a minor change you need to do with the script. I forgot to adjust the array size from 13 to 12.

var months=new Array(12);

I'm assuming you just using static HTML pages for all, you don't have access to any server-side scripting language. Had you have access to any server-side language, your problem could be solved easier using it without relying on javascript at all (including the one I gave you yesterday!). Having said that, we will proceed to a pure javascript solution. Take note that if javascript is disabled or not supported, the page won't show the number of years and the description.

I modified the original script to make it more flexible.

Save this as an external javascript file. Let's name it festival.js (or anything you want)
Don't put <script> </script> tags and HTML comments <!-- --> inside this external js.

festival.js:

//from JS FAQ by liorean: http://www.codingforums.com/showthr...8925#post178925
Number.prototype.toOrdinal=function(m){
return (this +
["th","st","nd","rd"][(!(
((m=this%10) >3) ||
(Math.floor(this%100/10)==1)
))*m]);
}

var months=new Array(12);
months[0]=[2000, "The $anniv; festival year kicks of with Sundance, or \"Cannes in the snow\" as some have come to describe it. If you can't make it to Utah, read out it at UKHotMovies.com here"];
months[1]=[1990, "Read about this February\'s $anniv; Berlin Film Festival in our new film festivals section <A HREF=\"/film-festivals/berlin-film-festival\">here</A>."];
months[2]=[1950, "New! Find out more about this month\'s $anniv; Amnesty International Film Festival (Amsterdam) <A HREF=\"/festival/Amnesty\">here</A>"];
months[3]=[1900, "Read about this month\'s $anniv; Tribeca Film Festival in our new film festivals section <A HREF=\"/film-festivals/tribeca-film-festival\">here</A>."];
months[4]=[1940, "Read about this May\'s $anniv; Cannes Film Festival in our new film festivals section <A HREF=\"/film-festivals/cannes-film-festival\">here</A>."];
months[5]=[1945, "Read about this June\'s $anniv; Sydney Film Festival in our new film festivals section <A HREF=\"/film-festivals/sydney-film-festival\">here</A>."];
months[6]=[1980, "$anniv; Cambridge Film Festival July"];
months[7]=[1925, "$anniv; Edinburgh International Film Festival August"];
months[8]=[1986, "$anniv; Venice Film Festival September"];
months[9]=[1973, "$anniv; Edmonton International Film Festival October"];
months[10]=[1960, "$anniv; Los Angeles Intíl Film Festival November"];
months[11]=[1978, "$anniv; Cairo International Film Festival - December"];

function getFestival(which){
var fest = new Object();
fest.anniv = "";
fest.desc = "";
var today = new Date();
if (which == null || typeof which == "undefined" || which >= months.length){
which = today.getMonth(); //set current month as default
}
var month = months[which];
fest.anniv = Number(today.getFullYear() - month[0]).toOrdinal();
fest.desc = month[1].replace(/\$anniv;/, anniv);
return fest;

}

/////////////////////////end of external js

in home page:

<script type="text/javascript" src="festival.js"></script>
<script type="text/javascript">
document.write(getFestival().desc);
</script>

in each festival page:

<script type="text/javascript" src="festival.js"></script>
<script type="text/javascript">
function setAnniv(which){ //which is the index position of the festival in the months array
var fest = getFestival(which);
var anniv = fest.anniv;
var spans = document.getElementByTagName("span");
var len = spans.length;
for (var i=0; i<len; i++){
if (spans[i].className=="anniv"){
spans[i].innerHTML = anniv;
}
}
}
</script>
</head>
<body onload="setAnniv(5);">
...
<p><I>The <span class="anniv"></span> Sydney Film Festival is taking place this June with a striking ...

Over the last half century the <span class="anniv"></span> Sydney Film Festival...

<p>The Board for the <span class="anniv"></span> Sydney Festival ...

Azam.net
07-02-2005, 12:32 AM
Thank you soooo much Glenn.

I have copied the new code exactly the way you specified and have checked it several times, but it doesn't work, neither on the home page nor the individual film festival pages. Nothing appears, neither the text in the JS not the year.

At the home page (http://www.ukhotmovies.com) I have:




<script type="text/javascript" src="film-festivals/film-festivals.js"></script>
<script type="text/javascript">
document.write(getFestival().desc);
</script>



The JS error message says "'date' is undefined".

The javascript is here (http://www.ukhotmovies.com/film-festivals/film-festivals.js). It is exactly as you specified, with no changes.

I have tried adding the relevant bits to a test film festivals page here (http://www.ukhotmovies.com/film-festivals/cambridge-film-festival/test.html), but unfortunately that doesn't show the year either. JS error says "'anniv' is undefined".

I'm sure it's a minor bug. Do you know what it could be please?

If you can't work it out, I don't mind reverting to the original code you suggested, which worked perfectly, and incorporating the year of the festival on each film festival page by using the same coding on every single page.

I'm very sorry to bother you with this. Thanks in advance for your help once again.

Willy Duitt
07-02-2005, 01:24 AM
The Date() method is Date... NOT date()... Watch your case...

Azam.net
07-02-2005, 08:07 PM
I'm sorry, I don't understand.

I have checked the Javascript and it is given in the following format:



var today = new Date();


I am using a capital D not d.

I haven't changed anything from the script provided by Glenn.

Do you know what the reason is the script is not working please?

glenngv
07-04-2005, 06:36 AM
See the changes in red:

function getFestival(which){
var fest = new Object();
fest.anniv = "";
fest.desc = "";
var today = new Date();
if (which == null || typeof which == "undefined" || which >= months.length){
which = today.getMonth(); //set current month as default
}
var month = months[which];
fest.anniv = Number(today.getFullYear() - month[0]).toOrdinal();
fest.desc = month[1].replace(/\$anniv;/, fest.anniv);
return fest;

}

Azam.net
07-04-2005, 08:46 PM
Thank you Glenn. I can't tell you how much I appreciate your help.

The script works fine on the home page (http://www.ukhotmovies.com/) now.

In the festival page I have added the code exacly as you specified, only changing the name and directory of the JS, but it doesn't show the year of the festival.



<script type="text/javascript" src="festival.js"></script>
<script type="text/javascript">
function setAnniv(which){ //which is the index position of the festival in the months array
var fest = getFestival(which);
var anniv = fest.anniv;
var spans = document.getElementByTagName("span");
var len = spans.length;
for (var i=0; i<len; i++){
if (spans[i].className=="anniv"){
spans[i].innerHTML = anniv;
}
}
}
</script>
</head>
<body onload="setAnniv(5);">
...
<p><I>The <span class="anniv"></span> Sydney Film Festival is taking place this June with a striking ...

Over the last half century the <span class="anniv"></span> Sydney Film Festival...

<p>The Board for the <span class="anniv"></span> Sydney Festival ...

Any idea what the problem could be? Sorry to bother you again, but I'm sure it's something very minor.

glenngv
07-05-2005, 03:57 AM
Can you post the link directly to that page? I was looking here (http://www.ukhotmovies.com/film-festivals/cambridge-film-festival/) but I can't find that code.

Azam.net
09-04-2005, 08:30 PM
Sorry for the delay in getting back to you.

Yes, you can check on that page (http://www.ukhotmovies.com/film-festivals/cambridge-film-festival/).

I have added your script to the HEAD section and <span class="anniv"></span> in the text, but they don't work. Doesn't show the year of the festival.

Thanks a million.

glenngv
09-06-2005, 03:59 AM
Sorry, I had a typo. It should have been document.getElementsByTagName.

function setAnniv(which){ //which is the index position of the festival in the months array
var fest = getFestival(which);
var anniv = fest.anniv;
var spans = document.getElementsByTagName("span");
var len = spans.length;
for (var i=0; i<len; i++){
if (spans[i].className=="anniv"){
spans[i].innerHTML = anniv;
}
}
}

Azam.net
09-06-2005, 11:01 AM
Made that change and triple-checked it. So sorry, Glenn, but it still doesn't work (http://www.ukhotmovies.com/film-festivals/cambridge-film-festival/).

Should say "The 25th Cambridge Film Festival" but only says "The Cambridge Film Festival".

Thanks a million.

glenngv
09-06-2005, 11:27 AM
I see nothing in the page that calls the setAnniv() function. Did you call it onload?

Azam.net
09-06-2005, 02:04 PM
I see nothing in the page that calls the setAnniv() function. Did you call it onload?

The following in the header:



<script type="text/javascript" src="/film-festivals/film-festivals.js"></script>
<script type="text/javascript">
function setAnniv(which){ //which is the index position of the festival in the months array
var fest = getFestival(which);
var anniv = fest.anniv;
var spans = document.getElementsByTagName("span");
var len = spans.length;
for (var i=0; i<len; i++){
if (spans[i].className=="anniv"){
spans[i].innerHTML = anniv;
}
}
}
</script>


Your script pulls the data from this (http://www.ukhotmovies.com//film-festivals/film-festivals.js) .js file.

Then this in the BODY:


The <span class="anniv"></span> Cambridge Film Festival

Is that correct?

Thanks once again.

glenngv
09-07-2005, 03:33 AM
The external script contains just the function and variable declarations. No call to the setAnniv() function.

You used to have this on your page.


<body onload="setAnniv(5);">

Azam.net
09-08-2005, 11:58 AM
Thanks sooooo much. Works brilliantly now! You thoroughly deserve the 'Host Helpful Member Award'.

Thank you once again :)

glenngv
09-08-2005, 12:45 PM
It works in IE but not in Firefox. It was affected by the dynAnimation() function. That function throws an error ("doc_els has no properties") causing the setAnniv() function not to be called.


<BODY onload="dynAnimation();setAnniv(6);">

I analyzed the script and I found out that you only detect IE and NS4 browsers.
You should have used document.getElementById and not document.all to cater to IE, Firefox and other modern browsers. You can even drop NS4 support as very few uses it nowadays.

If you want to maintain it as it is, just swap the position of the 2 function calls, so that at least in Firefox and other modern and non-IE browsers, the anniversary year is displayed.


<BODY onload="setAnniv(6);dynAnimation();">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum