Showing posts with label div. Show all posts
Showing posts with label div. Show all posts

Saturday, 26 October 2013

Change Div/Panel Border width and color on dropdownlist selectedchanged Event using Javascript

Use this code to implement this function:

<asp:DropDownList ID="ddlchnageborderwidth" runat="server">
          <asp:ListItem Value="1px">1px</asp:ListItem>
          <asp:ListItem Value="2px">2px</asp:ListItem>
          <asp:ListItem Value="3px">3px</asp:ListItem>
          <asp:ListItem Value="4px">4px</asp:ListItem>
</asp:DropDownList>
                                             
<asp:DropDownList ID="ddlchnagebordercolor" runat="server">
         <asp:ListItem Value="#000000">Black</asp:ListItem>
         <asp:ListItem Value="#0000FF">Blue</asp:ListItem>
         <asp:ListItem Value="#A52A2A">Brown</asp:ListItem>
         <asp:ListItem Value="#FF7F50">Coral</asp:ListItem>
         <asp:ListItem Value="#A9A9A9">DarkGray</asp:ListItem>
        <asp:ListItem Value="#8B0000">DarkRed</asp:ListItem>
 </asp:DropDownList>


Color change javascript code:
<script type="text/javascript">
$("#ddlchnageborderwidth").change(function() {
    $("#someDiv").css("border-width", $(this).val());
}).change();
 </script>

                                                ​
Color change javascript code:
<script type="text/javascript">
$("#ddlchnagebordercolor").change(function() {
    $("#someDiv").css("border-color", $(this).val());
}).change();
 </script>

Monday, 5 August 2013

Change Border width and Color on Dropdown selected item

Javascript funtion :

 <script type="text/javascript">
$("#evt_width").change(function() {
    $("#someDiv").css("border-width", $(this).val());
}).change();
</script>​
<script type="text/javascript">
$("#evt_color").change(function() {
    $("#someDiv").css("border-color", $(this).val());
}).change();
</script>​

in this evt_witdh is dropdown for width selection and evt_color is dropdown for color selection and 

someDiv is div/panel which border will changed.