How to resize textarea depending on the parent element - javascript

So I need to resize the textarea in this form to take the whole available space in the box depending on the parent element (#wrapper). How do I do that?
I will exactly put the negative number calculation more precise when I am sure how much text will go there.
The calculation code I wrote in, calculates height of textarea to 0px.
var boxHeight = ($("#wrapper").height()-200);
$( window ).ready(function(){
$("#Box").height( boxHeight );
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XxX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1 class="alignCenter"> Hello </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
<form class="form" id="Form">
<p class="text">
<textarea name="text" id="Box" placeholder="Xyz"></textarea>
</p>
<div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
<div class="alignCenter">
<button class="brown" type="submit">Save</button>
<button class="purple" type="submit">Publish</button>
</div>
</form>
</div>
</body>
</html>

You can easily do this with CSS alone:
textarea {
width: 100%;
height: 100%;
}

If you know that #wrapper will have a specified height, the you use CSS to get a reasonable fit for the textarea.
First, specify a value for the height in the #wrapper rule.
Then, set a height for #Form by using absolute positioning and the CSS calc function to set the form to be the height of the parent minus 200px.
You then need to do a similar trick to the p element wrapping the textarea, leaving 50px height for the buttons.
Finally, set height and width to 100% for #Box, and set box-sizing: border-box to take into account the border of the textarea element.
Comment: Although this can be done, the approach depends on two hard-coded values for the height of the text before the form and the height of the buttons. JavaScript/jQuery may be the better approach. Either way, #wrapper needs a height value.
#wrapper {
border: 1px dotted blue;
height: 500px;
position: relative;
}
#Form {
border: 1px dotted blue;
height: calc(100% - 200px);
position: absolute;
width: 100%;
bottom: 0;
}
#Form p {
border: 1px dashed blue;
height: calc(100% - 50px);
margin: 0;
}
#Box {
height: 100%;
width: 100%;
box-sizing: border-box;
}
<div id="wrapper">
<h1 class="alignCenter"> Hello </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
<form class="form" id="Form">
<p class="text">
<textarea name="text" id="Box" placeholder="Xyz"></textarea>
</p>
<div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
<div class="alignCenter">
<button class="brown" type="submit">Save</button>
<button class="purple" type="submit">Publish</button>
</div>
</form>
</div>

Related

Using CSS to wrap text around image and have it behave like a background image

I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.
the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>

divide width evenly between child with hidden overflow x and scroll y and a preview div

I want .content to scroll vertically and hide it's horizontal overflow, .preview and .editor should share the parent's width evenly.
.wrap {
display: flex;
background: gray;
}
.content {
overflow-x: hidden;
overflow-y: auto;
}
.editor textarea {
width: 100%;
height: 100%;
resize: none;
}
.editor {
flex: 1;
}
.preview {
flex: 1;
}
<div class='wrap'>
<div class='editor'>
<textarea></textarea>
</div>
<div class='preview'>
<div class='content'>
LongcontentLongcontentLongcontent
</div>
</div>
</div>
Some bad news for you:
Note: The overflow property only works for block elements with a specified height.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
The 50% issue is caused by box-sizing and default styling of text-area elements; it is overflowing its .editor container, making it look larger than 50%;
Here is some code to do what I believe you're trying to do:
.wrap {
display: flex;
background: gray;
}
.content {
overflow-x: hidden;
overflow-y: auto;
/* without specifying a height, the content will never scroll vertically when using overflow-y:auto, because it will continue to grow to it's content's height otherwise */
max-height: 150px;
}
.editor textarea {
width: 100%;
height: 100%;
resize: none;
box-sizing:border-box; /* prevents drawing outside it's parent */
}
/* without forcing 50% width, flex will let a container's content grow to its content's size. Try with/without */
.editor, .preview {width: 50%}
.editor {
flex: 1;
}
.preview {
flex: 1;
}
<div class='wrap'>
<div class='editor'>
<textarea></textarea>
</div>
<div class='preview'>
<div class='content'>
THISCONTENTGETSCUTOFF_X_LongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontent
THIS CONTENT WRAPS AND SCROLLS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac fermentum nunc. In vestibulum suscipit quam, ac mattis velit convallis quis. Phasellus ut justo id nunc placerat varius. Curabitur feugiat vulputate facilisis. Nulla est leo, posuere aliquet ligula at, ultricies placerat felis. Curabitur nec tincidunt arcu, sit amet varius nunc. Cras varius risus a tellus auctor egestas. Pellentesque sagittis tortor ac massa facilisis porta. Proin arcu nisl, facilisis non orci ut, tempor tincidunt arcu. Aenean luctus lacinia sapien, at sagittis enim pharetra non. Phasellus blandit pharetra hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam at feugiat diam, ut porttitor quam.
</div>
</div>
</div>

sticky-kit flashes when sticky

I have some adsense ads displayed on a test page using sticky-kit v1.1.2.
When I scroll down the page (I am using Chrome browser), the ads flash/reload when the sticky-kit becomes sticky.
I have read this trouble shooting guide that does seems to address the exact issue that I am experiencing, but does not work for my code.
My code is displayed below. I have deliberately left out the two following div's, because I am unsure where they should be inserted (I have tried many scenarios, but none work for me):
<div class="sticky-parent">
<div class="sticky-spacer">
</div>
</div>
Here is my HTML code:
<div id="id_side_advert_container" class="side_advert col-md-2">
<div class="margin-bottom-20">
<div id="id_side_advert_wrapper">
{# google adsense code to display side advertiements #}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- zoodal-side-advertisement-responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890112987"
data-ad-slot="1234567890"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
Here is my JQ code:
// sticky-kit code for the side advertising sticky - with an offset of 15px when sticky.
$("#id_side_advert_container").stick_in_parent({
offset_top: 15,
parent: ".sticky-parent", // note: we must now manually provide the parent
spacer: ".sticky-spacer",
});
// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})
The following shows how that solution in your question should be set up to work (here I'm using an iframe to simulate your ads).
$("#sidebar").stick_in_parent({
offset_top: 15,
parent: ".content", // note: we must now manually provide the parent
spacer: ".sticky-spacer",
});
// the following code is the workaround so that the sticky element does not disappear when bottom -
// taken from: https://github.com/leafo/sticky-kit/issues/31 danxshap
$('#id_side_advert_container')
.on('sticky_kit:bottom', function(e) {
$(this).parent().css('position', 'static');
})
.on('sticky_kit:unbottom', function(e) {
$(this).parent().css('position', 'relative');
})
.content {
overflow: hidden;
}
.content .sidebar {
width: 200px;
margin: 10px;
margin-right: 0;
float: left;
overflow: hidden;
font-family: sans-serif;
}
.content .main {
margin: 10px;
margin-left: 222px;
border: 1px solid blue;
height: 2000px;
overflow: hidden;
}
.footer {
margin: 10px;
text-align: center;
font-size: 13px;
border-top: 1px dashed #dadada;
color: #666;
padding-top: 10px;
min-height: 233px;
}
.sub {
color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
<h1>Example sticky flicker fix</h1>
<div class="content">
<div class="sticky-spacer">
<div id="sidebar" class="sidebar">
<em>Ads go here. <span style="color:maroon">Demo'ing with an iFrame instead.</span></em>
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="https://unsplash.it/200/200" name="imgbox" id="imgbox">
<p>iframes are not supported by your browser.</p>
</iframe>
</div>
</div>
<div class="main">
This is the main column
<p class="sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.
</p>
<p class="sub">
In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in
porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.
</p>
<p class="sub">
Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.
</p>
</div>
</div>
<div class="footer">
My very tall footer!
</div>
With this I don't notice any flickering in Firefox or Chrome.
I recommend, as a test, you try placing your ads in this JSFiddle (it is the same code as the above snippet): https://jsfiddle.net/2jkf4qcr/1/.
I had the similar issue with sticky-kit library. The solution was to not use the spacer (spacer: false):
<div class="sticky-parent">
</div>
$("#id_side_advert_container").stick_in_parent({
offset_top: 15,
parent: ".sticky-parent",
spacer: false,
});

Force text in the child div fit into parent

I have two div tags in my HTML code like this
<div id="parent">
<div id="child">
<p class="child-text"> ..... </p>
<a class="child-link"> ..... </a>
<p class="child-text"> ..... </p>
</div>
</div>
#parent{ height: 400px; width:100px}
How can force the content of #child div vertically fit into the parent div ?
I am looking for some thing that can take child div ID and resize its content dynamically. I have worked with jQuery.fittext. However, it get the child-text class id instead of child div id. In other words, it is not intelligent enough to identify what is in the child div and then rescale them.
Is there any other alternative for this ?
You could do something like:
var fontsize = 10;
while($('#child').height() <= $('#parent').height()){
fontsize = fontsize +1;
$('#child').css('font-size',fontsize+'px');
}
#parent{ height: 400px; width:100px;background:red;}
#child{padding-bottom:5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="parent">
<div id="child">
<p class="child-text"> Once upon a time </p>
<a class="child-link"> there lived a monkey</a>
<p class="child-text"> who loved to eat oranges </p>
</div>
</div>
While #child height is less then #parent then it adds 1px until it is not. In the css, I gave #child a padding bottom of 5px, so it would not overflow
JSFiddle
Add a display property value of table to #parent and display property value of table-cell to the elements you want to measure the height of #parent
#parent, #child {
width: 100%;
height: 100%;
position: relative;
display: table;
}
.child-link, .child-text { /* ID/Class of whatever element you want to measure the #parent */
display: inline-block;
height: 100%;
width: 150px;
vertical-align: top;
background-color: green;
bottom: 0;
display: table-cell;
border-left: solid 5px white; /* Just for Division sake */
}
<div id="parent">
<div id="child"><p class="child-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit. </p>
<a class="child-link"> Lorem </a>
<p class="child-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis felis nec est iaculis, id rhoncus eros efficitur. Aliquam justo felis, semper in placerat non, facilisis sed elit.</p>
</div>
</div>
To make it dependent on the screen size, do something like below:
#media screen and (max-width: 768px) { /* Adjust as needed */
enter code here
}

div scrollbar not appearing

I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Foo</title>
</head>
<body>
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
</div>
</body>
</html>
style.css
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: hidden;
}
Well you're using overflow-style which isn't supported in any major browser yet ..
Setting overflow to auto or scroll on .scroll-area will have the vertical scrollbar appear as expected
http://jsfiddle.net/kRcaR/1/
You should explicitly set overflow to auto (or to scroll if you need scrollbars appear all the time):
.scroll-area {
overflow: auto;
}
DEMO: http://jsfiddle.net/aNTHx/
You need to set overflow: auto or if you just want the y-axis to scroll overflow-y: auto; overflow-x: hidden;
Your div should have this overflow styling for vertical scrolling:
.scroll-area {
overflow-y: scroll;
}
Or if you want to scroll horizontal:
.scroll-area {
overflow-x: scroll;
}
Your hiding the scroll bar with overflow: hidden;.
If you change to:
.scroll-area {
overflow-style: auto;
overflow: auto;
}
HTML
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>
CSS
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: scroll;
}
DEMO
http://jsfiddle.net/YxsLc/1/
EXPLANATION
If You want to scroll content in html elements You should use property overflow: scroll;
Goodluck in future code.

Categories

Resources