CODEWITHSUNDEEP
jqueryhtmlcsscss-float
Josh
Josh

Reputation: 16567

Make multiple divs float over one another

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?

Upvotes: 0

Views: 1431

Answers (3)

Josh
Josh

Reputation: 16567

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);
        });
    });

Upvotes: 0

jeroen
jeroen

Reputation: 91792

If you want to position things like that, you need something like:

#recurring-control-wrapper {
  position: relative;
}
.recurring-control {
  position: absolute
  top: 0;
  left: 0;
}

Upvotes: 3

Robin W.
Robin W.

Reputation: 231

Position the recurring control divs absolute and wrap them all in a div positioned relative.

CSS: 

.recurring-control{position:absolute; top:0: left:0}
.recurring-wrappar{position:relative;}

HTML:

<tr>
<div class="recurring-wrappper">
--wrapppers--
</div>
<tr>

Not sure if that's what you were asking about...?

Upvotes: 1

Related Questions