I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size.
When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the calculation of the viewport size. How can I determine the dimensions excluding these elements? I have tried using innerWidth() and innerHeight(), but it is not giving me the desired results (as seen below).
The website I'm developing is quite simple, mainly consisting of a video carousel, and I want to avoid forcing users to go fullscreen or scroll unnecessarily.
Upon running the following code:
$(document).ready(function() {
alert("Inner Height: " + $(document).innerHeight());
alert("Inner Width: " + $(document).innerWidth());
}
(The same dimensions are returned when using $(window) as well.)
Here's a snapshot illustrating the issue:
Below is the code I have implemented:
<div id="videoModal">
<div class="modal-dialog" role="listbox">
<!--<div class="modal-header">-->
<!--</div>-->
<div class="modal-body">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" ng-class="{active: !$index}" ng-repeat="video in videos">
<video id="{{video.videoId}}" controls>
<source src="{{video.webmUrl}}" type="video/webm"/>
<source src="{{video.mp4Url}}" type="video/mp4"/>
<!--<source src="{{video.ogvUrl}}" type="video/ogg"/>-->
</video>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
In addition, here is the CSS styling used:
#videoModal {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
If anyone has insights on how to solve this issue, I would greatly appreciate any help. It seems like there may be a key aspect that I am overlooking... Thank you in advance.