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

我正在MVC中开发一个Web应用程序，其中一个页面有多个选项卡，其中每个选项卡都有自己的局部视图。在每个Partell视图中，有一些盒子每天都是一周或一个月。在这些箱子里，我为那天发生的每个事件设置了新的箱子。Internet Explorer 9-11中的动态像素大小

我的目标是事件自己的盒子应该有一个基于事件的软管的高度。这是使用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>

所有div象征1天类 “cal_day”所有观点都一样。从那以后，所有象征事件类的“div_calc_event”。

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

我在主视图的$（document）.ready（）中调用javascript方法“setBookingHeight”。也试图从每个局部视图中调用该方法，但获得相同的结果。

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

感谢您提前提供任何帮助！

来源

2017-01-05 MrKrantz

经过多次使用谷歌后，我发现document.ready并不等待局部视图，因为它像一个字符串。

所以对我来说，解决办法是设置此代码的document.ready：

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

来源

2017-01-05 09:25:32 MrKrantz

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

回答

相关问题