CSS animations (google)

Did you todays http://www.google.com/ page?
Its got this earth day image instead of the multicolored google.
Its not a gif or a silverlight or JS or flash, as I see it, it might be simple CSS animation
(of course some jquery stuff included)
see http://www.the-art-of-web.com/css/css-animation/
css animations load faster are browser plugin independent
and some of us find it cool.

Weekly report with weekly date selection

     In my previous post, I had used the calendar extender to show days by weeks upon selection, Using the same thing, I used it to generate a weekly report.
     Upon selection of the date the corresponding week is automatically selected and linkbuttons show the next and previous weeks.
     Upon first selection, the textbox (showing the selected week) is populated by JavaScript and so are the links, when report generation is done all the dates are on the server, hence, after the first selection, things are done from the server in C#.
     I use the NorthWind database's OrderDetails table. You can get the sample database script from here.

and ofcourse you can download the source from here

Calender Extender and weekly dates

 I was using this with a ajax calender extender.
You have to use the OnClientDateSelectionChanged event fired on the client and pass the sender and args like

<ajaxToolKit:CalendarExtender ID="CalendarExtender1" 
TargetControlID="txtWeek"  runat="server" PopupButtonID=imgBtnCalWeek 
OnClientDateSelectionChanged =foo FirstDayOfWeek=Monday >
</ajaxToolKit:CalendarExtender>

and the javascript

function foo(sender, args)
{
  var selectedDate = new Date();
  selectedDate = sender._selectedDate;
  alert(selectedDate);
}

you can also do document.getElementById('txtweek').value;
to get the date selected but I guess you need to convert the text into date before moving ahead.

Anyway here I was, thinkin of a login to find monday of any selected week,
and then I found http://www.datejs.com/ this stuff is awesome!
download just one .js file and include it in your project and we're done.
Then you get loads of Date functions see the Example Usage  here http://code.google.com/p/datejs/
it doesn't get simpler....
finding 'monday' of the selected week is as simple as Date.today().last().monday()

and so I wrote this but I tried the normal way first, so I did the Date.getDay(); method available already.

the aspx

<asp:TextBox ID=txtWeek runat=server ReadOnly=true Width=220></asp:TextBox>

  
   <asp:ImageButton runat="Server" ID="imgBtnCalWeek"ImageUrl="~/Calendar_scheduleHS.png"
AlternateText="Click to show calendar"/>
   <ajaxToolKit:CalendarExtender ID="CalendarExtender1" 
TargetControlID="txtWeek"  runat="server" PopupButtonID=imgBtnCalWeek 
OnClientDateSelectionChanged =getWeek FirstDayOfWeek=Monday 
PopupPosition=BottomRight ></ajaxToolKit:CalendarExtender>

JavaScript

function getWeek(sender, args) {
            var startDate = new Date();
            var endDate = new Date();
            var selectedDate = new Date();
            selectedDate = sender._selectedDate;
            var d = getDayString(selectedDate.getDay());
            switch (d.toString()) {
                case "Sunday":
                    startDate = selectedDate.addDays(-6);
                    endDate = selectedDate;
                    break;
                case "Monday":
                    startDate = selectedDate;
                    endDate = selectedDate.addDays(6);
                    break;
                case "Tuesday":
                    startDate = selectedDate.addDays(-1);
                    endDate = selectedDate.addDays(5);
                    break;
                case "Wednesday":
                    startDate = selectedDate.addDays(-2);
                    endDate = selectedDate.addDays(4);
                    break;
                case "Thursday":
                    startDate = selectedDate.addDays(-3);
                    endDate = selectedDate.addDays(3);
                    break;
                case "Friday":
                    startDate = selectedDate.addDays(-4);
                    endDate = selectedDate.addDays(2);
                    break;
                case "Saturday":
                    startDate = selectedDate.addDays(-5);
                    endDate = selectedDate.addDays(1);
                    break;
                default:
                    selectedDate = new Date();

            }
            var link1 = startDate.addDays(-7);
            var link2 = startDate.addDays(-1);
            var link3 = endDate.addDays(1);
            var link4 = endDate.addDays(7);
            document.getElementById('txtWeek').value = startDate.toDateString() + " to " + endDate.toDateString();
         
        }

and

function getDayString(num) {
            var day;    //Create a local variable to hold the string
            switch (num) {
                case 0:
                    day = "Sunday";
                    break;
                case 1:
                    day = "Monday";
                    break;
                case 2:
                    day = "Tuesday";
                    break;
                case 3:
                    day = "Wednesday";
                    break;
                case 4:
                    day = "Thursday";
                    break;
                case 5:
                    day = "Friday";
                    break;
                case 6:
                    day = "Saturday";
                    break;
                default:
                    day = "Invalid day";
            }
            return day;
        }

and this is the function to add days

Date.prototype.addDays = function (days) {
            var dat = new Date(this.valueOf())
            dat.setDate(dat.getDate() + days);
            return dat;
        }

I got it from here http://stackoverflow.com/questions/563406/add-days-to-datetime-using-java-script
from a js guru.