Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to change panel back color in Java script

Posted on 2011-03-12
3
Medium Priority
?
445 Views
Last Modified: 2012-05-11
I have a web page that fills  a dropdownlist with system.drawing.colors name and hexcode.

How can I change the backcolor of a panel based on the selection of the dropdownlist in javascript.  I want to use java so I dont have to postback.

thanks
0
Comment
Question by:mgmhicks
  • 2
3 Comments
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 500 total points
ID: 35120120

Are you after something like this:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26882798.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script> 

jQuery(document).ready(function(){

  $("#colour>option").each( function() {
    var contrast = (parseInt( $(this).val().substr(1,1), 16 ) > 7 )? "#000000" : "#FFFFFF";
    $(this).css( { backgroundColor: $(this).val(), color: contrast } );
  });

  $("#colour").click( eventClick );

});

function eventClick() {
  $("#panel").css( { backgroundColor: $(this).val() } );
}

</script>
<style>#panel { border: 2px dashed red; text-align: center; height: 200px; }</style>
</head>
<body>

<div id="panel">

<select id="colour">
<option value="#F0F8FF">AliceBlue</option>
<option value="#FAEBD7">AntiqueWhite</option>
<option value="#00FFFF">Aqua</option>
<option value="#7FFFD4">Aquamarine</option>
<option value="#F0FFFF">Azure</option>
<option value="#F5F5DC">Beige</option>
<option value="#FFE4C4">Bisque</option>
<option value="#000000">Black</option>
<option value="#FFEBCD">BlanchedAlmond</option>
<option value="#0000FF">Blue</option>
<option value="#8A2BE2">BlueViolet</option>
<option value="#A52A2A">Brown</option>
<option value="#DEB887">BurlyWood</option>
<option value="#5F9EA0">CadetBlue</option>
<option value="#7FFF00">Chartreuse</option>
<option value="#D2691E">Chocolate</option>
<option value="#FF7F50">Coral</option>
<option value="#6495ED">CornflowerBlue</option>
<option value="#FFF8DC">Cornsilk</option>
<option value="#DC143C">Crimson</option>
<option value="#00FFFF">Cyan</option>
<option value="#00008B">DarkBlue</option>
<option value="#008B8B">DarkCyan</option>
<option value="#B8860B">DarkGoldenRod</option>
<option value="#A9A9A9">DarkGray</option>
<option value="#A9A9A9">DarkGrey</option>
<option value="#006400">DarkGreen</option>
<option value="#BDB76B">DarkKhaki</option>
<option value="#8B008B">DarkMagenta</option>
<option value="#556B2F">DarkOliveGreen</option>
<option value="#FF8C00">Darkorange</option>
<option value="#9932CC">DarkOrchid</option>
<option value="#8B0000">DarkRed</option>
<option value="#E9967A">DarkSalmon</option>
<option value="#8FBC8F">DarkSeaGreen</option>
<option value="#483D8B">DarkSlateBlue</option>
<option value="#2F4F4F">DarkSlateGray</option>
<option value="#2F4F4F">DarkSlateGrey</option>
<option value="#00CED1">DarkTurquoise</option>
<option value="#9400D3">DarkViolet</option>
<option value="#FF1493">DeepPink</option>
<option value="#00BFFF">DeepSkyBlue</option>
<option value="#696969">DimGray</option>
<option value="#696969">DimGrey</option>
<option value="#1E90FF">DodgerBlue</option>
<option value="#B22222">FireBrick</option>
<option value="#FFFAF0">FloralWhite</option>
<option value="#228B22">ForestGreen</option>
<option value="#FF00FF">Fuchsia</option>
<option value="#DCDCDC">Gainsboro</option>
<option value="#F8F8FF">GhostWhite</option>
<option value="#FFD700">Gold</option>
<option value="#DAA520">GoldenRod</option>
<option value="#808080">Gray</option>
<option value="#808080">Grey</option>
<option value="#008000">Green</option>
<option value="#ADFF2F">GreenYellow</option>
<option value="#F0FFF0">HoneyDew</option>
<option value="#FF69B4">HotPink</option>
<option value="#CD5C5C">IndianRed </option>
<option value="#4B0082">Indigo </option>
<option value="#FFFFF0">Ivory</option>
<option value="#F0E68C">Khaki</option>
<option value="#E6E6FA">Lavender</option>
<option value="#FFF0F5">LavenderBlush</option>
<option value="#7CFC00">LawnGreen</option>
<option value="#FFFACD">LemonChiffon</option>
<option value="#ADD8E6">LightBlue</option>
<option value="#F08080">LightCoral</option>
<option value="#E0FFFF">LightCyan</option>
<option value="#FAFAD2">LightGoldenRodYellow</option>
<option value="#D3D3D3">LightGray</option>
<option value="#D3D3D3">LightGrey</option>
<option value="#90EE90">LightGreen</option>
<option value="#FFB6C1">LightPink</option>
<option value="#FFA07A">LightSalmon</option>
<option value="#20B2AA">LightSeaGreen</option>
<option value="#87CEFA">LightSkyBlue</option>
<option value="#778899">LightSlateGray</option>
<option value="#778899">LightSlateGrey</option>
<option value="#B0C4DE">LightSteelBlue</option>
<option value="#FFFFE0">LightYellow</option>
<option value="#00FF00">Lime</option>
<option value="#32CD32">LimeGreen</option>
<option value="#FAF0E6">Linen</option>
<option value="#FF00FF">Magenta</option>
<option value="#800000">Maroon</option>
<option value="#66CDAA">MediumAquaMarine</option>
<option value="#0000CD">MediumBlue</option>
<option value="#BA55D3">MediumOrchid</option>
<option value="#9370D8">MediumPurple</option>
<option value="#3CB371">MediumSeaGreen</option>
<option value="#7B68EE">MediumSlateBlue</option>
<option value="#00FA9A">MediumSpringGreen</option>
<option value="#48D1CC">MediumTurquoise</option>
<option value="#C71585">MediumVioletRed</option>
<option value="#191970">MidnightBlue</option>
<option value="#F5FFFA">MintCream</option>
<option value="#FFE4E1">MistyRose</option>
<option value="#FFE4B5">Moccasin</option>
<option value="#FFDEAD">NavajoWhite</option>
<option value="#000080">Navy</option>
<option value="#FDF5E6">OldLace</option>
<option value="#808000">Olive</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#FFA500">Orange</option>
<option value="#FF4500">OrangeRed</option>
<option value="#DA70D6">Orchid</option>
<option value="#EEE8AA">PaleGoldenRod</option>
<option value="#98FB98">PaleGreen</option>
<option value="#AFEEEE">PaleTurquoise</option>
<option value="#D87093">PaleVioletRed</option>
<option value="#FFEFD5">PapayaWhip</option>
<option value="#FFDAB9">PeachPuff</option>
<option value="#CD853F">Peru</option>
<option value="#FFC0CB">Pink</option>
<option value="#DDA0DD">Plum</option>
<option value="#B0E0E6">PowderBlue</option>
<option value="#800080">Purple</option>
<option value="#FF0000">Red</option>
<option value="#BC8F8F">RosyBrown</option>
<option value="#4169E1">RoyalBlue</option>
<option value="#8B4513">SaddleBrown</option>
<option value="#FA8072">Salmon</option>
<option value="#F4A460">SandyBrown</option>
<option value="#2E8B57">SeaGreen</option>
<option value="#FFF5EE">SeaShell</option>
<option value="#A0522D">Sienna</option>
<option value="#C0C0C0">Silver</option>
<option value="#87CEEB">SkyBlue</option>
<option value="#6A5ACD">SlateBlue</option>
<option value="#708090">SlateGray</option>
<option value="#708090">SlateGrey</option>
<option value="#FFFAFA">Snow</option>
<option value="#00FF7F">SpringGreen</option>
<option value="#4682B4">SteelBlue</option>
<option value="#D2B48C">Tan</option>
<option value="#008080">Teal</option>
<option value="#D8BFD8">Thistle</option>
<option value="#FF6347">Tomato</option>
<option value="#40E0D0">Turquoise</option>
<option value="#EE82EE">Violet</option>
<option value="#F5DEB3">Wheat</option>
<option value="#FFFFFF">White</option>
<option value="#F5F5F5">WhiteSmoke</option>
<option value="#FFFF00">Yellow</option>
<option value="#9ACD32">YellowGreen</option>
</select>

</div>

</body>
</html>

Open in new window

0
 
LVL 6

Accepted Solution

by:
Webmonkey earned 500 total points
ID: 35120136
That, or you could just add this to the select element:

<select onChange="document.getElementById('panel1').style.background-color=this.value">

Open in new window



As a side note:

Java != JavaScript.  Those are two completely different languages and the terms are not interchangeable.

Just thought you should know.
0
 
LVL 6

Expert Comment

by:Webmonkey
ID: 35156093
Bump
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question