Internet Explorer의 동적 픽셀 크기 9-11

MVC에서 페이지마다 여러 개의 탭이 있고 각 탭마다 부분보기가있는 웹 응용 프로그램을 개발 중입니다. 각 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>

일일 클래스 "cal_day"을 상징하는 모든 div의, 그것은 모든 견해에서 동일합니다. 그 이후로, 이벤트 클래스 "cal_event"를 상징하는 모든 div가 있습니다.

희망 사항은 서로 다른보기에서 다른 클래스 이름 div를 사용하지 않아도 동일하게 보이지만 방, 교사, 수업 등과 같은 다양한 유형의 데이터를 나열하는 것입니다.

기본보기의 $ (document) .ready()에서 javascript 메소드 "setBookingHeight"를 호출합니다. 각 부분보기에서 메서드를 호출하려고 시도했지만 동일한 결과가 발생합니다.

불행히도 Google 크롬에서 제대로 작동하더라도 Internet Explorer에서 작동해야합니다.

미리 도움 주셔서 감사합니다.

출처

2017-01-05 MrKrantz

Google을 더 사용하면 ive는 그 document.ready가 문자열과 비슷하기 때문에 부분보기를 기다리지 않는다는 것을 알았습니다.

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

그래서 나를 위해 솔루션은 document.ready이 코드를 설정하는 것입니다

출처

2017-01-05 09:25:32 MrKrantz

Internet Explorer의 동적 픽셀 크기 9-11

답변

관련 문제