Is it possible to dynamically set the position of a div based on its own height, which can vary depending on the content inside?
Here is an example structure:
HTML
<div class="container">
Content
</div>
CSS:
:root {
--height: x;
}
.container {
height: auto;
top: calc(100vh - var(--height));
}
.clientHeight function returns the height of an object, which I then assign to a CSS variable.
let container = document.querySelector(".content")
var root = document.querySelector(':root');
root.style.setProperty('--height', container.clientHeight + "px");:root {
--height: x;
}
.content {
outline: 1px solid red;
height: auto;
position: relative;
top: calc(100vh - var(--height));
}<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus, officiis! Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Dolore accusantium deserunt corrupti iure praesentium in reprehenderit
placeat mollitia culpa labore nostrum, cumque obcaecati et sapiente dolores excepturi libero maiores
arch</p>
</div>If you want to modify a CSS variable called --height using JavaScript, you can do so by:
var root = document.querySelector(':root');
root.style.setProperty('--height', <YOUR_HEIGHT>+'px');
Check out this quick demo where we update a CSS variable named --width when a button is clicked:
var root = document.querySelector(':root');
root.style.setProperty('--width', '100px');
function changeSize() {
if (getComputedStyle(root).getPropertyValue('--width') == '100px') {
root.style.setProperty('--width', '200px');
} else {
root.style.setProperty('--width', '100px');
}
}:root {
--width: 100px
}
div {
height: 100px;
width: var(--width);
background-color: blue;
}<div></div>
<button onclick="changeSize()">Change variable value</button>I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...
I am attempting to have a textarea respond to keydown events. I experimented with the following code: <textarea id="text"></textarea> $('#text').keydown(function() { alert('keydown'); }); While this works well on deskto ...
I have organized a responsive form of div with a central and bottom alignment. The code I have included is as follows: <link href="../css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="../css/bootstrap.min.css" rel="stylesheet" /> &l ...
Let me confirm, the code snippet from the header.php file is as follows: <link rel="stylesheet" href="style.css"> If I include the following code in every other php file: include 'header.php'; Will all the files have access to style.css ...
One of the challenges I am facing is in a view that allows users to add items to a table. Using a simple HTML form and jQuery, new rows are dynamically added to the table. I am seeking a way to efficiently pass the added rows from the view to the controll ...
I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...
Currently, I am in the process of developing my own personal library. jQuery doesn't quite meet my needs, and I prefer having a clear understanding of what is happening within my code. Nevertheless, I'm encountering an issue with the ajax functio ...
I'm currently working on implementing an Ajax post filter using radio buttons. The goal is for the user to be able to filter through two published products by selecting the appropriate radio button. Below is the code I have utilized: category.blade. ...
Up until now, I haven't had any issues using the following code: $("#tableid tr:even").addClass("evenClass"); However, my table now contains hidden rows which is causing problems with the alternating row styles. I've attempted to add 'is(" ...
Can you assist me? I am currently using the input type color and looking to have the color picker always visible without requiring a click. Is there a way to achieve this through html, css, javascript/jquery, or any other method? Thank you in advance. I ...
I'm looking to implement a feature where a DIV panel slides in when the user clicks and drags a smaller tab. While there are tutorials available for sliding elements on click, I specifically need the panel to slide in only when the user interacts with ...
I'm currently in the process of setting up multiple drop down menus within a navigation element. The issue I'm facing is that when a user hovers over the menu items, the displayed elements appear below the first item instead of the selected one. ...
I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...
I've been working with a Bootstrap grid that you can find at . While it works perfectly on large desktop screens, everything is a bit messy on mobile devices. The "NEW" text specifically is not visible on mobile and doesn't seem to be responsive. ...
Utilizing JSON data as a parameter for an ajax call: var startDate = dateFormatForSave($("#start_date").val().trim()); var arrayOfStudentsInfo = []; var table = $("#selected_students"); table.find('tr').each(function(i, el) { var rowId = $( ...
I am attempting to create a feature where if adblock is enabled, an image will display behind the ad banner on my website with the message "Please consider disabling adblock". Unfortunately, it is only showing up as a bordered box. Here is how the box ap ...
I am struggling to find the right solution for updating just one field in my database called Flag, which is a Boolean field. I have tried using ajax/JQuery, but it only works for the first item in the list and stops working for subsequent items. The ID and ...
I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...
I have integrated the flexslider with rtl support from a website called rtl-this.com. However, I am facing an issue where when swiping the slider on touch screens, it moves in the opposite direction. Can anyone suggest a solution to fix this problem? ...
Is there a way to capture a web page thumbnail using jQuery and PHP for a specific link? Imagine if I were to assign a PHP variable like this: $screen="http://www.yahoo.com" Can we implement the use of AJAX, jQuery, and PHP to display a thumbnail of the ...