CSD 340 (Blum) 1

Drop-down list and timers

CSD 340 (Blum) 2

Double click on the drop-down list icon to place one on the page.

CSD 340 (Blum) 3

Change the name and id attributes

CSD 340 (Blum) 4

Use the Style Builder dialog box to select a background color

CSD 340 (Blum) 5

Use the Style Builder dialog box to set the width

CSD 340 (Blum) 6

Right click on the drop-down list and choose Properties

CSD 340 (Blum) 7

Enter expressions into the Text and Value textboxes and click Insert to place data into list.

CSD 340 (Blum) 8

Add more.

CSD 340 (Blum) 9

Result in HTML view

CSD 340 (Blum) 10

Add a large div (Grid Layout Panel). Give it an id.

CSD 340 (Blum) 11

Click in the general document (on the page but not in the div or the drop down list) and click on the bgcolor attribute

CSD 340 (Blum) 12

Choose a color (I chose black – yeah I know it’s not really a color)

CSD 340 (Blum) 13

Result

CSD 340 (Blum) 14

Add two scripts – one in the head and one in the body

CSD 340 (Blum) 15

Body code

<script>

var timerID=setInterval("RenderShape()",1000);

</script>

This code establishes a timer that “raises” a timer event every 1000 milliseconds (every second). It calls the RenderShape function that is placed in the head.

CSD 340 (Blum) 16

Head code

<script>

function RenderShape()

{

alert("HI");

}

</script>

A function that display a message HI. It will be called every second.

CSD 340 (Blum) 17

var AngleOffSet=0;function RenderShape(){

var RectHTML;var XCenter = 300;var YCenter = 300; var PI=Math.atan(1)*4;var Angle;var Radius= 200; var XPosition;var YPosition;

Revised RenderShape() – part 1

CSD 340 (Blum) 18

Revised RenderShape() – part 2

AngleOffSet = AngleOffSet - 5;

Angle = (AngleOffSet)*2*PI/360;

XPosition=XCenter+Radius*Math.cos(Angle);

YPosition=YCenter+Radius*Math.sin(Angle);

RectHTML="<div style=\"height: 60px; width: 40px; position: absolute; top:"+YPosition+"px; left: "+XPosition+"px; background: #FFFFFF\" ms_positioning=\"GridLayout\"></div>";

MyDiv.innerHTML = RectHTML;

}

CSD 340 (Blum) 19

White rectangle moves around in a circle.

CSD 340 (Blum) 20

Faster, faster.

• var timerID=setInterval("RenderShape()",100);

• Lower the number in the setInterval function to make the circle move around faster.

CSD 340 (Blum) 21

AngleOffSet = AngleOffSet - 5;MyDiv.innerHTML="";for(i=15; i>=0; i--){

Angle = (AngleOffSet+i*i)*2*PI/360;XPosition=XCenter+Radius*Math.cos(Angle);YPosition=YCenter+Radius*Math.sin(Angle);

RectHTML="<div style=\"height: 60px; width: 40px; position: absolute; top:"+YPosition+"px; left: "+XPosition+"px; background: #FFFFFF\" ms_positioning=\"GridLayout\"></div>";

MyDiv.innerHTML += RectHTML;}

CSD 340 (Blum) 22

A set of rectangles moving in a circle.

CSD 340 (Blum) 23

Introduce code to change color of rectanglesMyColor=(255-17*i).toString(16)+(255-17*i).toString(16)+(255-

17*i).toString(16);

RectHTML="<div style=\"height: 60px; width: 40px; position: absolute; top:"+YPosition+"px; left: "+XPosition+"px; background: #"+MyColor+"\" ms_positioning=\"GridLayout\"></div>";

CSD 340 (Blum) 24

Result

CSD 340 (Blum) 25

for(i=15; i>=0; i--){switch(selShape.value){case "circ":Angle = (AngleOffSet+i*i)*2*PI/360;XPosition=XCenter+Radius*Math.cos(Angle);YPosition=YCenter+Radius*Math.sin(Angle);break;case "card":Angle = (AngleOffSet+i*i)*2*PI/360;Radius = 200*(1+Math.cos(Angle));XPosition=XCenter+Radius*Math.cos(Angle);YPosition=YCenter+Radius*Math.sin(Angle);break;

CSD 340 (Blum) 26

case "astr":

Angle = (AngleOffSet+i*i)*2*PI/360;

XPosition=XCenter+Radius*Math.cos(Angle)*Math.cos(Angle)*Math.cos(Angle);

YPosition=YCenter+Radius*Math.sin(Angle)*Math.sin(Angle)*Math.sin(Angle);

}

}