디브 풀스크린은 어떻게 만드나요?
Flot을 사용하여 데이터의 일부를 그래프로 표시하고 있는데 버튼을 클릭하면 이 그래프가 전체 화면(모니터의 공간을 모두 차지함)으로 표시되면 좋을 것 같습니다.지금 제가.div는 다음과 같습니다.
<div id="placeholder" style="width:800px;height:600px"></div>
물론 스타일 속성은 테스트용으로만 사용됩니다.제가 이거를 옮겨보겠습니다.CSS실제 설계를 한 후에이 디브를 전체 화면으로 만들고 모든 이벤트 처리를 여전히 보존할 수 있는 방법이 있습니까?
HTML5 Fullscreen API를 사용하시면 됩니다. (제가 생각하는 가장 적합한 방법입니다.)
전체 화면은 사용자 이벤트(클릭, 키 누름)를 통해 트리거해야 합니다. 그렇지 않으면 작동하지 않습니다.
클릭 시 디브 전체 화면을 보여주는 버튼입니다.그리고 전체 화면 모드에서는 버튼 클릭으로 전체 화면 모드가 종료됩니다.
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
$('#container').get(0).requestFullscreen();
}
});#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
<a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
</p>
I will be fullscreen, yay!
</div>Chrome용 Fullscreen API는 안전하지 않은 페이지에서는 작동하지 않습니다.자세한 내용은 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins 을 참조하십시오.
또 하나 주목할 점은 :fullscreen CSS 셀렉터입니다.모든 CSS 셀렉터에 이를 추가하여 해당 요소가 전체 화면일 때 규칙이 적용되도록 할 수 있습니다.
#container:fullscreen {
width: 100vw;
height: 100vh;
}
"전체 화면"이라고 하면 컴퓨터 전체 화면을 의미합니까, 아니면 브라우저의 전체 공간을 차지하는 것을 의미합니까?
사용자를 전체 화면으로 강제 입력할 수 없습니다.F11; 하지만, 당신은 다음 CSS를 사용하여 당신의 div 전체화면을 만들 수 있습니다.
div {width: 100%; height: 100%;}
이것은 물론 당신의 분열을 가정할 것입니다.<body>tag. 그렇지 않으면 위 코드 외에 아래 코드를 추가해야 합니다.
div {position: absolute; top: 0; left: 0;}
CSS 방식:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS 방식:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
브라우저 렌더링 영역의 전체 화면을 위해 모든 최신 브라우저가 지원하는 간단한 솔루션이 있습니다.
div#placeholder {
height: 100vh;
}
주목할 만한 유일한 예외는 4.3 이하의 Android이지만, 종종 시스템 브라우저/웹뷰 요소에서만 가능합니다(Chrome은 정상 작동합니다).
브라우저 지원 차트: http://caniuse.com/viewport-units
모니터 전체화면은 HTML5 전체화면 API를 이용하시기 바랍니다.
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
FullScreen API를 이렇게 사용할 수 있습니다.
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
데모
const elem = document.querySelector('#park-pic');
elem.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}#container{
border:1px solid #aaa;
padding:10px;
}
#park-pic {
width: 100%;
max-height: 70vh;
}<div id="container">
<p>
<a href="#" id="toggle-fullscreen">Toggle Fullscreen</a>
</p>
<img id="park-pic"
src="https://storage.coverr.co/posters/Skate-park"></video>
</div>추신: 요즘 screenfull.js를 사용하고 있습니다.자바스크립트 전체화면 API의 크로스 브라우저 사용을 위한 간단한 래퍼입니다.
이게 제일 간단한 거예요.
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
이거 먹어볼 수 있어요.
<div id="placeholder" style="width:auto;height:auto"></div>
너비와 높이는 플롯이나 그래프에 따라 달라집니다.
네가 이걸 원하길...
아니면
클릭하면 jquery로 사용할 수 있습니다.
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
브라우저의 보이는 영역(스크롤 가능한 영역) 너머에 문서 높이를 표시하려면 문서 높이를 사용합니다.
CSS 부분
#foo {
position:absolute;
top:0;
left:0;
}
J쿼리 부분
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
부트스트랩 5.0을 사용하면 이제 이 작업이 엄청나게 쉽습니다.이 클래스를 전체 화면 요소로 설정하거나 해제하기만 하면 됩니다.
w-100 h-100 position-absolute top-0 start-0 bg-white
언급URL : https://stackoverflow.com/questions/7130397/how-do-i-make-a-div-full-screen
'programing' 카테고리의 다른 글
| 지정한 열 하나를 제외한 모든 열의 DataFrame 검색 (0) | 2023.11.05 |
|---|---|
| openshift는 wp-admin을 https로 리디렉션합니다. (0) | 2023.11.05 |
| jQuery 셀렉터에 의해 주문 개체가 반환됩니까? (0) | 2023.10.31 |
| 웹사이트에서 워드프레스 쿠키를 읽는 방법은? (0) | 2023.10.31 |
| ReferenceError: 주입이 정의되지 않았습니다. (0) | 2023.10.31 |