Link change each month

@latrobeSep 22.2014

I am looking for code to make a text link go to different web pages dependent on the current month. I would expect it to be possible using the getmonth() function. Can anyone help?

to post a comment

JavaScript

13 Comments(s) _↴

@Sup3rkirbySep 22.2014 — #What you want seems simple enough, minus the exact details of your links. There are really a few ways to go about this as well; the 'best' way is probably subjective so I'll try to cover a few.

For one, you could have the link itself simply execute a javascript function, which would then send the user to the corresponding page for the current month.

[CODE]
 <a href="javascript:void(0);" onclick="_MonthlyLink()">Monthly Link</a>
 
 <script>
 function _MonthlyLink() {
 var $links = [
 "http://www.website.com/january",
 "http://www.website.com/february",
 "http://www.website.com/march",
 "http://www.website.com/april",
 "http://www.website.com/may",
 "http://www.website.com/june",
 "http://www.website.com/july",
 "http://www.website.com/august",
 "http://www.website.com/september",
 "http://www.website.com/october",
 "http://www.website.com/november",
 "http://www.website.com/december"
 ];
 window.location.href = $links[new Date().getMonth()];
 }
 </script>
 [/CODE]

Alternatively, you could have the link itself generated dynamically. And in this case you can have javascript do it or, if possible, have PHP generate the link, avoiding any dependencies for javascript (since this is a link after all, and navigation shouldn't require scripting).

Javascript Link Generation

[CODE]
 <span id="linkContainer"></span>
 
 <script>
 (function(){
 var $links = [
 "http://www.website.com/january",
 "http://www.website.com/february",
 "http://www.website.com/march",
 "http://www.website.com/april",
 "http://www.website.com/may",
 "http://www.website.com/june",
 "http://www.website.com/july",
 "http://www.website.com/august",
 "http://www.website.com/september",
 "http://www.website.com/october",
 "http://www.website.com/november",
 "http://www.website.com/december"
 ];
 var $link = document.createElement('a');
 $link.href = $links[new Date().getMonth()];
 var $linkText = document.createTextNode("Monthly Link");
 $link.appendChild($linkText);
 document.getElementById('linkContainer').appendChild($link);
 })();
 </script>
 [/CODE]

@latrobeauthorSep 22.2014 — #Thanks that works perfectly. You mention that it would be better to use PHP to generate the link. Can you suggest the code for that?

@jedaisoulSep 23.2014 — #The corresponding code in PHP is just:

<i>
 </i>&lt;?php echo 'http://www.website.com/'.lcfirst(date('F')); ?&gt;

@Sup3rkirbySep 23.2014 — #I suppose I should note that the javascript version of this could be reduced quite a bit depending on your situation. The only reason I used an array to hold all of the links is because I wanted to account for the possibility that these links might go to entirely different sites or domains. In the event that they are all on the same domain you could implement a simpler solution, like the PHP version [B]jedaisoul[/B] provided.

@latrobeauthorSep 23.2014 — #The links in fact go to pages in the same site - eg 'January.html' - so a simple code should be possible. I am not familiar with PHP so I do not know how to modify jedaisoul's code for my links.

@Sup3rkirbySep 24.2014 — #So, with jedaisoul's code, PHP is printing out the name of the month (with the first letter being converted to lowercase) at the end of the URL. Based on your example, I'll assume the month names should have a capital first letter and will have a .html extension. Given that all pages are on the same site, I'll also assume all of the 'monthly link pages' are in the root directory. If this is not the case you would of course need to set the correct path.

[code=php]
 <a href="<?php echo '/'.date('F').'.html'; ?>">Monthly Link</a>
 [/code]

Javascript unfortunately does not have a way to automatically print out month names so the code is a little bulkier than a PHP solution:

[CODE]
 <span id="linkContainer"></span>
 
 <script>
 (function(){
 var $links = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 var $link = document.createElement('a');
 $link.href = '/'+$links[new Date().getMonth()]+'.html';
 var $linkText = document.createTextNode("Monthly Link");
 $link.appendChild($linkText);
 document.getElementById('linkContainer').appendChild($link);
 })();
 </script>
 [/CODE]

Though, I suppose that code could be simplified a bit more. The code above is designed to dynamically create the link element and place it inside of a [B]<span>[/B] tag on the page. You could however, simply assign an [I]id[/I] to the link element and directly set the [I]href[/I], reducing the amount of code:

[CODE]
 <a id="monthlyLink" href="#">Monthly Link</a>
 
 <script>
 (function(){
 var $links = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 document.getElementById('monthlyLink').href = '/'+$links[new Date().getMonth()]+'.html';
 })();
 </script>
 [/CODE]

You could also use the [B]document.write()[/B] method and maybe condense the code a little more, but then that gets into practices I don't necessarily think are good, and probably not really worth any small benefit you'd gain from the slightly smaller code.

@latrobeauthorSep 24.2014 — #The PHP code didn't work. I got a 'Not Found' page showing this URL:

http://www.website.com/<?php echo '/'.date('F').'.html'; ?>

It doesn't seem to be reading the PHP code.

@jedaisoulSep 25.2014 — #@latrobe

PHP only works on a web server. It will not be executed by your browser (as HTML. CSS and JavaScript are. To test the code you need to set-up a local host and run it there. I use Wampserver as my local host.

@latrobeauthorSep 25.2014 — #Yes I guessed that. I modified the page and loaded it onto the server, so it ran as a normal web page. The result was as I described.

@Sup3rkirbySep 25.2014 — #Assuming the server you are running this on has PHP installed, the page itself needs to be a PHP page (.php extension) rather than a standard webpage (.html extension). Otherwise the PHP will not be parsed and will simply print out as you have indicated.

@jedaisoulSep 25.2014 — #Oops, I forgot to mention that... ?

@latrobeauthorSep 25.2014 — #That fixed it. I can see I still have a lot to learn. Thank you both for all your help. I think that we can close this thread now.

@jedaisoulSep 26.2014 — #Thread closed.

Also in #JavaScript _↴

Button to insert text Remember form input Help!! Functioning in older browsers

Success!

Help @latrobe spread the word by sharing this article on Twitter...

Tweet This

Link change each month

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Link change each month

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴