JavaScript - Change The Start Day Of The Month

How to fetch only month from an already existing date text box...

eg:05-09-2009(dd-mm-yyyy),
i just want to fetch only month(09) in another text box

Hello everyone! I am using a javascript datepicker for a form field, and I had not noticed this before someone brought it up. I dont remember where I got the script but I am wondering if this error can be fixed. I had a look though the code but I do not program javascript, so nothing sticks out to me.

The problem comes when there is already a date in the field. Let me start by saying we format our dates as dd/mm/yyyy.

When a user clicks the field and opens the calendar it automatically goes to the date that is in the field (if there is one). Everything works fine, but when there its a number in the dd/ position that is under 12, the calendar uses it as the month. If the number is over 12, it uses the /mm/ as the month, which is correct.

So today for example, if the date in the field is 08/10/2010, and a user clicks the field to open the calendar, the calendar goes to August 2010... If the date is 15/10/2010 it will go to October which is correct.

Sorry for the length. I am wondering if this can be fixed somehow because finding a new datepicker and switching it on all my pages would take a very long time. Below is the datepicker.js, thanks to anyone who has time to take a look!


Code:

/*
 * DatePicker
 * @author Rick Hopkins
 * @modified by Micah Nolte and Martin Vašina
 * @version 0.3.2
 * @classDescription A date picker object. Created with the help of MooTools v1.11
 * MIT-style License.

-- start it up by doing this in your domready:

$$('input.DatePicker').each( function(el){
	new DatePicker(el);
});

 */

var DatePicker = new Class({

	/* set and create the date picker text box */
	initialize: function(dp){

		// Options defaults
		this.dayChars = 1; // number of characters in day names abbreviation
		this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		this.format = 'dd/mm/yyyy';
		this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
		this.startDay = 7; // 1 = week starts on Monday, 7 = week starts on Sunday
		this.yearOrder = 'asc';
		this.yearRange = 10;
		this.yearStart = (new Date().getFullYear());


		// Finds the entered date, or uses the current date
		if(dp.value != '') {
			dp.then = new Date(dp.value);
			dp.today = new Date();
		} else {
			dp.then = dp.today = new Date();
		}
		// Set beginning time and today, remember the original
		dp.oldYear = dp.year = dp.then.getFullYear();
		dp.oldMonth = dp.month = dp.then.getMonth();
		dp.oldDay = dp.then.getDate();
		dp.nowYear = dp.today.getFullYear();
		dp.nowMonth = dp.today.getMonth();
		dp.nowDay = dp.today.getDate();

		// Pull the rest of the options from the alt attr
		if(dp.alt) {
			options = Json.evaluate(dp.alt);
		} else {
			options = [];
		}
		dp.options = {
			monthNames: (options.monthNames && options.monthNames.length == 12 ? options.monthNames : this.monthNames) || this.monthNames, 
			daysInMonth: (options.daysInMonth && options.daysInMonth.length == 12 ? options.daysInMonth : this.daysInMonth) || this.daysInMonth, 
			dayNames: (options.dayNames && options.dayNames.length == 7 ? options.dayNames : this.dayNames) || this.dayNames,
			startDay : options.startDay || this.startDay,
			dayChars : options.dayChars || this.dayChars, 
			format: options.format || this.format,
			yearStart: options.yearStart || this.yearStart,
			yearRange: options.yearRange || this.yearRange,
			yearOrder: options.yearOrder || this.yearOrder
		};
		dp.setProperties({'id':dp.getProperty('name'), 'readonly':true});
		dp.container = false;
		dp.calendar = false;
		dp.interval = null;
		dp.active = false;
		dp.onclick = dp.onfocus = this.create.pass(dp, this);
	},

	/* create the calendar */
	create: function(dp){
		if (dp.calendar) return false;

		// Hide select boxes while calendar is up
		if(window.ie6){
			$$('select').addClass('dp_hide');
		}
		
		/* create the outer container */
		dp.container = new Element('div', {'class':'dp_container'}).injectBefore(dp);
		
		/* create timers */
		dp.container.onmouseover = dp.onmouseover = function(){
			$clear(dp.interval);
		};
		dp.container.onmouseout = dp.onmouseout = function(){
			dp.interval = setInterval(function(){
				if (!dp.active) this.remove(dp);
			}.bind(this), 500);
		}.bind(this);
		
		/* create the calendar */
		dp.calendar = new Element('div', {'class':'dp_cal'}).injectInside(dp.container);
		
		/* create the date object */
		var date = new Date();
		
		/* create the date object */
		if (dp.month && dp.year) {
			date.setFullYear(dp.year, dp.month, 1);
		} else {
			dp.month = date.getMonth();
			dp.year = date.getFullYear();
			date.setDate(1);
		}
		dp.year % 4 == 0 ? dp.options.daysInMonth[1] = 29 : dp.options.daysInMonth[1] = 28;
		
		/* set the day to first of the month */
		var firstDay = (1-(7+date.getDay()-dp.options.startDay)%7);
		
		
		
		/* create the month select box */
		monthSel = new Element('select', {'id':dp.id + '_monthSelect'});
		for (var m = 0; m < dp.options.monthNames.length; m++){
			monthSel.options[m] = new Option(dp.options.monthNames[m], m);
			if (dp.month == m) monthSel.options[m].selected = true;
		}
		
		/* create the year select box */
		yearSel = new Element('select', {'id':dp.id + '_yearSelect'});
		i = 0;
		dp.options.yearStart ? dp.options.yearStart : dp.options.yearStart = date.getFullYear();
		if (dp.options.yearOrder == 'desc'){
			for (var y = dp.options.yearStart; y > (dp.options.yearStart - dp.options.yearRange - 1); y--){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		} else {
			for (var y = dp.options.yearStart; y < (dp.options.yearStart + dp.options.yearRange + 1); y++){
				yearSel.options[i] = new Option(y, y);
				if (dp.year == y) yearSel.options[i].selected = true;
				i++;
			}
		}
		
		/* start creating calendar */
		calTable = new Element('table');
		calTableThead = new Element('thead');
		calSelRow = new Element('tr');
		calSelCell = new Element('th', {'colspan':'7'});
		monthSel.injectInside(calSelCell);
		yearSel.injectInside(calSelCell);
		calSelCell.injectInside(calSelRow);
		calSelRow.injectInside(calTableThead);
		calTableTbody = new Element('tbody');
		
		/* create day names */
		calDayNameRow = new Element('tr');
		for (var i = 0; i < dp.options.dayNames.length; i++) {
			calDayNameCell = new Element('th');
			calDayNameCell.appendText(dp.options.dayNames[(dp.options.startDay+i)%7].substr(0, dp.options.dayChars)); 
			calDayNameCell.injectInside(calDayNameRow);
		}
		calDayNameRow.injectInside(calTableTbody);
		
		/* create the day cells */
		while (firstDay <= dp.options.daysInMonth[dp.month]){
			calDayRow = new Element('tr');
			for (i = 0; i < 7; i++){
				if ((firstDay <= dp.options.daysInMonth[dp.month]) && (firstDay > 0)){
					calDayCell = new Element('td', {'class':dp.id + '_calDay', 'axis':dp.year + '|' + (parseInt(dp.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
				} else {
					calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
				}
				// Show the previous day
				if ( (firstDay == dp.oldDay) && (dp.month == dp.oldMonth ) && (dp.year == dp.oldYear) ) {
					calDayCell.addClass('dp_selected');
				}
				// Show today
				if ( (firstDay == dp.nowDay) && (dp.month == dp.nowMonth ) && (dp.year == dp.nowYear) ) {
					calDayCell.addClass('dp_today');
				}
				firstDay++;
			}
			calDayRow.injectInside(calTableTbody);
		}
		
		/* table into the calendar div */
		calTableThead.injectInside(calTable);
		calTableTbody.injectInside(calTable);
		calTable.injectInside(dp.calendar);
		
		/* set the onmouseover events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseover = function(){
				el.addClass('dp_roll');
			}.bind(this);
		}.bind(this));
		
		/* set the onmouseout events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onmouseout = function(){
				el.removeClass('dp_roll');
			}.bind(this);
		}.bind(this));
		
		/* set the onclick events for all calendar days */
		$$('td.' + dp.id + '_calDay').each(function(el){
			el.onclick = function(){
				ds = el.axis.split('|');
				dp.value = this.formatValue(dp, ds[0], ds[1], ds[2]);
				this.remove(dp);
			}.bind(this);
		}.bind(this));
		
		/* set the onchange event for the month & year select boxes */
		monthSel.onfocus = function(){ dp.active = true; };
		monthSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp);
			this.create(dp);
		}.bind(this);
		
		yearSel.onfocus = function(){ dp.active = true; };
		yearSel.onchange = function(){
			dp.month = monthSel.value;
			dp.year = yearSel.value;
			this.remove(dp);
			this.create(dp);
		}.bind(this);
	},
	
	/* Format the returning date value according to the selected formation */
	formatValue: function(dp, year, month, day){
		/* setup the date string variable */
		var dateStr = '';
		
		/* check the length of day */
		if (day < 10) day = '0' + day;
		if (month < 10) month = '0' + month;
		
		/* check the format & replace parts // thanks O'Rey */
		dateStr = dp.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
		dp.month = dp.oldMonth = '' + (month - 1) + '';
		dp.year = dp.oldYear = year;
		dp.oldDay = day;
		
		/* return the date string value */
		return dateStr;
	},
	
	/* Remove the calendar from the page */
	remove: function(dp){
		$clear(dp.interval);
		dp.active = false;
		if (window.opera) dp.container.empty();
		else if (dp.container) dp.container.remove();
		dp.calendar = false;
		dp.container = false;
		$$('select.dp_hide').removeClass('dp_hide');
	}
});

Hi to aLL

CAN ANY BODY HELP ME OUT IN WRITING JAVASCRIPT CODE FOR MONTH PICKER
HERE I DONT NEED DATE, I JUST WANT ALL THE MONTHS IN PLACE OF DATES AND AN OPTION FOR SELECTING YEARS, WHEN I SELECT MONTH AND CHOOSE YEAR, THEN TEXT FIELD GET JAN-2008
clearly, need a calender with out date in it, months and years....
colud you please give me any information regarding this

thank you

Hello:

Many apologies if this is not an appropriate question here... but I have googled my fingers raw and haven't been able to find a script to do what I am looking for. I have little experience with JavaScript.

I have a VBA script (code at the end of this post) that returns the date corresponding to a given occurrence of a given weekday, e.g. Ask it for the 3rd Tuesday in October 2012 and it gives you 16-OCT-2012. It defaults to current year if you don't pass the Year argument.

It's a pretty simple script, but I need to either finds something in JavaScript that does the same thing, or convert the VBA code to JavaScript. I can't help but think that many people have already written scripts that do this. Any chance someone can lead me in a productive direction here?

Regards,

Steve Jones

(update - I noticed the code didn't retain its formatting, so I attached a text file)

-begin VBA code-
Public Function xdate(m As Integer, n As Integer, wd As Integer, Optional y As Integer = 0) As Date
'// m = 1-12 (Jan-Dec), n = 1-5 (1st-4th, last), wd = 1-7 (Sun-Sat), y = 1900-9999 or left blank for current year
Select Case y
Case 0 ' // Default. Use the current year.
y = year(Date)
Case 1900 To 9999 ' // treat the value as an explicit year
Case -100 To -1, 1 To 100 ' // treat the value as an offset to be applied to the current year
y = year(Date) + y
Case Else
' // invalid value. Insert whatever error processing you like.
End Select
Select Case n
Case 1 To 4 '// first through fourth
Case 5 '// last. We need to check to see it fell within the month specified, if not, use 4.
xdate = DateSerial(y, m, (8 - weekday(DateSerial(y, m, 1), (wd + 1) Mod 8)) + ((n - 1) * 7))
If month(xdate) <> m Then
n = 4
End If
Case Else
' // invalid value - insert error processing code here if you like.
' // Probably should check the other arguments as well.
End Select
xdate = DateSerial(y, m, (8 - weekday(DateSerial(y, m, 1), (wd + 1) Mod 8)) + ((n - 1) * 7))
End Function
-end vba code-

Hi Guys ,

i am wondering how i can get the current 6 month windows like the following

always based onthe current month


Aug-11
Sep-11
Oct-11
Nov-11
Dec-11
Jan-12


thanks!

I have a website with all of the months of the year. The main page of the website is suppose to be the current month. How can make my index page load automatically to the correct month. So if it is April, my index page will automatically load april.html.
Thank you so much!

Greetings. I am trying to create an "image of the day" for a site where the image will change automatically every 24 hours. Currently, I have 30 images in a folder named "petday" (no quotes) and I tried the following code (found in this forum) but I cannot get it to work. Any help or suggestions would be greatly appreciated. On a side note, I am very new to JavaScript and I know there is an easier way to write this but I am not real clear on how to do it. I have been reading the lessons found at W3 schools and I think I can use a switch statement? Is that correct?

Code:

<SCRIPT Language="JavaScript">

var now = new Date();
var dd = now.getDate();

if (dd==1)
document.write('<img src="petday/image1.jpg">');
else if (dd==2)
document.write('<img src="petday/image2.jpg">');
else if (dd==3)
document.write('<img src="petday/image3.jpg">');
else if (dd==4)
document.write('<img src="petday/image4.jpg">');
else if (dd==5)
document.write('<img src="petday/image5.jpg">');
else if (dd==6)
document.write('<img src="petday/image6.jpg">');
else if (dd==7)
document.write('<img src="petday/image7.jpg">');
else if (dd==8)
document.write('<img src="petday/image8.jpg">');
else if (dd==9)
document.write('<img src="petday/image9.jpg">');
else if (dd==10)
document.write('<img src="petday/image10.jpg">');
else if (dd==11)
document.write('<img src="petday/image11.jpg">');
else if (dd==12)
document.write('<img src="petday/image12.jpg">');
else if (dd==13)
document.write('<img src="petday/image13.jpg">');
else if (dd==14)
document.write('<img src="petday/image14.jpg">');
else if (dd==15)
document.write('<img src="petday/image15.jpg">');
else if (dd==16)
document.write('<img src="petday/image16.jpg">');
else if (dd==17)
document.write('<img src="petday/image17.jpg">');
else if (dd==18)
document.write('<img src="petday/image18.jpg">');
else if (dd==19)
document.write('<img src="petday/image19.jpg">');
else if (dd==20)
document.write('<img src="petday/image20.jpg">');
else if (dd==21)
document.write('<img src="petday/image21.jpg">');
else if (dd==22)
document.write('<img src="petday/image22.jpg">');
else if (dd==23)
document.write('<img src="petday/image23.jpg">');
else if (dd==24)
document.write('<img src="petday/image24.jpg">');
else if (dd==25)
document.write('<img src="petday/image25.jpg">');
else if (dd==26)
document.write('<img src="petday/image26.jpg">');
else if (dd==27)
document.write('<img src="petday/image27.jpg">');
else if (dd==28)
document.write('<img src="petday/image28.jpg">');
else if (dd==29)
document.write('<img src="petday/image29.jpg">');
else if (dd==30)
document.write('<img src="petday/image30.jpg">');

</SCRIPT>

Hello,

I have this reservation form found on the main page of: http://www.avis.com.lb/
As you can see the current month "August" is selected as the default month and so is the year and day (the day is programmed to jump 2 days ahead for the renting of the car...)

However if you look closely (check the screenshot attached) you'll see that the month "August" is repeated twice and so is the year "2009", the current month is repeated twice. What I wanna do is remove the duplication and just auto select the current month without duplicating it.

I found this code: http://www.experts-exchange.com/Prog..._24229186.html
But it doesn't seem to work with my form, I donno why.

Here is the code of the script both javascript and a little bit of php
PHP Code:
$date = strtotime("+2 day");
                $date2 = date('j',$date);
                 $date4 = strtotime("+5 day");
                $date3 = date('j',$date4);
                if($date3 == 1){
                $nextmonth = strtotime("+1 day");
                $monthid = date('m',$nextmonth);    
                }else{
                $nextmonth = strtotime("+0 day");
                $monthid = date('m',$nextmonth);    
                }
            if ($monthid==1){
                $year = date("Y") + 1;
            }else{
                $year = date("Y");
            }
              //$pupday = date("j") - 12;
              //$pupday = date("d") + 2;
              //echo $pupday;
              //$returnday = date("d") +5;
              $month = date("F"); 


Code:

var xMonths = new Array( '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' );

function getListValue( option_object  ){return option_object[ option_object.selectedIndex ].value;}
function setListValue( option_object, value  ){ option_object.selectedIndex = value;}
function addDays(myDate,days) {
    return new Date(myDate.getTime() + days*24*60*60*1000);
}
function init()
{
xToday = new Date();
yToday = addDays(new Date(),3);

xMonth = xToday.getMonth();
xDay = xToday.getDate()-1;
xYear = xToday.getYear()-2005; if (xYear < 2005) xYear=0;
yMonth = yToday.getMonth();
yDay = yToday.getDate()-1;
yYear = yToday.getYear()-2005; if (yYear < 2005) yYear=0;
  xF = document.forms['quickbooking'];
  setListValue( xF.ETAHour, 9 )
  setListValue( xF.ETAMonth, xMonth )
  setListValue( xF.ETADay, xDay )
  setListValue( xF.ETAYear, xYear )
  setListValue( xF.ETTHour, 9 )
  setListValue( xF.ETTMonth, yMonth )
  setListValue( xF.ETTDay, yDay )
  setListValue( xF.ETTYear, yYear )
}

Code:

<select class="formField" name="ETAMonth">
                <option value="<? echo $monthid; ?>"  selected="selected"><? echo $month; ?></option>
                <option 
                                value="01">January</option>
                <option 
                                value="02">February</option>
                <option value="03">March</option>
                <option 
                                value="04">April</option>
                <option value="05">May</option>
                <option 
                                value="06">June</option>
                <option value="07">July</option>
                <option 
                                value="08">August</option>
                <option value="09">September</option>
                <option 
                                value="10">October</option>
                <option value="11">November</option>
                <option 
                                value="12">December</option>
              </select>
              <select 
                                class="formField" name="ETAYear">
              <option value="<? echo $year; ?>" selected="selected"><? echo $year; ?></option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <option value="2010">2010</option>
            </select>

Help is very appreciated, thanks.

hi,

anyone knows how to get the past 6th month date using time difference? like if the current date is given 18-April-2011 then the past 6th month date is 18-October-2010...how can this be done by using time difference?

Thanks,

verve

I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere.
E.g. I have following declaration in the head section of html:

<script language="javascript" type="text/javascript" src="java1.js"
</script>

My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as:

var firstname="Tom";

I put document.write statement to the head of html section as:

<script language="javascript" type="text/javascript" src="java1.js">
document.write;
</script>

....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding.

hi every one i;m new here and i love to know programming languages and some friends adviced me to start with java script then php , and i guess i'm at the right place can you please tell how to start and where to begain i'm really don't know anything about programming

Hi guys I'm new to the forums here. I want to learn how to use Javascript and AJAX along with jquery or prototype to develop a dynamic website.

For example, I like how www.dropbox.com works. Everything has a transition, and you can drag and drop things around which is what I like.

Ultimately I hope to be able to develop a dynamic website with social networking elements.

I know my goals are lofty, but where should I get started and what should I learn. I have some cursory programming experience with visual basic, fortran and html. Any particular books that would help me learn. Ideally a book would have some programming "challenges" or small projects that would give me some experience.

Thanks

Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe

http://net.tutsplus.com/tutorials/ja...ck-navigation/

I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out.

The problem I have is that I need the images to be transparent initially when they are in the stack.

You can see the problem he http://bit.ly/cdelJu

Here is the javascript for this:

Code:

$(function () { 
	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack2>img').toggle(function(){
		var vertical = 0;
		var horizontal = 90;
		var $el=$(this);
		$el.next().children().each(function(){
			$(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed);
			vertical = vertical + 40;
			horizontal = (horizontal+.75)*1.15;
		});
		$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingBottom: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed);
		$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
		$el.animate({paddingBottom: '35px'});
	});
	
	// Stacks additional animation
	$('.stack2 li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
});

and here is the css:

Code:

/* ================ STACK #2 ================ */
.stack2 { position: fixed; top: 28px; left: 90px;}
.stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }
.stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; }
.stack2 ul li { position: absolute;  }
.stack2 ul li img { border: 0;  }
.stack2 ul li span { display: none; }
.stack2 .openStack li span { 
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	display:block;
	height: 14px;
	position:absolute;
	top: 17px;
	right:60px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fcfcfc;
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	opacity: .85;
	filter: alpha(opacity = 85);
}

#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }

/* IE Fixes */
.stack2 { _position: absolute; }
.stack2 ul { _z-index:-1; _top:-15px; }
.stack2 ul li { *right:5px; }

annd the html:

Code:

<div class="stack2">
		<img src="images/stacks/stack-down.png" alt="stack"/>
		<ul id="stack2">
	    <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li>
			<li><a href="#"><span>All&nbsp;Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li>
			<li><a href="example3.html"><span>Example&nbsp;3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li>
			<li><a href="example2.html"><span>Example&nbsp;2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li>
			<li><a href="index.html"><span>Example&nbsp;1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li>			
		</ul>
</div>

Any help is greatly appreciated!

Ok so i want to code something like this
http://i45.tinypic.com/29y10s1.png

I want it to where the user just clicks on one of the buttons and it changes to the thing. But then i want to be where if the user doesn't click anything then it just changes by itself. so like on a timer.

Can anyone give me some references that might help me get started with coding this.
I have no clue where tos tart.