Internet Explorerの動的ピクセルサイズ9-11

Question

MVCには、ページに複数のタブがあり、各タブにはそれぞれ独自の部分表示があります。各Partellビューには、それぞれ1週間または1ヶ月の1日のボックスがあります。これらのボックスには、その日に行われるイベントごとに新しいボックスがあります。

私の目的は、イベントのホースに基づいてイベントの独自のボックスの高さを設定することです。これはjqueryを使って行われます。ここでは1時間ごとに高さのピクセル数が必要です。

Chromeでは、これは時計仕掛けのように機能しますが、最初からアクティブではないタブではこの計算が機能しません。言い換えれば、3つのタブがあり、それぞれのタブには、サブミットされたモデルの要素数に応じてボックスの動的行数を含む部分ビューがあるとします。タブ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> 

1日クラス "cal_day" を象徴するすべてのdiv、すべてのビューで同じです。それ以来、イベントクラス "cal_event"を象徴するすべてのdiv。

さまざまなビューで異なるクラス名のdivを使用しないようにしたいと考えていますが、部屋、教師、クラスなどのさまざまな種類のデータがリストされます。

私はメインビューの$（document）.ready（）でjavascriptメソッド "setBookingHeight"を呼び出します。各部分ビューからメソッドを呼び出そうとしましたが、同じ結果が得られました。

残念ながら、Google Chromeで正しく機能するにもかかわらず、これは私にとっては問題であるという理由でInternet Explorerで動作する必要があります。

事前にお問い合わせいただきありがとうございます。

Answer 1

Googleをさらに使用した後、iveはそのdocument.readyが文字列のような部分的なビューを待たないことを発見しました。

だから、私のためのソリューションは、document.readyにこのコードを設定することです：

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