Page 1 - Basic Controls

Menu - has 2 includes for CSS and Javascript

Slider - changes background color in order to show text

PlaceHolder -

Upload - to upload images

Rotator - rotates 4 images

Include - include parts of a web page

Calendar - this control has functions for a month calendar

UpdatePanel - does a partial render, thus reducing flicker???

Page2 - has a variety of controls for lists

Page3 - has some controls in the AJAX toolkit

Page4 - has a some tips and techniques

Timed Slider for Background Color

HTML

div id='sliderBackDiv'

C#

ClientScript.RegisterStartupScript(this.GetType(), 'script', 'setInterval(nextBackColor, 5000);', true);

Javascript

window.onload(setup);
function setup() { sliderCounter = 0;}
function nextBackColor() {
sliderCounter++;
var sliderBack = document.getElementById('sliderBackDiv');
if (sliderCounter % 3 == 0) sliderBack.style.backgroundColor = 'lightgray';

Responsive Menu

CSS

[% Response.WriteFile("MenuStyleCss.inc"); %]

[% Response.WriteFile("MenuToggleJS.inc"); %]

............

Click here

HTML

[div class='topnav' id='myTopnav' style='font-size:16px; font-weight:bold'> [a href='#homeContainer'>Home [/div>

Upload Definition

In ASPX:

asp:FileUpload

asp:Button OnClick='btnUpload_Click'

asp:Label

In C#

btnUpload_Click() {

if (FileUpload1.HasFile) uploadLabel.Text = FileUpload1.FileName;

Upload Execution

name tbd

Rotator for Pictures

HTML

img id='img1,img2,img3'

C#

Register...

Javascript

var temp = getElementById('img1').src;
getElementById('img1').src = getElementById('img2').src;
getElementById('img2').src = getElementById('img3').src;
getElementById('img3').src = getElementById('img4').src;
getElementById('img4').src = temp.src;

Include Code

.inc File

Right click solution, Add, ???
Any css, javascript, or HTML code'

HTML

[% Response.Write(somefile.inc) %]

See Menu CSS section's click here

Calendar Definition

aspx's HTML:

Calendar with the following options:

- BorderWidth

TODO - Display the selected date

Calendar Control

< April 2024 >
Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4
5	6	7	8	9	10	11

Popup for Calendar

Note: This is not modal

The popup for calendar is from javascript

The popup returns the date selected as a session variable, however a button is needed to get it

Place Holder

A placeholder is similiar to a div, but can add controls to it from C#

Update Panel

This will re-display the date/time every second

By specifiying an update panel it will only partially render it,

thereby reducing the flicker otherwise resulting a total render.

Note: MaintainScrollPositionOnPostback="true" Page directive was needed