Is it possible to re-position a position:absolute DIV? - javascript

The scenario:-
A published HTML page has position:absolute DIVs and all DIV heights are set to specific px values. The page is editable via an online CMS such as Surreal or Cushy. The editor enters more content that the DIV was designed to take. The result is that the extra content overflows the DIV and the page design is trashed.
Is there any way that when an editor does this that the DIV height expands AND all other DIVs on the page move down? Bare in mind that the DIV heights cannot be set to 100% but have fixed px values.
I am assuming the solution maybe jQuery or JavaScript - any ideas?
<body>
<div id="two" style="position:absolute;left:163px;top:0px;width:738px;height:269px;z-index:5;padding:0;">
<img src="images/two.jpg" id="two" alt="two" border="0" title="two" style="width:738px;height:269px;">
</div>
<div id="three" style="position:absolute;left:0px;top:350px;width:900px;height:294px;z-index:6;" class="editable">
<!-- div content -->
<!-- this is where the user/editor will add content -->
</div>
<div id="four" style="position:absolute;left:0px;top:0px;width:900px;height:323px;z-index:7;padding:0;">
<div id="five" style="position:absolute;left:0px;top:0px;width:162px;height:269px;z-index:0;padding:0;">
<img src="logo.gif" id="logo" alt="Logo" border="0" title="Logo" style="width:162px;height:269px;">
</div>

I don't see exactly the scenario, but have you considered the scroll within your fixed size divs ?
Give a class to those divs, such as
<div class="bescrollable"></div>
and then in your css :
.bescrollable {overflow:auto;}
scrollbars will be added when overflows occur

You can set height of the div according to the content like this:
.container {
position: absolute;
width: 400px;
height: 400px;
}
.content {
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">...</div>
</div>
$('.container').css('height', $('.content').height());
Here a fiddle: http://jsfiddle.net/Kdktw/
As CBRRacer mentioned in the comments, if we could see the HTML, the answer would be more accurate to your situation.
I hope this helps!

This would be predicated on the height of the content within the box. Probably the best method would be to have the height of the content div set to auto and use javascript to get the height of the element.
// Using jQuery
var contentDivHeight = $('#myContentDiv').height();
var startingOffset = 250; // The height of the div original set at startup
Then you could simply add this height to each of the primary display controls that would have to be moved "down". If you assigned them all a common class they could all easily be selected (such "primaryInterface" or something).
$(document).ready(function() {
$('.primaryInterface')each(function (i) {
var newTop = this.offset().top + contentDivHeight - startingOffset;
var newLeft = this.offset().left;
this.offset({ top: newTop, left: newleft });
});
});
This code is untested, but ideally, once the page loads, it would find all of the elements with the specified class and set their top offset to be the difference between the starting height of the div and the resultant height.

Related

Child element changing parent element height (css)

I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.

HTML div formatting: three images that dynamically match viewport size (image slider)

I'm new to writing HTML and CSS, but I am on the final step of creating my website. Namely, the image slider which resides in the background.
The Issue: The pictures are not centered respective to the viewport.
The first image, for example, should have some padding on the left and
should be vertically aligned so as not to move when the height of the
image increases to match the viewport height. It should remain
centered behind the body of the page.
New Issue: When the first image's width expands over the viewport's, the images begin to move off-center because they are being locked at the left-hand side of the parent class/viewport. Is there a property that will allow the child class elements to expand past the parent's boundaries?
Could some of you wise web devs help me out here?
CodePen full version of the website: CodePen Link
Please go to "Full View", minimize your browser, and shorten its width to see what I mean.
Here is my HTML code for the slider:
<!-- Inside <html></html> and below <head></head> -->
<div class="background_carousel">
<div class="carousel_slides">
<div class="slide">
<img src="./img/slideshow/s%20(1).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(2).jpg">
</div>
<div class="slide">
<img src="./img/slideshow/s%20(3).jpg">
</div>
</div>
</div>
and my CSS for the slider...
.carousel_slides {
display: flex;
background-color: #999999;
width: max-content;
text-align: center;
}
.carousel_slides .slide {
position: static;
height: 100vh;
width: 100vw;
}
.slide img{
height: 100%;
}
Huge thank you in advance.
Use position and dynamic adjust left with click

jquery multiple append avoid increasing window size

I have been working on the next example, I'm adding html to a div, at some point the size of the window start increasing, is there a way to avoid this?
example
$(document).ready(function() {
$('#b').click(function() {
$('#elDiv').append('<br><strong>Hello</strong><br>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>I would like to say: </p>
<button id="b">click now</button>
<div id="elDiv"></div>
I defined a style for the elDiv to be 100px height and scroll when content exceeds the div's height:
.myclass{
height: 100px;
overflow: auto;
}
Updated fiddle: https://jsfiddle.net/9rysbxw2/18/
to avoid this behavio i think you should set a size to the element and define a overflow behavior. So the content that is been added to the div will stay inside it. here is a modification of you code sample:
$('#b').click(function(){
$( '#elDiv').append('<br><strong>Hello</strong><br>');
});
<p>I would like to say: </p>
<button id="b">click now
</button>
<div id="elDiv" style="height:100px; overflow: auto;">
</div>
<!-- NOTICE THE OVERFLOW PROPERTIE I ADDED AND THE FIXED HEIGHT -->
i resolved the issue using the style properties
position: absolute;
top: 20px;
this way i can add multiple div at any position without increasing the screen size
example

Resize container dynamically when font size changes

I am displaying every word in a sentence in separate div using inline-block with max-width of 120px. When I try to increase the font size on parent div my inline-block of div get overlaps due to large font size.
Is there any way to programmatically calculate the max-width required for inline-block of div to be used after increasing the font size?
Here is sample code snippet:
jQuery('.btnIncFont').click(function(){
jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px">This is a test1</div>
<div style="display:inline-block;max-width:120px">This is a test2</div>
<div style="display:inline-block;max-width:120px">This is a test3</div>
<div style="display:inline-block;max-width:120px">This is a test4</div>
</div>
Keep pressing the + button and at certain stage you will find that the div is overlapping each other. I want to fix this with calculation for my max-width to attain the exact ratio according to initial size 120px after incrementing font-size.
When you increase the font-size make sure you are also increasing the line-height.
I don't think you want to go down the road of programmatically setting the width of each div, let the CSS do it for you. I'm assuming you aren't already doing that, if so, try setting it to auto. Lastly, I may suit you better.
Sorry for the vague answer but if you post the code I'll give you a more specific one.
Your CSS:
.v {
word-wrap:break-word;
display:inline;
font-size:140px;
border:2px solid blue;
max-width:120px;
}
and HTML:
<div>
<div class="v">This</div>
<div class="v">is</div>
<div class="v">a</div>
<div class="v">test</div>
</div>
Added the break-word css option. Here is the full fiddle: http://jsfiddle.net/eugensunic/76KJ8/74/
I think I have got a solution. Never thought that it would be as much simple as using just a span inside child div to get the element width after increasing font-size. Then replacing max-width on child div with span width value. It will gives you the exact ratio based on your initial max-width value of 120px after incrementing font-size and at the same time also take care to wraps the div in case it exceeds the width of parentDiv.
Here is code snippet:
jQuery('.btnIncFont').click(function() {
jQuery('.parentDiv').css('font-size', parseInt(jQuery('.parentDiv').css('font-size')) + 2);
var spanWidth = parseInt(jQuery('.parentDiv div span').css('width'));
jQuery('.parentDiv div').css('max-width', ((spanWidth < 120)?120:spanWidth) + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
<div style="display:inline-block;max-width:120px"><span>This is a test1</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test2</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test3</span>
</div>
<div style="display:inline-block;max-width:120px"><span>This is a test4</span>
</div>
</div>
use width auto....
`<div>
<div style="display:inline-block;width:auto">This</div>
<div style="display:inline-block;width:auto">is</div>
<div style="display:inline-block;width:auto">a</div>
<div style="display:inline-block;width:auto">test</div>
</div>`

Recreating Phone SMS UI with CSS: Absolute Positioning Conversation to Bottom while Maintaining Scroll

Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}

Categories