Solved

Option to choose between two subscreens on one screen

Posted on 2013-01-31
1
129 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
This is a high-level webinar that covers the history of enterprise open source database use. It addresses both the advantages companies see in using open source database technologies, as well as the fears and reservations they might have. In this…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

691 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