Internet Explorer 9-11中的动态像素大小

Question

我正在用MVC开发一个web应用程序，其中一个页面有多个选项卡，每个选项卡都有自己的局部视图。在每个Partell视图中都有盒子，每个盒子都是一周或一个月的一天。在这些框中，我为当天发生的每个事件都有新的框。

我的目标是活动的盒子应该有一个基于活动的软管的高度。这是使用jquery完成的，我预计每小时高度的像素数。

在Chrome中，这就像时钟一样工作，但Internet Explorer不会在从一开始就处于非活动状态的选项卡中进行此计算。换句话说，假设我有三个选项卡，每个选项卡都有一个局部视图，根据提交的模型中元素的数量，该视图包含动态行数的框。在选项卡1中，将干净地调整事件的高度，但在选项卡2和3中，可能不是它们应该获得的高度。

参见下面我的代码摘录：

.js中的方法：

function setBookingHeight() {
var startOfDay = new Date(2000, 1, 1, 8, 0, 0, 0);
var startOfEvent = new Date(2000, 1, 1, 8, 0, 0, 0);
var endOfEvent = new Date(2000, 1, 1, 8, 0, 0, 0);

$(".cal_event").each(function (index) {
    var pixelsPerHour = $(this).closest(".cal_day").height() / 9.0;

    //position event
    var startDateTime = $(this).find(".cal_event_start").val();
    var timeStartArray = startDateTime.split(':');
    var startHours = timeStartArray[0];
    var startMinutes = timeStartArray[1];

    startOfEvent.setHours(startHours, startMinutes, 0, 0);
    var diff = (startOfEvent - startOfDay) / (3600 * 1000);
    var val1 = pixelsPerHour * diff;
    $(this).css({ top: val1 });

    //set height of event
    var endDateTime = $(this).find(".cal_event_end").val();
    timeEndArray = endDateTime.split(':');
    var endHours = timeEndArray[0];
    var endMinutes = timeEndArray[1];

    endOfEvent.setHours(endHours, endMinutes, 0, 0);
    var length = (endOfEvent - startOfEvent) / (3600 * 1000);
    var val2 = pixelsPerHour * length;
    $(this).css({ height: val2 + 'px' });
})
}

视图中的代码：

<div class="width20 overflowYAuto text-center" style="padding: 5px; height: 200px;">
        <div style="height:100%;">
             <div class="cal_day" style="border: solid 1px black; height:90%; background-color: rgba(255,0,0,0.2)">
                    <p class="redText"><small>@Model.HolidayFriday</small></p>
                    @foreach (var booking in Model.WeekEvents.ScheduleFriday.Where(e => e.SchoolClassId == @item.DetailId).OrderBy(e => e.Events.Min(ev => ev.StartDate)).ToList())
                    {
                        if (@booking.Lecture)
                        {
                            <div class="innerbox blueBox hidden-sm hidden-xs cal_event_allteachers cal_event" onclick="showLectureSessionDetails('@booking.Id')" title="Visa mer information">
                                @Html.HiddenFor(b => booking.StartTimeText, new { @class = "cal_event_start_allteachers cal_event_start" })
                                @Html.HiddenFor(b => booking.EndTimeText, new { @class = "cal_event_end_allteachers cal_event_end" })

                                <div class="floatLeft">
                                    <p class="paragraphSchadule">
                                        <b>@booking.DisplayRow1</b><br />
                                        <b>@booking.DisplayRow2</b><br />
                                        <b>@booking.DisplayRow3</b><br />
                                        <b>@booking.DisplayRow4</b><br />
                                        <b>@booking.DisplayRow5</b><br />
                                    </p>
                                </div>
                            </div>

                            <div class="innerbox blueBox text-center visible-sm visible-xs" onclick="showLectureSessionDetails('@booking.Id')" title="Visa mer information">
                                <p class="paragraphSchadule">
                                    <b>Info</b>
                                </p>
                            </div>
                        }
                        else if (@booking.FieldTrip)
                        {
                            <div class="innerbox yellowBox hidden-sm hidden-xs cal_event_allteachers cal_event" onclick="showFieldTripSessionDetails('@booking.Id')" title="Visa mer information">
                                @Html.HiddenFor(b => booking.StartTimeText, new { @class = "cal_event_start_allteachers cal_event_start" })
                                @Html.HiddenFor(b => booking.EndTimeText, new { @class = "cal_event_end_allteachers cal_event_end" })

                                <div class="floatLeft">
                                    <p class="paragraphSchadule">
                                        <b>@booking.DisplayRow1</b><br />
                                        <b>@booking.DisplayRow2</b><br />
                                        <b>@booking.DisplayRow3</b><br />
                                        <b>@booking.DisplayRow4</b><br />
                                    </p>
                                </div>
                            </div>

                            <div class="innerbox yellowBox text-center visible-sm visible-xs" onclick="showFieldTripSessionDetails('@booking.Id')" title="Visa mer information">
                                <p class="paragraphSchadule">
                                    <b>Info</b>
                                </p>
                            </div>
                        }
                        else
                        {
                            <div class="innerbox greenBox hidden-sm hidden-xs cal_event_allteachers cal_event" onclick="showBookingSessionDetails('@booking.Id')" title="Visa mer information">
                                @Html.HiddenFor(b => booking.StartTimeText, new { @class = "cal_event_start_allteachers cal_event_start" })
                                @Html.HiddenFor(b => booking.EndTimeText, new { @class = "cal_event_end_allteachers cal_event_end" })

                                <div class="floatLeft">
                                    <p class="paragraphSchadule">
                                        <b>@booking.DisplayRow1</b><br />
                                        <b>@booking.DisplayRow2</b><br />
                                        <b>@booking.DisplayRow3</b><br />
                                    </p>
                                </div>
                            </div>

                            <div class="innerbox greenBox text-center visible-sm visible-xs" onclick="showBookingSessionDetails('@booking.Id')" title="Visa mer information">
                                <p class="paragraphSchadule">
                                    <b>Info</b>
                                </p>
                            </div>
                        }
                    }
                </div>
        </div>
</div>

所有表示一天类"cal_day“的div，在所有视图中都是相同的。从那时起，所有表示事件的div类都是"cal_event“。

我希望避免在不同的视图中有不同的类名div，这样它们看起来是一样的，但列出了各种类型的数据，如教室、教师、班级等等。

我在主视图的$(document).ready()中调用javascript方法"setBookingHeight“。我也尝试过从每个局部视图调用该方法，但都得到了相同的结果。

不幸的是，它必须在Internet Explorer中工作，这就是为什么这对我来说是一个问题，尽管它可以在Google Chrome中正常工作。

提前感谢大家的帮助！

Answer 1

在更多地使用谷歌之后，我发现document.ready不会等待局部视图，因为它像一个字符串。

因此，我的解决方案是在document.ready中设置以下代码：

$("a[href='#id']").on('shown.bs.tab', function (e) {
    // your code here... 
    // code in my project setBookingHeight();
});