Solved

Option to choose between two subscreens on one screen

Posted on 2013-01-31
1
125 Views
Last Modified: 2013-02-28
Hello,

I am looking into developing a website page where I have a choice of two radio buttons.  If I choose one radio button, I get to do one thing and one side of the screen is visibly apparent while the other optioned screen is greyed out but semi visible.  How could I do this using CSS and HTML with asp.net?  Thanks!
0
Comment
Question by:VBBRett
1 Comment
 
LVL 41

Accepted Solution

by:
guru_sami earned 500 total points
ID: 38841920
Here's a sample...not too elegant but should help to begin with...
Initially both screens are greyed out...as none of the options are selected.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#rblOptions input").click(function () {
                //This add/remove can be refined...
                if ($(this).val() == "1") {
                    //you can do whatever you want when option1 is selected
                    $("#divScreen1").addClass("selected");
                    $("#divScreen1").removeClass("greyedout");
                    $("#divScreen2").addClass("greyedout");
                    $("#divScreen2").removeClass("selected");
                }
                else {
                    $("#divScreen1").removeClass("selected");
                    $("#divScreen1").addClass("greyedout");
                    $("#divScreen2").removeClass("greyedout");
                    $("#divScreen2").addClass("selected");
                }
            });
        });
    </script>
    <style type="text/css">
        .selected {
            background-color:yellow;
        }
        .greyedout {
            background-color:rgba(207, 196, 196,0.5);
           opacity:0.3;
        }

    </style>
<asp:RadioButtonList ID="rblOptions" runat="server" RepeatLayout="Flow">
            <asp:ListItem Text="Option 1" Value="1"/>
            <asp:ListItem Text="Option 2" Value="2"/>
        </asp:RadioButtonList>
        <div id="divScreen1" class="greyedout" style="height:20px;width:100px;">
            Screen 1
        </div>
        <div id="divScreen2" class="greyedout" style="height:20px;width:100px;">
            Screen 2
        </div>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to picture file 3 67
what technologies offer Authentication over Web Services? 4 103
Cannot upload files above 1mb IIS7 11 39
SQL Exceptions 3 36
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

919 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now