Add dropdown to Page
Place a drowdown on aspx Page and name it 'ddlColor'
<asp:DropDownList ID="ddlColor" runat="server">
</asp:DropDownList>
Write Code behind
In Page Load add its "onchange" attributes.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Page.IsPostBack = False Then
Me.ddlColor.Attributes.Add("onchange", "ChangeColor()")
End If
End Sub
Add Function to Body TAG
In aspx Page, in Body tag add its onload function.
Body Tag should like this.
<body onload="AddColorsToDropDown()">
Add Javascript
Add Javascript function in the head tag.
<script language="javascript" type="text/javascript">
function AddColorsToDropDown()
{
/*Instance of Dropdown*/
var ddl = document.getElementById('ddlColor');
ddl.options.length = 0;
/*Names of Color you want to be added in dropdown*/
var colorArray = new Array("red", "white", "blue", "green", "yellow", "purple", "silver", "maroon","aqua", "hotpink");
/*Add Items*/
for (var i = 0; i < colorArray.length ; i++)
{
/*crate a new option element*/
var optn = document.createElement("option");
optn.value = colorArray[i];
optn.text = colorArray[i];
/*Add option to dropdown*/
ddl.options.add(optn);
/*Set Option's Background Color*/
var listitem = ddl.options[i];
listitem.style.backgroundColor = listitem.value;
}
/*Set Background Color of selected Item On Load*/
document.body.style.backgroundColor = ddl.value;
}
function ChangeColor()
{
var ddl = document.getElementById('ddlColor');
var selectedItem = ddl.value;
/*Set Background Color of selected Item On Change*/
ddl.style.backgroundColor=ddl.value;
/*Set Background Color of Page On Change*/
document.body.style.backgroundColor = ddl.value;
}
</script>
Description
First We add a dropdown and in Page Load add its on change Event so that when it is changed Page background color is changed.
Then in body tag adding a function "AddColorsToDropDown' which wil be called on load.In this function we have an array of string that contains colors.you can add as many colors as you want but that must be a color recognized by browser in this array. then we loop through all elements of array and for each color we create an option element and set its properties and add it to dropdown and at the same time we set its background color using style attribute.
Then we set the background color of dropdown so that when its value is changed the selected color is also changed.
Function "ChangeColor()" gets the instance of Dropdown and changes the background color of drowdown and Page according to value of selected Item of Dropdown.
 Attachments
Page1 (23322-2155-WebSite1.rar)
|
No responses found. Be the first to respond and make money from revenue sharing program.
|