Question

I have this control I am working on for scheduling. I have a list of radio buttons and then multiple panes of content. depending on the content, I want to fade in the correct control. For some reason though, putting a float on the divs and setting the z-index is not making them float over one another. They appear and disappear correctly, but I want them to fade in and out on top of one another, not appear and then slide into place like they are doing now.

my view

<table id="recurring-table">
<tr>
<td id="recurring-selector">
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Daily, new { id = "daily-radio", @class = "recurring-selector" }) %> <span>Daily</span></div>
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Weekly, new { id = "weekly-radio", @class = "recurring-selector" })%> <span>Weekly</span></div>
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Monthly, new { id = "monthly-radio", @class = "recurring-selector" })%> <span>Monthly</span></div>
<div><%: Html.RadioButtonFor(x => x.RecurringType, RecurringType.Yearly, new { id = "yearly-radio", @class = "recurring-selector" })%> <span>Yearly</span></div>
</td>
<td id="recurring-control-wrapper">
<div id="daily-control" class="recurring-control" style="display:none;">
    <div><%: Html.RadioButtonFor(x => x.DailySelection, DailySelection.Span, new { id = "daily-span" })%> <span>Every</span>&nbsp; <%: Html.TextBoxFor(x => x.DailyRecurring.Span, new { @class = "small" })%>&nbsp; <span>day(s)</span></div>
    <div><%: Html.RadioButtonFor(x => x.DailySelection, DailySelection.EveryWeekday, new { id = "daily-every-weekday" })%> <span>Every Weekday</span></div>
</div>

<div id="weekly-control" class="recurring-control" style="display:none;">
    <div><span>Recur every</span> &nbsp; <%: Html.TextBoxFor(x => x.WeeklyRecurring.Span, new { @class = "small" })%>&nbsp; <span>week(s) on:</span></div>
    <div><table id="week-day-table">
    <tr>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Sunday) %> <span>Sun</span></td>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Monday) %> <span>Mon</span></td>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Tuesday) %> <span>Tue</span></td>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Wednesday) %> <span>Wed</span></td>
    </tr>
    <tr>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Thursday) %> <span>Thur</span></td>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Friday) %> <span>Fri</span></td>
    <td><%: Html.CheckBoxFor(x => x.WeeklyRecurring.Saturday) %> <span>Sat</span></td>
    <td>&nbsp;</td>
    </tr>
    </table></div>
</div>

<div id="monthly-control" class="recurring-control" style="display:none;">
Monthly
</div>

<div id="yearly-control" class="recurring-control" style="display:none;">
Yearly
</div>

</td>
</tr>
<tr>

</tr>
</table>

<script type="text/javascript">
    $(function () {
        $('#daily-radio').click(function () {
            $('.recurring-control').fadeOut(300, function () {
                clearControls();
                $('#daily-control').fadeIn(300);
            });
        });

        $('#weekly-radio').click(function () {
            $('.recurring-control').fadeOut(300, function () {
                clearControls();
                $('#weekly-control').fadeIn(300);
            });
        });

        $('#monthly-radio').click(function () {
            $('.recurring-control').fadeOut(300, function () {
                clearControls();
                $('#monthly-control').fadeIn(300);
            });
        });

        $('#yearly-radio').click(function () {
            $('.recurring-control').fadeOut(300, function () {
                clearControls();
                $('#yearly-control').fadeIn(300);
            });
        });

        function clearControls() {
            $('.recurring-control input:radio').attr('checked', false);
            $('.recurring-control input:text').val('');
        }
    });
</script>

and here is my CSS

#recurring-table { width:100% }
#recurring-table span { font-weight: bold; text-transform: capitalize; margin-bottom: 6px; color: #5a5a5a; /*font-size: 1.2em;*/ }
#recurring-table div { padding: 3px 0 3px 0; }
#recurring-selector { width: 100px; }
.recurring-control { /*float: left; position: relative; top: 0; left: 0;*/}
#daily-control { z-index:10; }
#weekly-control { z-index:11; }
#monthly-control { z-index:12; }
#yearly-control { z-index:13; }

I want them to float relatively within the table over one another. Any ideas how to get them to float on top of eachother so as they fade in and out they don’t move into position?

Answer 1

I found a solution. I changed how I was showing/hiding with my jQuery. It ended up not really being an issue with css. I used set timeout set to the length of the fade out and it works smoothly now.

$('#daily-radio').click(function () {
        $('.recurring-control').fadeOut(300, function () {
            clearControls();

            setTimeout(function () {
                $('#daily-control').fadeIn(300) 
            }, 300);
        });
    });