I am facing an issue with a parent div and its 2 child divs.
<div id="parent">
<div class="child1 col-2"></div>
<div class="child2 col-10"></div>
</div>
The child1 div has absolute positioning and collapsible items. When I expand the collapsible items within child1, its height increases. How can I adjust the height of the parent div and/or child2 div to accommodate the increased height of child1 after the page has already loaded?
To position your first child (child1) absolutely, you must calculate the height of the first div and assign the top value to the second div.
HTML
<div id="parent">
<div class="child1 col-2">Child1<br/>test1
<a class="collapse" href="#">collapse</a>
<div class="insideDiv">
test inside
</div>
</div>
<div class="child2 col-10">Child2</div>
</div>
CSS
.child1 {
position:absolute;
}
.child2 {
position:relative;
}
.insideDiv {
display:none;
}
jQuery
var child1Height = $(".child1").height();
$(".child2").css('top' , child1Height);
$(".child1 .collapse").click(function(){
$(".insideDiv").slideDown(function(){
var countHeight = $(".child1").height();
$(".child2").css('top' , countHeight);
});
})
Is there a way to make the click event only affect ul tags and not all li elements using jQuery? <!-- HTML --> <ul class="wrap"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> I attemp ...
I am working on a project where I need to implement drag and drop functionality for multiple div tags on a page using jQuery. Additionally, I want to save the position of all the divs in a SQL Server database. Essentially, I am trying to create a page simi ...
Would like to achieve something similar to this: http://jqueryui.com/demos/button/#icons When trying to replicate it, http://jsfiddle.net/p5PzU/1/ Why is the height so small? I expected a square shape but am getting a rectangle instead. What could be c ...
I'm a beginner in web design and I'm wondering if it's possible to adjust the font-size of the card-title and the size of the card image based on different screen sizes using bootstrap 4. When viewed on small screens, they appear too large. ...
Can this specific shape be created using just one HTML element? I am looking to use it for image cropping purposes, so having only one element would make the process easier ...
Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...
I am attempting to create a popover that generates dynamic content and reacts when an option is selected. On my page, I have a select element and one of the options should trigger a popover containing a form with 'Accept' and 'Cancel' ...
Below is an example of the stylesheet I am currently using: #thing { display: none; } I am looking to retrieve the value of the 'display' property using PHP instead of Javascript. While I know how to do this with Javascript, I would prefer to u ...
Hey there, I need some help with the layout of my page. Here's the link to the page I'm currently working on: At the moment, the list is showing up vertically instead of horizontally. CSS: li { display:inline; list-style-type:none; ...
Is there a way to run multiple AJAX calls on the same page from the same client without them getting queued by the server? The calls are starting correctly, but it seems like the server is executing only one request at a time. I've checked the start ...
I have used the JSZIP library to create a zip file containing 2 xml files: jszip.js jszip-load.js jszip-inflate.js jszip-deflate.js var zip = new JSZip(); zip.file("hi.xml", "<?xml version="1.0"?><root/></root></xml>"); zip.fil ...
How can jQuery be used to insert rows between existing rows in an HTML table? <Table id="TEST"> <tr>1</tr> <tr>2</tr> </table> I need to include a new row <tr>xx</tr> between the rows with values ...
$(.dateselboxes) .change( function(){ var y; y=$("#year").val(); var m; m=$("#month").val(); var d; // check for leap year var isLeapYear; if(y%4==0) { if(y%100==0) { if(y%400==0) {isLeapYear=true;} else {isLeapYear=false;} } ...
I've been working on a dynamic banner system that can support image banners and flash banners using object/embed. The site relies heavily on jQuery, especially for handling 'click' events. While tracking clicks on image banners is straightf ...
I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far: <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500, ...
Hello everyone, I am currently trying to figure out how to solve the following issue: function setimgwidth() { var bw = $('.post-body').width(); $(".post-body p img").each(function() { var os = $(this).width(); //if (bw & ...
I have been working on a unique landing page design featuring a menu made up of custom hexagons. I aim to make these hexagons dynamically adjust to fill the entire screen based on the user's resolution, eliminating the need for scrolling. For a previ ...
After experimenting with applying the border-radius property to a div, I encountered an issue where the border radius only worked on one side when the radius value was too large. How can I resolve this problem while maintaining the border-radius value on a ...
Let's keep it short and sweet. Here's what I'm attempting to achieve: https://i.sstatic.net/e2ZU2.png Currently, this is what I have: https://i.sstatic.net/cagv7.png Below is the code snippet: #ligne_horizontale_experience { ma ...
I'm currently updating my portfolio and have incorporated a typewriter effect into the second line of text. However, I'm finding that the speed of the effect is a bit too fast for my liking. I've attempted to adjust the animation seconds, de ...