Dynamic pixel size in Internet Explorer 9-11

Question

I am developing a web application in MVC where a page has multiple tabs where each tab has its own partial view. In each Partell view there are boxes which are each a day for a week or a month. In these boxes, I have new boxes for each event that takes place on that day.

My aim is that the event's own box should have a height based on the hose at the event. This is done using jquery where I expect every hour the number of pixels in height.

In Chrome, this works like clockwork, but Internet Explorer does not work this calculation in the tabs that are not active from the start. In other words, let's say I have three tabs where each tab has a partial view that includes dynamic number of rows of boxes depending on the number of elements in the model submitted. In Tab 1 will adjust the height of the events cleanly but in Tab 2 and 3, may not be the events that height they should get.

See excerpt from my code below:

Method in .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' });
})
}

Code in the view:

<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>

All divs that symbolizes one day class "cal_day", it is the same in all views. Since then, all divs that symbolize events class "cal_event".

My hope is to avoid having different class names divs in the different views then they will look the same, but lists the various types of data such as rooms, teachers, classes and more.

I call javascript method "setBookingHeight" in the $(document).ready() in the main view. Have also tried to call the method from each partial view but it gets the same results.

Unfortunately, it must work in Internet Explorer thats why this is a problem for me even though it will function correctly in Google Chrome.

Thanks for any help in advance!

Answer 1

After more use of google, ive found that document.ready doesnt wait on partial view because its like a string.

So the solution for me is to set this code in document.ready:

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