fancybox가 10 진수 값의 너비를 처리하지 않습니다.

Question

fancybox가 내용의 크기를 계산할 때 소수점/부동 소수점 숫자를 처리하지 않습니다.

예를 들어 우리는 fancybox는 300px + 217px = 517px에 내용의 width 반올림 것, 각각 2 300px의 <div> 및 217.367px이 있다면. 즉, 두 번째 div은 적합하지 않으므로 다음 줄로 떨어집니다.

이것은 jQuery width() 메소드의 사용으로 인한 것 같습니다.

관련 코드

HTML :

<a class="fancybox" href="#inline">open inline</a> 

<div id="inline" class="cf"> 
    <div id="content"> 
     <h3>Lorem Ipsum</h3> 
     <p>More text content etc</p> 
    </div> 
    <div id="red">Other floating content</div> 
</div> 

CSS :

#inline { 
    position: relative; 
    white-space: nowrap; 
} 
#content { 
    width: 15.526em; /* 217.367px */ 
    height: 150px; 
    display: block; 
    float: left; 
} 
#red { 
    height: 150px; 
    width: 300px; 
    display: block; 
    float: left; 
} 

jQuery를 :

바이올린에서

$(".fancybox").fancybox({ 
    padding: 0 
}); 

JSFIDDLE

공지 사항는 #inline 컨테이너는 항상 데모 용으로 만 볼 수 있습니다. 또한 꽤 일반적인 시나리오는 그래서이 함께 CSS를에 width: 217.367px을 설정하는 것이 가능하지만 (갈 방법이되지 않을 수 있습니다 px의 고정 width로 변화하고 ems에서 설정 한 컨테이너 중 하나의 width, 알 같은 결과)

수정 사항이 있습니까?

fancybox 컨테이너에 추가 픽셀을 추가하는 것이 가능하지만 일반적으로 필요한 경우가 아니라 필요할 때만 추가하는 것이 좋습니다.

Answer 1

도 parseFloat()기능 내에서 항상 요소의 width의 둥근 값을 반환합니다 jQuery를 .width() 방법을 사용하기 때문에 :

parseFloat($("#element").width()); 

이 jsfiddle

보기 ... 우리는 필요 팬시 박스 내용 내의 각 요소 width을 계산하면 증분 전체를 얻을 수 있습니다. fancybox 컨테이너의 가 248.417px 그래서 우리는 여전히 필요로하는 문자열을 반환합니다 것을

var compWidth = window.getComputedStyle(element).getPropertyValue("width"); 

주의 사항 :

이 작업을 수행하기 위해, 우리는 같은 각 요소의 계산width를 얻기 위해 getPropertyValue("width") 방법과 함께 getComputedStyle()을 사용할 수 있습니다 올바른 계산을 위해 부동 값을 구문 분석합니다. 총 가 width 우리가 fancybox 컨테이너에 추가 픽셀을 추가하거나하지할지 여부를 결정하는 나머지을 가지고을 계산하면 우리는 비교할 수 있습니다, 그리고

parseFloat(compWidth.split("px")[0]); 

: 우리는 뭔가를 할 수 있습니다.

if (totalWidth % 1 != 0) { 
    totalWidth++; // or Math.ceil(totalWidth); 
} 

afterLoad 콜백 내 계산에 전체 코드를 참조하십시오 : 우리는 같은 (참조 this answer 확인)를 모듈 작업을 사용하여이를 달성 할 수

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     padding: 0, 
     afterLoad: function() { 
      // get the computed width of elements inside fancybox 
      var totalWidth = 0; 
      $("#inline").find("div").each(function (i) { 
       // increment total width with each element's width 
       totalWidth += parseFloat(
       window.getComputedStyle(this) 
         .getPropertyValue("width") 
         .split("px")[0]); 
      }); 
      // compare if the result has a remainder 
      if (totalWidth % 1 != 0) { 
       // increase total width by 1px 
       totalWidth++; // or Math.ceil(totalWidth); 
       // set the new fancybox width 
       $.extend(this, { 
        fitToView: false, // cause will set a fixed width 
        autoWidth: false, 
        width: totalWidth 
       }); 
      } 
     } 
    }); 
}); // ready 

참조 JSFIDDLE

참고 :이 문제를 해결할 수있는 해결 방법입니다. 일부 특정 시나리오에 유용합니다. getComputedStyle()도 IE9 +

에서만 지원됩니다.