Solved

Option to choose between two subscreens on one screen

Posted on 2013-01-31
1
124 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

758 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

22 Experts available now in Live!

Get 1:1 Help Now