Tips for changing CSS properties based on certain conditions

Question

Tips for changing CSS properties based on certain conditions

Here is a RadioButton list that I'm working with:

<asp:Panel ID="pnl_select_sign" runat="server" Visible="false" Style="text-align: right">
        <asp:RadioButtonList ID="rb_select_sign" runat="server" AutoPostBack="true" RepeatDirection="Horizontal"
            OnSelectedIndexChanged="rb_select_sign_SelectedIndexChanged" CausesValidation="false"
            AppendDataBoundItems="true">
            <asp:ListItem Selected="True" Value="0">Normal</asp:ListItem>
            <asp:ListItem Value="1">Electronic</asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>

I am looking to update the overflow-y CSS property.

Change overflow-y :auto; to overflow-y :hidden;

This change should be applied to the div with id = wrap_form

When selecting the ListItem with Value = 1;

Output from FireBug:

<td>
<input id="ctl00_ContentPlaceHolder1_rb_select_sign_0" type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$rb_select_sign$0\',\'\')', 0)" value="0" name="ctl00$ContentPlaceHolder1$rb_select_sign">
<label for="ctl00_ContentPlaceHolder1_rb_select_sign_0">Normal</label>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_rb_select_sign_1" type="radio" checked="checked" value="1" name="ctl00$ContentPlaceHolder1$rb_select_sign">
<label for="ctl00_ContentPlaceHolder1_rb_select_sign_1">Electronic</label>
</td>

javascript jquery asp.net css radiobuttonlist

Answer 1

Answer №1

Remember that by using the recommended JavaScript solutions, the CSS will revert to its original state after a page postback. Since you are already utilizing a postback for your RadioButtonList, it might be more effective to adjust the style server-side instead.

Update

Include this snippet in the method that handles changes in item selection within the list:

protected void rb_select_sign_SelectedIndexChanged(object sender, EventArgs e)
{
    if (rb_select_sign.SelectedValue == "1")
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "styleChangeScript", "<script type='text/javascript'>var divToChange = document.getElementById('wrap_form'); if(divToChange) { divToChange.style.overflowY = 'hidden' }</script>", false);
    }
    // The remaining portion of the original code for this method should be placed here
    //...
}

To ensure functionality even when triggering other buttons or events causing postbacks, consider placing the same set of code lines within the Page_Load event of your page (or create a separate method and invoke it from both locations).

Answer 2

Remember that by using the recommended JavaScript solutions, the CSS will revert to its original state after a page postback. Since you are already utilizing a postback for your RadioButtonList, it might be more effective to adjust the style server-side instead.

Update

Include this snippet in the method that handles changes in item selection within the list:

protected void rb_select_sign_SelectedIndexChanged(object sender, EventArgs e)
{
    if (rb_select_sign.SelectedValue == "1")
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "styleChangeScript", "<script type='text/javascript'>var divToChange = document.getElementById('wrap_form'); if(divToChange) { divToChange.style.overflowY = 'hidden' }</script>", false);
    }
    // The remaining portion of the original code for this method should be placed here
    //...
}

To ensure functionality even when triggering other buttons or events causing postbacks, consider placing the same set of code lines within the Page_Load event of your page (or create a separate method and invoke it from both locations).

Answer 3

Answer №2

Here is an example of how you can achieve this:

$('input[id^="ctl00_"]').click(function() {
 if ($(this).val() == 1) {
  $('#wrap_form').css('overflow-y', 'hidden');
 }
})

You can also view the code on jsfiddle

Answer 4

Here is an example of how you can achieve this:

$('input[id^="ctl00_"]').click(function() {
 if ($(this).val() == 1) {
  $('#wrap_form').css('overflow-y', 'hidden');
 }
})

You can also view the code on jsfiddle

Tips for changing CSS properties based on certain conditions

Answer №1

Answer №2

Similar questions

Utilizing Angularjs for dynamic data binding in HTML attributes and style declarations

Creating customized headers using $.ajax for JSONP or JSON requests

Merging sort and uniq functionalities to create a single function in JavaScript

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

In search of a dropline menu with a comparable style

Prevent regex from matching leading and trailing white spaces when validating email addresses with JavaScript

Transitioning template engine from Razor (asp.net) to Angular JS for improved functionality

Acquire the Information from a Textarea That Has Been Edited by the User

Adjust the font color of the X and Y axis

Conceal elements when they are too small without the use of JavaScript

The Nodejs express static directory is failing to serve certain files

Ways to conceal a column within columnSelection

Dividing blocks of text into individual sentences

Having trouble with JSON/jQuery syntax?

Is there a way to close the menu in react by clicking anywhere on the

Is it possible to use D3 for DOM manipulation instead of jQuery?

Tips for updating a section of a webpage without the need to redirect to a different page: use technologies such as Express, Nodejs, and M

unable to properly evaluate the string results from the AJAX request

Managing Arduino using a local webpage powered by node.js

What exactly is the window object model all about?