Solved

Option to choose between two subscreens on one screen

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Convert Select to DropDownListFor MVC 5 2 29
"Emulate" TAB key when press Enter Key 3 45
SSRS Deployment problem 5 64
How to repeat the data 4 14
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…
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…
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

809 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