While using bootstrap, there is a fixed top navigation bar and a fixed bottom navigation bar in place. I am looking to display a large image in the background that spans the space between these two nav bars and also covers the full width of the window. How can I dynamically determine the height between the navbars and the width of the window? It's important for this to adjust dynamically as the window size may vary based on the device being used.
Using jquery is necessary for this:
var viewportSize = {
width : $(window).width(),
height : $(window).height()
};
//You can access the dimensions like this:
//viewportSize.height
It's important to note that different devices may behave differently, so the viewport dimensions are provided rather than screen dimensions.
Another option is to determine device-width by checking the width of an element with data-role="page" (which is set to 100% of the device-width):
var deviceWidth = 0;
$(window).bind('resize', function () {
deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');
$(window).resize(function() {
var top_nav_height = $("#id_of_top_nav").height();
var bottom_nav_height = $("#id_of_bottom_nav").height();
var window_height = $(window).height();
var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);
$("#id_of_img").css({
height:height_of_open_space+'px';
});
});
To ensure accuracy, this code assumes a 0px padding and margin. If that is not the case, make sure to also deduct those values from height_of_open_space before setting it as the height for the img.
Understanding your specific markup is crucial for a precise solution using pure css. However, it's definitely achievable. Here's a simple example I created as a demonstration: http://codepen.io/anon/pen/XbGJJO
Here's the basic HTML structure:
<div class='top'>
top navbar
</div>
<div class='content'>
<p> some content </p>
</div>
<div class='bottom'>
bottom navbar
</div>
And here's the CSS implementation:
.top, .bottom {
height: 40px;
background: red;
position: fixed;
width: 100%;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.content {
margin: 40px 0;
min-height: calc(100vh - 80px);
background: green; /* custom background color */
}
The key aspect is in this line of code:
min-height: calc(100vh - 80px);
This calculation ensures that your content occupies 100% of the vertical height less the heights of the top and bottom bars. Feel free to ask if you need further clarification.
I am facing an issue with Vue3 (Vite) and Bootstrap 5 while trying to create a modal that can be called by code. The problem arises when I attempt to open the modal from its parent component. Bootstrap has been properly installed and included in my projec ...
Is using ajax requests more resource-intensive than a traditional page load? Consider a basic menu with standard links where clicking a link takes you to a new page. By using ajax, I can avoid this default behavior and instead fetch the linked page' ...
Looking to create a unique shaped div that will house a Google Maps map. I have the custom border covered with a .png, but creating the actual shape is where I'm stuck. I believe using HTML canvas may be the solution, along with CSS overflow:hidden to ...
Utilizing Vuex in my app is integral for executing asynchronous tasks, such as logging a user into the application. Upon successful login and execution of axios.then(), I aim to notify the component from which I invoked this.$store.dispatch('login&apo ...
Currently, my goal is to successfully install angular-ui. Following the tutorials, I have attempted all commands such as: npm install angular-bootstrap However, this command results in an error message: +-- UNMET PEER DEPENDENCY angular@>=1.5 After ...
Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...
Whenever a user clicks the "like" button, I perform a check in the database to see if they have already liked the photo. This check is done using ajax. If the photo has already been liked, the success message will indicate "already liked", otherwise it wi ...
I have implemented a custom directive to wrap ag grid like so: function MyDirective(): ng.IDirective { var directive = <ng.IDirective>{ restrict: "E", template: '<div style="width: 100%; height: 400px;" ag-grid="vm.agGrid ...
When attempting to populate a text box with a date in the format Wed Sep 14 2016 00:00:00 GMT+0400, I encountered an issue. My goal was to extract the date in the format Sep 14 2016 using the substring method. I implemented the code below, but unfortunate ...
I have a filter form that, when changed, populates a container div (#results) with newly filtered results from a database. However, the Infinite Ajax Scroll plugin displays the results of the first search on the second page after changing the filter. On th ...
Recently, I have been working on a Javascript function that automatically scrolls the page when the user drags an element close to the window's edge. The function is shown below in its simplified form: var scroll = function() { var scrollTop = $m ...
In my JavaScript code, I have an ajax call that receives a GUID from the server-side code in the response. After getting the GUID successfully, it is used to make a call to an iframe. The ultimate goal is to refresh the page once the iframe has completed i ...
In the scope, I have a map called $scope.graphEventsAndFields. Each object inside this map is structured like so: {'event_name': ['field1', 'field2', ...]} (where the key represents an event name and the value is an array of f ...
I am transmitting a JSON string from my Django view to a JavaScript file named idbop.js on the client side. In Django, I am utilizing the serializer to convert query results into JSON format. Here is an excerpt from my views.py file in Django: def index(r ...
I am in the process of developing my unique code for a real-time html/js/jquery/css editor. I have successfully integrated css and html, but I am facing challenges with getting jquery or javascript to function properly. Below is an excerpt of the code caus ...
I am perplexed as to why this is not functioning correctly. #parent { display: flex !important; flex-flow: row wrap; width: 100% !important; justify-content: flex-start; } .item{ flex: 1 !important; flex-basis: calc(100% / 4); box-sizing: border-bo ...
Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...
Having some difficulty passing a value from one function to another within an Angular controller. I have an event: onTimeRangeSelected: function (args) { $scope.dayPilotCal.clearSelection(); $scope.createNewEventModalWindow(args); ...
Recently, I encountered an issue while attempting to upgrade my old version of angular-material (v0.9.0) to a newer one. The reason behind this upgrade was the necessity to utilize the new htmlContent for an alert using $mdDialog. However, after replacing ...
Every time I try to install a new npm package using 'npm install', my npm crashes. Sometimes, I have to repeat the process multiple times before all dependencies are installed properly, and even then, it might miss some nested dependencies. This ...