By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,980 Members | 937 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,980 IT Pros & Developers. It's quick & easy.

how to enable or disable div on dropdown selected index change and light box

P: 1
I am working on Lightbox that has dropdown on it. depending on ddl value div should be shown up pleae help


Expand|Select|Wrap|Line Numbers
  1.  
  2. <%@ Page Title="" Language="VB" MasterPageFile="~/MasterSite.master" AutoEventWireup="false" CodeFile="UsrLn.aspx.vb" Inherits="UsrLn" %>
  3. <%@ Register TagPrefix="custom" Namespace="CustomControls" %>
  4.  
  5. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  6. </asp:Content>
  7. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  8.  
  9.  
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  11.  
  12.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  13.  
  14.  
  15. <html> 
  16. <head> 
  17.     <%--<title>Sample Launch Modal Page</title> --%>
  18.     <script src="ClientScripts/jquery-1.4.2.js" type="text/javascript"></script> 
  19.     <link rel="STYLESHEET" type="text/css" href="modal.css"> 
  20.  
  21. <style>  
  22. /* Z-index of #mask must lower than #boxes .window */  
  23. #mask {  
  24.     position:absolute;  
  25.     z-index:9000;  
  26.     background-color:#000;  
  27.     display:none;
  28.     left:0;
  29.       top:0;
  30. }     
  31. #boxes .window {  
  32.    position:absolute;  
  33.    width:730px;  
  34.    height:600px;  
  35.    display:none;  
  36.    z-index:9999;  
  37.    padding:20px;  
  38. }  
  39. /* Customize your modal window here, you can add background image too */  
  40. #boxes #dialog {  
  41.    width:730px;   
  42.    height:600px;  
  43.    background-color: #fff;
  44.  }  
  45. #boxes #NotAMemberdialog {  
  46.    width:730px;   
  47.    height:600px;  
  48.    background-color: #fff;
  49.  } 
  50. </style>      
  51.  
  52. <script>
  53.     $(document).ready(function() {
  54.  
  55.         //select all the a tag with name equal to modal  
  56.         $('a[name=modal]').click(function(e) {
  57.             //Cancel the link behavior  
  58.             e.preventDefault();
  59.             //Get the A tag  
  60.             var id = $(this).attr('href');
  61.  
  62.             //Get the screen height and width  
  63.             var maskHeight = $(document).height();
  64.             var maskWidth = $(window).width();
  65.  
  66.             //Set height and width to mask to fill up the whole screen  
  67.             $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
  68.  
  69.             //transition effect       
  70.             $('#mask').fadeIn(1000);
  71.             $('#mask').fadeTo("slow", 0.8);
  72.  
  73.             //Get the window height and width  
  74.             var winH = $(window).height();
  75.             var winW = $(window).width();
  76.  
  77.             //Set the popup window to center  
  78.             $(id).css('top', winH / 2 - $(id).height() / 2);
  79.             $(id).css('left', winW / 2 - $(id).width() / 2);
  80.  
  81.             //transition effect  
  82.             $(id).fadeIn(2000);
  83.  
  84.         });
  85.  
  86.         //if close button is clicked  
  87.         $('.window .close').click(function(e) {
  88.             //Cancel the link behavior  
  89.             e.preventDefault();
  90.             $('#mask, .window').hide();
  91.         });
  92.  
  93.         //if mask is clicked  
  94.         $('#mask').click(function() {
  95.             $(this).hide();
  96.             $('.window').hide();
  97.         });
  98.  
  99.     }); 
  100.  
  101. </script> 
  102.  
  103. <script>
  104.     // Script to show and hide form elements based n selection of user type...
  105.     $(function() {
  106.         $('#userselector').change(function() {
  107.             $('.users').hide();
  108.             $('#' + $(this).val()).show();
  109.         });
  110.     });
  111. </script> 
  112.  
  113. <script>
  114.     $(document).ready(function() {
  115.         $('input[type="text"]').focus(function() {
  116.             if ($(this).val() == $(this).defaultValue) {
  117.                 $(this).val("");
  118.             }
  119.             if ($(this).val() != $(this).defaultValue) {
  120.                 $(this).select();
  121.             }
  122.         });
  123.         $('input[type="text"]').blur(function() {
  124.             if ($(this).val() == "") {
  125.                 $(this).val($(this)[0].defaultValue);
  126.             }
  127.         });
  128.     }); 
  129.  
  130. </script> 
  131.  
  132. </head> 
  133. <body> 
  134.  
  135. <!-- #dialog is the id of a DIV defined in the code below --> 
  136. <p><a href="#dialog" name="modal">Log In for DoD ESI Sourcing Portal</a></p> 
  137. <p><a href="#NotAMemberdialog" name="modal">Sign up for DoD ESI Sourcing Portal</a></p> 
  138. <div id="boxes"> 
  139.      <!-- #customize modal window here -->  
  140.  
  141.      <form id="signup" name="signup" method="post"> 
  142.      <div id="dialog" class="window">  
  143.     <!-- ############################################### -->         
  144.  
  145.     <a href="#" class="close"><img src="images/X.gif" width="14" height="14" alt="" border="0" style="float: right;" /></a> 
  146.     <h3>Log In for DoD ESI Sourcing Portal <span style="font-size: 0.7em; font-weight: normal;">* Required</span> </h3> 
  147.  
  148.     <hr /> 
  149.  
  150.     <table border="0" cellpadding="3" cellspacing="10" width="710"> 
  151.     <tr> 
  152.         <td width="355" valign="top"> 
  153.         <asp:UpdatePanel ID="upnlLogonPanel" runat="server">
  154.         <ContentTemplate> 
  155.         <p class="step_title"><img src="images/1.gif" width="15" height="15" alt="" border="0" /> Who Are you?*</p> 
  156.  
  157.             <asp:TextBox ID="txtEmail" runat="server" size="50" Text="Email*" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Email*';"/>
  158.             <asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="None" 
  159.             ControlToValidate="txtEmail" ValidationGroup="CheckUser" ErrorMessage="Email Address Required" CssClass="redtxt" /> 
  160.  
  161.             <asp:RegularExpressionValidator ID="RegExpEmailCheck" runat="server" ControlToValidate="txtEmail" CssClass="redtxt" 
  162.             Display="None" ValidationGroup="CheckUser"  ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
  163.  
  164.             <custom:AjaxValidator Enabled="false"
  165.             id="AjaxValidator1" CssClass="redtxt"
  166.             ControlToValidate="txtEmail"
  167.             Text="Email already taken" ValidationGroup="CheckUser" 
  168.             OnServerValidate="AjaxValidator1_ServerValidateEmail" 
  169.             Runat="server" /><BR/>
  170.  
  171.             Password*
  172.             <asp:TextBox ID="txtPassword" runat="server" TextMode="password" size="50" maxlength="15"/>
  173.             <asp:Label ID="lblMessageLabel" runat="server"  />
  174.             <br /> 
  175.             <asp:Button id="btnLogIn" runat="server" Text="Log In" AlternateText="Log In" />
  176.             &nbsp;&nbsp;
  177.  
  178.         <asp:Button id="btnNotAMember" runat="server" Text="Not A Member" AlternateText="Register to be a Member" />
  179.         </ContentTemplate>
  180.         <Triggers>
  181.             <asp:AsyncPostBackTrigger ControlID="btnLogIn" EventName="Click" />
  182.         </Triggers>
  183.         </asp:UpdatePanel>  
  184.  
  185.         </td> 
  186.         <td width="355" valign="top"> 
  187.         <p><strong>A single destination for COTS software, services, and hardware sourcing and reporting.</strong></p> 
  188.         <p>USER ROLES:<br /> 
  189.         Contracting Officer (KO) | <a href="#" title="This is Placeholder Text.">What is this?</a><br /> 
  190.         Public User | <a href="#" title="This is Placeholder Text.">What is this?</a></p>    
  191.         </td> 
  192.     </tr> 
  193.     </table>          
  194.     <!-- ############################################### -->         
  195.      </div>  
  196.  
  197.  
  198.      <div id="NotAMemberdialog" class="window">  
  199.         <!-- ############################################### -->         
  200.  
  201.         <a href="#" class="close"><img src="Images/X.gif" width="14" height="14" alt="" border="0" style="float: right;" /></a> 
  202.         <h3>Sign up for DoD ESI Sourcing Portal <span style="font-size: 0.7em; font-weight: normal;">* Required</span> </h3> 
  203.  
  204.         <hr /> 
  205.  
  206.         <table border="0" cellpadding="3" cellspacing="10" width="710"> 
  207.         <tr> 
  208.             <td width="355" valign="top"> 
  209.             <asp:UpdatePanel ID="upnlUserProfile" runat="server">
  210.             <ContentTemplate>    
  211.                 <p class="step_title"><img src="Images/1.gif" width="15" height="15" alt="" border="0" /> Who Are you?*</p> 
  212.  
  213.  
  214.           <%-- <asp:DropDownList ID="DDLParent" runat="server" onselectedindexchanged="DDLParent_SelectedIndexChanged" Autopostback="true"> </asp:DropDownList>  
  215.            --%>
  216.  
  217.             <asp:DropDownList id="ddlUserSelector" runat="server" 
  218.                   DataSourceID="srcUserRoles" DataValueField="PortalRoleID" DataTextField="Name" 
  219.                  Autopostback="true" name="user_type" class="dropdown" style="margin-left: 15px;">
  220.                   <%--  <asp:ListItem value="0" selected="True"> - Select - </asp:ListItem>
  221.                     <asp:ListItem value="Contract_Officer">Contract Officer</asp:ListItem>
  222.                     <asp:ListItem value="Public_User">Public User</asp:ListItem>--%>
  223.                 </asp:DropDownList>
  224.             <asp:ObjectDataSource ID="srcUserRoles" runat="server" SelectMethod="GetPortalRoles" 
  225.                                         TypeName="ESI.BLL.RolesBAL"></asp:ObjectDataSource>   
  226.            <%-- <asp:DropDownList id="ddlUserSelector" name="user_type" class="dropdown" runat="server" style="margin-left: 15px;">
  227.                     <asp:ListItem value="0" selected="True"> - Select - </asp:ListItem>
  228.                     <asp:ListItem value="Contract_Officer">Contract Officer</asp:ListItem>
  229.                     <asp:ListItem value="Public_User">Public User</asp:ListItem>
  230.                 </asp:DropDownList>--%>
  231.  
  232.               <%--   <select id="userselector" name="user_type" class="dropdown" style="margin-left: 15px;">
  233.                     <option value="0" selected="selected"> - Select - </option>
  234.                     <option value="Contract_Officer">Contract Officer</option>
  235.                     <option value="Public_User">Public User</option>
  236.                 </select> --%>
  237.  
  238.                 <br /> 
  239.                 <!-- ##### --> 
  240.                 <div id="Contract_Officer" style="display:none" class="users" runat="server" > 
  241.                     <p class="step_title"><img src="Images/2.gif" width="15" height="15" alt="" border="0" /> User Information</p> 
  242.                     <p>This will hold the Contract Officer Form</p> 
  243.                 </div> 
  244.                 <!-- ##### --> 
  245.                 <div id="Public_User" style="display:none" class="users" runat="server" > 
  246.                 <p class="step_title"><img src="Images/2.gif" width="15" height="15" alt="" border="0" /> User Information</p> 
  247.                 <div id="form_block" runat = "server" style="padding: 12px; background-color: #e5eaee;"> 
  248.  
  249.                 <asp:TextBox ID="txtOrganizationName" Text="Organization*" runat="server" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Organization*';"/>
  250.  
  251.                 <asp:TextBox ID="txtFirstname" runat="server" Text="First Name*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='First Name*';"/>
  252.                 <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" Display="None" 
  253.                       ControlToValidate="txtFirstname" ValidationGroup="CheckUser" ErrorMessage="First Name Required" CssClass="redtxt" />
  254.  
  255.                 <asp:TextBox ID="txtLastname" runat="server" Text="Last Name*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Last Name*';"/>
  256.                 <asp:RequiredFieldValidator ID="rfvLastname" runat="server" Display="None" 
  257.                 ControlToValidate="txtLastname" ValidationGroup="CheckUser" ErrorMessage="Last Name" CssClass="redtxt" />  
  258.  
  259.                 <asp:TextBox ID="txtUserTitle" runat="server" Text="Title*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Title*';"/>
  260.  
  261.                 <asp:TextBox ID="txtCity" runat="server" Text="City*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='City*';"/>
  262.  
  263.                 <asp:dropdownlist ID="txtState" runat="server" class="dropdown">
  264.                     <asp:ListItem selected="True">State*</asp:ListItem>
  265.                     <asp:ListItem  value="AL">Alabama</asp:ListItem> 
  266.                     <asp:ListItem  value="AK">Alaska</asp:ListItem> 
  267.                     <asp:ListItem  value="AZ">Arizona</asp:ListItem> 
  268.                     <asp:ListItem  value="AR">Arkansas</asp:ListItem> 
  269.                     <asp:ListItem  value="CA">California</asp:ListItem> 
  270.                     <asp:ListItem  value="CO">Colorado</asp:ListItem> 
  271.                     <asp:ListItem  value="CT">Connecticut</asp:ListItem> 
  272.                     <asp:ListItem  value="DE">Delaware</asp:ListItem> 
  273.                     <asp:ListItem  value="DC">District of Columbia</asp:ListItem> 
  274.                     <asp:ListItem  value="FL">Florida</asp:ListItem> 
  275.                     <asp:ListItem  value="GA">Georgia</asp:ListItem> 
  276.                     <asp:ListItem  value="HI">Hawaii</asp:ListItem> 
  277.                     <asp:ListItem  value="ID">Idaho</asp:ListItem> 
  278.                     <asp:ListItem  value="IL">Illinois</asp:ListItem> 
  279.                     <asp:ListItem  value="IN">Indiana</asp:ListItem> 
  280.                     <asp:ListItem  value="IA">Iowa</asp:ListItem> 
  281.                     <asp:ListItem  value="KS">Kansas</asp:ListItem> 
  282.                     <asp:ListItem  value="KY">Kentucky</asp:ListItem> 
  283.                     <asp:ListItem  value="LA">Louisiana</asp:ListItem> 
  284.                     <asp:ListItem  value="ME">Maine</asp:ListItem> 
  285.                     <asp:ListItem  value="MD">Maryland</asp:ListItem> 
  286.                     <asp:ListItem  value="MA">Massachusetts</asp:ListItem> 
  287.                     <asp:ListItem  value="MI">Michigan</asp:ListItem> 
  288.                     <asp:ListItem  value="MN">Minnesota</asp:ListItem> 
  289.                     <asp:ListItem  value="MS">Mississippi</asp:ListItem> 
  290.                     <asp:ListItem  value="MO">Missouri</asp:ListItem> 
  291.                     <asp:ListItem  value="MT">Montana</asp:ListItem> 
  292.                     <asp:ListItem  value="NE">Nebraska</asp:ListItem> 
  293.                     <asp:ListItem  value="NV">Nevada</asp:ListItem> 
  294.                     <asp:ListItem  value="NH">New Hampshire</asp:ListItem> 
  295.                     <asp:ListItem  value="NJ">New Jersey</asp:ListItem> 
  296.                     <asp:ListItem  value="NM">New Mexico</asp:ListItem> 
  297.                     <asp:ListItem  value="NY">New York</asp:ListItem> 
  298.                     <asp:ListItem  value="NC">North Carolina</asp:ListItem> 
  299.                     <asp:ListItem  value="ND">North Dakota</asp:ListItem> 
  300.                     <asp:ListItem  value="OH">Ohio</asp:ListItem> 
  301.                     <asp:ListItem  value="OK">Oklahoma</asp:ListItem> 
  302.                     <asp:ListItem  value="OR">Oregon</asp:ListItem> 
  303.                     <asp:ListItem  value="PA">Pennsylvania</asp:ListItem> 
  304.                     <asp:ListItem  value="PR">Puerto Rico</asp:ListItem> 
  305.                     <asp:ListItem  value="RI">Rhode Island</asp:ListItem> 
  306.                     <asp:ListItem  value="SC">South Carolina</asp:ListItem> 
  307.                     <asp:ListItem  value="SD">South Dakota</asp:ListItem> 
  308.                     <asp:ListItem  value="TN">Tennessee</asp:ListItem> 
  309.                     <asp:ListItem  value="TX">Texas</asp:ListItem> 
  310.                     <asp:ListItem  value="UT">Utah</asp:ListItem> 
  311.                     <asp:ListItem  value="VT">Vermont</asp:ListItem> 
  312.                     <asp:ListItem  value="VI">Virgin Islands</asp:ListItem> 
  313.                     <asp:ListItem  value="VA">Virginia</asp:ListItem> 
  314.                     <asp:ListItem  value="WA">Washington</asp:ListItem> 
  315.                     <asp:ListItem  value="WV">West Virginia</asp:ListItem> 
  316.                     <asp:ListItem  value="WI">Wisconsin</asp:ListItem> 
  317.                     <asp:ListItem  value="WY">Wyoming</asp:ListItem> 
  318.  
  319.                 </asp:dropdownlist>
  320.  
  321.                 <asp:TextBox ID="txtZipCode" runat="server" Text="Zip*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Zip*';"/>
  322.  
  323.                 <asp:TextBox ID="txtPhone" runat="server" Text="Phone*" size="50" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Phone*';"/>
  324.  
  325.                 <asp:TextBox ID="TextBox1" runat="server" size="50" Text="Email*" maxlength="100" onfocus="this.value=''" onblur="if(this.value=='')this.value='Email*';"/>
  326.                     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="None" 
  327.                     ControlToValidate="txtEmail" ValidationGroup="CheckUser" ErrorMessage="Email Address Required" CssClass="redtxt" /> 
  328.  
  329.                     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail" CssClass="redtxt" 
  330.                     Display="None" ValidationGroup="CheckUser"  ErrorMessage="Invalid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
  331.  
  332.                     <custom:AjaxValidator Enabled="false"
  333.                     id="AjaxValidator2" CssClass="redtxt"
  334.                     ControlToValidate="txtEmail"
  335.                     Text="Email already taken" ValidationGroup="CheckUser" 
  336.                     OnServerValidate="AjaxValidator1_ServerValidateEmail" 
  337.                     Runat="server" /><BR/>
  338.  
  339.                 Password*
  340.                 <asp:TextBox ID="TextBox2" runat="server" TextMode="password" size="50" maxlength="15"/>
  341.                 Confirm Password*
  342.                 <asp:TextBox ID="txtReenterPassword" TextMode="password" runat="server" size="50" maxlength="15"/>
  343.                 <asp:CompareValidator id="cvPassword" ValidationGroup="CheckUser" Display="None" ControlToValidate="txtPassword" 
  344.                 ControlToCompare="txtReenterPassword" CssClass="redtxt"  EnableClientScript="false" Text="Password Validation Failed!" 
  345.                 runat="server" />
  346.  
  347.             </div> 
  348.                 <br /> 
  349.                 <asp:Button id="btnSubmit" runat="server" ValidationGroup="CheckUser" Text="Continue" AlternateText="Submit" />
  350.                 </div> 
  351.  
  352.             </ContentTemplate>
  353.            <Triggers>
  354.                 <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
  355.             </Triggers>
  356.             </asp:UpdatePanel>   
  357.  
  358.             </td> 
  359.             <td width="355" valign="top"> 
  360.                 <p><strong>A single destination for COTS software, services, and hardware sourcing and reporting.</strong></p> 
  361.                 <p>USER ROLES:<br /> 
  362.                 Contracting Officer (KO) | <a href="#" title="This is Placeholder Text.">What is this?</a><br /> 
  363.                 Public User | <a href="#" title="This is Placeholder Text.">What is this?</a></p>    
  364.             </td> 
  365.         </tr> 
  366.         </table>          
  367.         <!-- ############################################### -->         
  368.      </div>     
  369.      </form> 
  370.      <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->    
  371.      <div id="mask"></div>  
  372. </div> 
  373.  
  374. </body> 
  375. </html> 
  376.  
  377.  
  378.  
  379.  
  380.  
  381.  
  382.  
  383.  
  384.  
  385.  
  386. </asp:Content>
  387.  
  388.  
  389.  
  390.  
  391.  
  392.  
Oct 12 '10 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.