jQuery.. div reveal/slide?

jQuery.. div reveal/slide? - javascript

I have a div, which has content in it.
The content could be really long, or the content could be really small.
I don't want the content to stretch the page on page load if it is long, I want them to click a "more" link and it will slide down and reveal the rest of the content.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.
Below it is a bar or link that says "show the rest"
Up on click, this div lengthens and shows the rest of the content:
Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse vulputate mi egestas
ligula feugiat volutpat. Morbi eros
felis, aliquam in varius id, sodales
quis nunc. Nulla sagittis consectetur
arcu, sed auctor odio placerat quis.
Praesent vitae lacus neque. Curabitur
ultricies tristique sollicitudin.
Suspendisse malesuada nunc at augue
interdum at facilisis ipsum gravida.
Nunc congue sapien sed sem tincidunt
ut adipiscing neque lacinia. Praesent
facilisis quam sed tellus sodales id
tristique massa ullamcorper. Donec sem
turpis, cursus in elementum id,
tincidunt a libero. Etiam feugiat, sem
quis dictum imperdiet, nisl ante
pharetra erat, ut ornare nulla justo
ac sapien.
I know itll be hard to control what will be cut off, blah blah but it isn't for that type of thing. The div does not contain text, it contains a list of features, for example X listing may have 4 features, Z listing may have 14 features, instead of the page stretching if the listing has 14 features listed vertically, we want it to only show a few and then they must click "show me more" for it to slide down and reveal the rest.
How would I go about doing this? Even a jsfiddle to demonstrate it?
Thank you :)

Try giving a fixed height to the div. You can use CSS for this. Then compare height of the list with the outer div. If it is greater show the bar with link show more. On click of this bar you can manage the height of outer div. Like this -
CSS
.parentDiv{
height:some fixed height px;
overflow: auto;
}
Jquery
var parentHeight = $('.parentDiv').height();
var listHeight = $('#List').outerHeight(true);
if(parentHeight < listHeight) {
$('#linkBar').show();
}
$('#linkBar').click(function(){
//$('.parentDiv').height(listHeight);
//OR you can use following code to animate the div
$('.parentDiv').animate({'height': listHeight}, 'slow')
});

Here's a working demo of my implementation (coincidentally similar to the answer given above; I was making this before any answers were given): http://jsfiddle.net/7fhrN/15/
It works for users without JavaScript and gives graceful degradation to your page. Try switching the JS library to something random on JsFiddle and click Run.
HTML:
<div class="stretchy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.</div>
<div class="stretchy">Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.</div>
CSS:
.stretchy
{
margin: 20px;
padding: 5px;
background-color: rgb(240, 240, 240);
overflow: hidden;
position: relative;
padding-bottom: 20px;
}
.inner
{
max-height: 120px;
overflow: hidden;
}
.reveal
{
position: absolute;
bottom: 0px;
}
JavaScript:
$(document).ready(function()
{
$('.stretchy').each(function()
{
if ($(this).height() > 130)
{
$(this).replaceWith('<div class="stretchy"><div class="inner">' + $(this).html() + '</div>Show me more lipsum</div>');
}
});
$('.reveal').toggle(function()
{
$(this).parent().find('.inner').animate({maxHeight: '1000px'});
}, function() {
$(this).parent().find('.inner').animate({maxHeight: '120px'});
});
});
Basically, I iterate over all the <div>s with the class stretchy. If they are too big, I replace them with a <div> with a container and a link at the bottom which changes the max-height of the inner <div> to some ridiculous value.
Just try it. Seeing > having me explain it to you.

Related

Responsive drop cap with pure CSS

I've got a drop cap example using pure CSS that I've tweaked to be approximately three lines high using the default browser font.
<html>
<head>
<style>
p:first-of-type::first-letter {
float: left;
line-height: 65px;
font-size: 70px;
font-weight: 600;
font-style: normal;
margin-top: -3px;
margin-left: 0;
margin-right: 8px;
margin-bottom: -10px;
text-transform: uppercase;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh venenatis cras sed felis. Cras pulvinar mattis nunc sed blandit. Nibh praesent tristique magna sit amet purus gravida quis blandit. Amet volutpat consequat mauris nunc congue nisi vitae. Nibh sit amet commodo nulla facilisi nullam vehicula. Tempus egestas sed sed risus pretium quam vulputate. Nisi est sit amet facilisis. Quis auctor elit sed vulputate mi. Eu sem integer vitae justo eget magna. Neque egestas congue quisque egestas. Commodo viverra maecenas accumsan lacus vel.
</p>
<p>
Imperdiet dui accumsan sit amet nulla. Mauris commodo quis imperdiet massa. Elementum pulvinar etiam non quam lacus. Risus viverra adipiscing at in tellus integer feugiat. Consequat interdum varius sit amet mattis vulputate enim nulla. Aliquam malesuada bibendum arcu vitae elementum curabitur. Leo vel fringilla est ullamcorper eget. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Ornare lectus sit amet est. Urna id volutpat lacus laoreet non. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Diam in arcu cursus euismod quis viverra nibh. Ac tortor dignissim convallis aenean et tortor.
</p>
<p>
Pulvinar elementum integer enim neque. Morbi tincidunt augue interdum velit. Leo integer malesuada nunc vel risus. Pretium fusce id velit ut tortor. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Fringilla ut morbi tincidunt augue interdum velit euismod in. Sit amet nisl purus in mollis nunc sed id semper. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Risus pretium quam vulputate dignissim. Amet consectetur adipiscing elit ut aliquam purus sit. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Praesent tristique magna sit amet purus gravida quis blandit. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Posuere sollicitudin aliquam ultrices sagittis. Proin fermentum leo vel orci porta non.
</p>
</body>
</html>
Example here:
https://codepen.io/cayblood/pen/rNdQqrq
I'm wondering if there is a way with pure CSS to make the drop cap become two lines high instead of three if the paragraph height is too short, or to cease to be a drop cap if the paragraph is only one line high.
Bonus points for code that automatically adjusts the margins and font size depending on the particular first letter. I've noticed that each letter in each font has quirks that make it seem impossible to choose settings that cause every letter to be properly aligned with the margins of the surrounding text. I'm willing to tolerate javascript to achieve this stretch goal.

Section breaks for very long CSS columns

Using CSS columns I can format contiguous data into columns without having to manually break it into sections. This is especially useful when displaying complex, dynamic content.
However when the columns' content is so long that their height is greater than the viewport, dividing into columns makes for a poor reading experience. When the reader reaches the bottom of one column they must manually scroll up to begin reading the next.
In traditional print layouts, readability issues with very long columns are generally mitigated by breaking the columns into sections that 'restart' the column. (Physical pages themselves form a natural separation that the endlessly scrolling webpage does not have). The image below shows how horizontal section breaks makes columnar content that is longer than the height of the viewport more readable.
(Note that by 'restart the columns' I mean that once you reach the end of a left-hand column section you then read the right-hand column of that section before scrolling down to read both columns of the next section. https://www.shutterstock.com/image-vector/newspaper-template... might illustrate it more clearly).
There are very few guarantees for the column content. It may contain any number of paragraphs, images, nested block elements, nested inline elements and so on. Example markup is shown below.
.columns {
columns: 2 200px;
}
.columns * {
max-width: 100%;
}
<div class="columns">
<div class="introduction">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere dictum tincidunt. Cras in lectus eget libero suscipit venenatis at sit amet dolor. Donec tempor cursus justo, volutpat sodales dolor tempor eu.</p>
<p class="a-class">Pellentesque nec tempor sapien, sed vehicula sem. Ut pretium leo eget nisi cursus viverra. Ut ultrices porta nibh, sed laoreet felis condimentum sit amet. Aliquam a felis nec urna dignissim placerat sed sit amet elit. Donec elementum sagittis purus, facilisis convallis urna dapibus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vel placerat metus. In efficitur enim eget lacinia ultrices. Duis ultricies dignissim nisi, id ultricies nulla venenatis vitae.</p>
</div>
<img src="https://i.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
<div class="body" style="">
<p>Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc. <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg" width="100"> Sed eu dapibus nulla. In ut libero sit amet elit elementum gravida. Suspendisse quis quam consequat, pretium felis vel, laoreet turpis. Proin fringilla lobortis magna. Duis quam sapien, sodales nec accumsan id, ullamcorper eget tellus. Aliquam vitae orci cursus, porttitor ligula ut, fringilla odio. Donec a lorem ac eros interdum varius ultricies quis nulla.</p>
</div>
<p contenteditable="true">Nunc in elit tincidunt, ultrices massa sed, ultricies elit. In nec accumsan metus. Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada.</p>
<div style="display:none">
<p>Curabitur sed hendrerit massa, vitae porta enim.</p>
</div>
<div><div><span>hey</span><div id="an-id">
Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada. Nulla sed nisi vel nulla aliquam blandit. Nam vel tellus ut libero ultrices volutpat. Curabitur blandit quis arcu rutrum ullamcorper. Cras et pharetra augue, eget eleifend sem.
<img src="https://socialnewsdaily.com/wp-content/uploads/2018/08/Webp.net-resizeimage-27.jpg">
</div></div></div>
<p>
Mauris accumsan condimentum porttitor. Quisque tellus justo, suscipit sit amet posuere in, scelerisque nec orci. Aenean iaculis nisi in porta viverra. Sed eget ultricies nibh. Donec accumsan laoreet interdum. Donec risus mauris, dapibus et pulvinar at, posuere non nisi. Mauris at viverra nunc. Ut laoreet suscipit erat et cursus. Aenean id lacus volutpat lectus condimentum posuere. Nam ut lectus elit. Morbi sagittis elementum libero. Donec congue dolor sed tristique efficitur.
</p>
<p>
<div>
<p>Sed elementum velit sapien, et tristique justo bibendum at. Aliquam tincidunt magna nec nisi congue varius. Etiam dolor eros, rhoncus quis purus a, tempus malesuada quam. Sed bibendum condimentum eros vitae varius. Donec fermentum magna vel tellus tempus, nec finibus neque fermentum. Mauris tempus nisl sit amet lacus fermentum, at egestas urna egestas.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ultrices lectus vitae nisl congue, sed porta dolor luctus. Donec aliquet at sapien sit amet tincidunt. Mauris vestibulum consectetur augue at imperdiet.</p>
</div>
</p>
</div>
I would like to automatically break my columns into regular sections after the columns reach a maximum height, as in the image above.
I have not found any property that controls the layout of CSS columns in this way. CSS regions look promising but have very poor browser support.
Computing the height of content with JavaScript and then inserting wrappers for each column block is probably possible, but not ideal. The content is dynamic and may change at any time, meaning the function must be run on every change. In addition the content may be very complex with sub elements that need to traverse section breaks, so naively inserting wrappers for each section will likely break the layout.
How can I automatically set section breaks for columnar content after a maximum height? (I am not married to the idea of CSS columns; perhaps a creative use of flex or inline-block will give the result I need).

There's actually a pretty simple solution using CSS columns. And the column-span attribute.
You can achieve all of this WITHOUT injecting anything into the content and simply styling HTML tags.
Basically, the CSS Columns Layout Module is intended to replicate print design layouts (like a newspaper) where the stylistic rule is that headlines should cross all columns of a story. Therefore any element with column-span: all will separate columns and cause the wrapping to reset. (notice the colors in my example show the wrap).
In this case, since you don't control the content its best to provide a common structure to your users. For example, I'd set H1, H2, H3 tags as well as <hr> and maybe some images to break columns. Allow your users to implement these tags as they normally would in writing and you'll achieve a nice layout. However, if they decide NOT to implement any of that stuff, that's up to them and you should let it wrap and cause a long scroll. (I might also suggest providing a preview so they can see what the result will look like)
Example of column-span
.columns {
margin: 30px;
columns: 2;
}
h1, h2, h3, h4, h5 {
column-span: all;
}
// simply to show where things wrap
h2 {
background-color: #eee;
padding: 5px 10px;
}
h5 {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
text-align: center;
}
p:nth-of-type(1) {
color: blue;
}
p:nth-of-type(2) {
color: green;
}
p:nth-of-type(3) {
color: orange;
}
p:nth-of-type(4) {
color: teal;
}
<div class="columns">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis tellus non nunc tincidunt, vitae rutrum metus dapibus. Fusce at ante massa. Nam et nibh aliquet, porta nibh quis, rhoncus tortor. Aenean vestibulum neque sed urna lacinia aliquet.
Vestibulum facilisis egestas commodo. Cras sed maximus odio. Mauris posuere, ante id posuere facilisis, ligula libero consectetur lacus, at pellentesque nibh elit at magna. Proin sollicitudin quis nibh at viverra. Duis feugiat, lorem vitae facilisis
blandit, augue tortor cursus orci, sed porttitor eros elit at sapien. Quisque eleifend pulvinar pellentesque.
</p>
<h2>This is a header (h2) with column-span: all set on it</h2>
<p>
Donec blandit sapien leo, id aliquam purus vulputate a. Sed vel turpis ut eros suscipit blandit vel id eros. Nullam ut mauris luctus magna sollicitudin venenatis. Pellentesque leo mauris, malesuada nec purus ut, vestibulum malesuada lectus. Nullam ultricies
tellus sapien, ut fermentum risus pretium a. Nullam magna urna, ullamcorper non congue a, efficitur nec orci. Ut aliquam molestie nisi. In at accumsan purus. Etiam non tempor ipsum. Maecenas gravida mauris in nibh vehicula ullamcorper. Sed libero lorem,
faucibus eu lorem ut, gravida eleifend enim. Nunc vehicula fermentum consequat. Phasellus a pellentesque nisl. Nulla vel suscipit nibh, ac cursus dui. Suspendisse elementum dapibus risus. Nam egestas congue finibus.
</p>
<p>
Nunc vel risus nec nulla dignissim congue. Cras sit amet lacus nec nisl mollis pellentesque in vel purus. Suspendisse efficitur mollis nibh, congue facilisis libero auctor ac. Nulla facilisi. Etiam ut erat eget erat egestas suscipit. Curabitur vitae varius
mauris. Sed accumsan diam eros, id dapibus metus rutrum at. Nunc vitae pretium massa. Aenean quis mauris leo. Nulla egestas ligula eu libero interdum feugiat. Aliquam maximus erat et tortor auctor varius. Nulla in pharetra leo, vel suscipit nunc. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec egestas ante, vitae sollicitudin arcu. Pellentesque posuere tempus nibh, nec tempus eros pellentesque ac.
</p>
<p>
Curabitur tempus massa dolor, nec congue purus efficitur id. Phasellus a dictum mauris. In porta nulla lectus, pretium semper erat semper id. Fusce ornare fringilla mi, ut auctor tortor semper non. Aliquam sed felis fermentum, molestie dolor vel, eleifend
diam. Donec accumsan bibendum mi, sed pretium tortor pulvinar nec. Aliquam et metus accumsan, pretium neque eu, elementum ipsum. Nam dapibus risus sed velit viverra, non consequat nibh pretium. Morbi nec gravida turpis. Quisque convallis justo ut rhoncus
porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<h5>This is a header (h5) with column-span: all set on it</h5>
<p>
Proin fringilla, sapien molestie mattis commodo, leo ligula viverra massa, eget semper leo purus sit amet est. Quisque eu diam interdum, pretium dui sed, dictum sem. Sed cursus eu est in ultrices. Suspendisse eleifend imperdiet lectus eu consectetur.
Duis semper libero nec magna commodo, sollicitudin pharetra magna luctus. Fusce pellentesque sollicitudin dolor, eu scelerisque elit condimentum vel. Curabitur id condimentum nisi, eu rhoncus arcu. Proin metus purus, condimentum nec semper vitae, blandit
at leo. Proin commodo et ipsum ac euismod. Aliquam erat volutpat. Nam neque nisi, ornare sit amet metus ac, faucibus tempor nulla. Quisque tristique malesuada finibus. Praesent fermentum posuere urna, a blandit risus sollicitudin nec.
</p>
</div>

Using 'break-inside: avoid;' each paragraph
In the solution I attached, I gave each DIV a break-avoid class to avoid breaking in the middle of the paragraph.
Like you asked, if the paragraph is not over yet you can scroll down. I added a gray color that you can see in the paragraphs.
You can control when it will break and you can also insert a div into a div if you want it in sequence.
Hope the solution is effective for you.
.columns {
columns: 5 250px;
}
.columns * {
max-width: 100%;
}
.break-avoid{
break-inside: avoid;
background-color: #ccc;
}
<div class="columns">
<div class="introduction break-avoid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere dictum tincidunt. Cras in lectus eget libero suscipit venenatis at sit amet dolor. Donec tempor cursus justo, volutpat sodales dolor tempor eu.</p>
<p class="a-class">Pellentesque nec tempor sapien, sed vehicula sem. Ut pretium leo eget nisi cursus viverra. Ut ultrices porta nibh, sed laoreet felis condimentum sit amet. Aliquam a felis nec urna dignissim placerat sed sit amet elit. Donec elementum sagittis purus, facilisis convallis urna dapibus eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vel placerat metus. In efficitur enim eget lacinia ultrices. Duis ultricies dignissim nisi, id ultricies nulla venenatis vitae.</p>
</div>
<img src="https://i.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
<div class="body break-avoid" style="">
<div>
<p>Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc.Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc.Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc.Suspendisse quis ante ullamcorper, lobortis orci ut, vestibulum dolor. Aenean sit amet purus commodo, sagittis leo vel, consequat nisi. Vestibulum sit amet sem vitae sapien pulvinar finibus. Ut sapien purus, luctus condimentum iaculis quis, lobortis at elit. Cras nulla ante, scelerisque ut aliquet in, elementum vel turpis. Vestibulum ipsum magna, congue sit amet sodales vel, aliquam vel nunc. <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg" width="100"> Sed eu dapibus nulla. In ut libero sit amet elit elementum gravida. Suspendisse quis quam consequat, pretium felis vel, laoreet turpis. Proin fringilla lobortis magna. Duis quam sapien, sodales nec accumsan id, ullamcorper eget tellus. Aliquam vitae orci cursus, porttitor ligula ut, fringilla odio. Donec a lorem ac eros interdum varius ultricies quis nulla.</p>
</div>
</div>
<p class="break-avoid" contenteditable="true">Nunc in elit tincidunt, ultrices massa sed, ultricies elit. In nec accumsan metus. Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada.</p>
<div style="display:none;" class="break-avoid">
<p>Curabitur sed hendrerit massa, vitae porta enim.</p>
</div>
<div class="break-avoid"><div><span>hey</span><div id="an-id">
Nullam ultricies eget tortor ut malesuada. Fusce in elit sit amet dolor bibendum malesuada. Nulla sed nisi vel nulla aliquam blandit. Nam vel tellus ut libero ultrices volutpat. Curabitur blandit quis arcu rutrum ullamcorper. Cras et pharetra augue, eget eleifend sem.
<img src="https://socialnewsdaily.com/wp-content/uploads/2018/08/Webp.net-resizeimage-27.jpg">
</div></div></div>
<div class="break-avoid">
<p>
Mauris accumsan condimentum porttitor. Quisque tellus justo, suscipit sit amet posuere in, scelerisque nec orci. Aenean iaculis nisi in porta viverra. Sed eget ultricies nibh. Donec accumsan laoreet interdum. Donec risus mauris, dapibus et pulvinar at, posuere non nisi. Mauris at viverra nunc. Ut laoreet suscipit erat et cursus. Aenean id lacus volutpat lectus condimentum posuere. Nam ut lectus elit. Morbi sagittis elementum libero. Donec congue dolor sed tristique efficitur.
</p>
</div>
<div class="break-avoid">
<p>Sed elementum velit sapien, et tristique justo bibendum at. Aliquam tincidunt magna nec nisi congue varius. Etiam dolor eros, rhoncus quis purus a, tempus malesuada quam. Sed bibendum condimentum eros vitae varius. Donec fermentum magna vel tellus tempus, nec finibus neque fermentum. Mauris tempus nisl sit amet lacus fermentum, at egestas urna egestas.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse ultrices lectus vitae nisl congue, sed porta dolor luctus. Donec aliquet at sapien sit amet tincidunt. Mauris vestibulum consectetur augue at imperdiet.</p>
</div>
</div>

Use Trianglify for site background?

I am trying to set my site background with Trianglify. The site I am trying to use it with is here. It doesn't have any scrolling. None of the examples work for me (they all place the generated image below the rest of the content, not as the background). I also tried the suggestion in issue #58 but that didn't work at all. Any help would be much appreciated. Thanks.

You could just change the position of your element that contains the background with CSS. I hope this answer to you question.
canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae purus quis dolor lacinia gravida. Ut sit amet purus vel tellus faucibus posuere. Pellentesque ut sapien quis elit luctus tincidunt. Etiam eros nisl, semper sit amet malesuada et, aliquet id arcu. Quisque leo ipsum, ullamcorper nec urna ac, maximus finibus tortor. Curabitur non justo condimentum, consectetur diam sed, lobortis lorem. Nulla scelerisque hendrerit nunc, eu aliquam est pretium vel. Maecenas risus mi, ultrices eget mollis sed, consectetur id eros. Donec ac mauris mattis, tincidunt lacus sit amet, congue lacus. Vivamus sed nulla sit amet dolor porttitor dictum. Cras quis mi massa. Quisque lobortis consequat ante sit amet blandit. In dictum iaculis elementum. Maecenas quis congue eros. Phasellus aliquam, libero ut fermentum accumsan, quam sem egestas elit, vel posuere purus dui id mauris. Praesent vel risus ac felis dapibus finibus in nec enim.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.1.0/trianglify.min.js"></script>
<script>
var pattern = Trianglify({
width: window.innerWidth,
height: window.innerHeight,
cell_size: 30 + Math.random() * 100,
x_colors: 'random',
y_colors: 'match_x',
stroke_width: 3
});
document.body.appendChild(pattern.canvas())
</script>
edit: First expand snippet, then run code.
edit2: Forgot left: 0.

Dynamic layout width with CSS float

I am making a page where the page is segregated into two sections, left (70% width) and right (30%). Both the columns have dynamic content in them coming from the database.
What I want is that when the content in the right section finishes the left section should take all the width i.e 100%. 70% its own width and 30% freed by the right section. Here is the pictorial representation of what I want:
How to achieve this using only two divs? i.e left div and right div with percentages.
One might propose that I should Use three divs. One 70%, on the left, 30% on the right and 100% below both the divs but that is not what I want because of the dynamic contents of the divs. I want when the content of the right div is finished the left div should take 100% of the space then. The content on the right div can be 2 lines or 100 lines, that is purely dynamic.
Here is my current HTML structure:
<div class='main'>
<div class='left'></div>
<div class='right'></div>
</div>
Here is my CSS:
<style>
.main { width: 100%; }
.left { float: left; width: 70%; }
.right { float: left; width: 30%; }
</style>
But this is not working, with this code the content on left side stays inside 70% after content on right side is finished. Any suggestions?

Use the float first approach. Move the <div class='right'> above the left div in the mockup, actually, you won't need the left div if you want.
.right {
float: right;
width: 30%;
height: 100px;
background: yellow;
}
<div class='main'>
<div class='right'>right</div>
<div class='left'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
<p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>
</div>
Example without the left div, the result is the same as above.
.right {
float: right;
width: 30%;
height: 100px;
background: yellow;
}
<div class='main'>
<div class='right'>right</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
<p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>

I like to use
display: flex;
http://codepen.io/hesonline/pen/AXRGKd
Click on the header of the right section to remove it.

What's the easiest method to keep div scrollbar at the bottom when the content in div is updated?

The code can already scroll to the bottom after a submission, but the scroll bar does not update when there is a page update.
Here is how I want the scrollbar to behave:
1) The scroll bar starts at the bottom of the div.
2) The scroll bar scrolls to the bottom of the div only if you are at the bottom of the div before the content in the php file is updated.
3) The scroll bar does not scroll to the bottom of the div if you are not at the bottom of the div before an update was made to the content in the php file.
I searched Google and here for a method to get this to work, but what I have found does not work for me in my case.
Here's the code for the div:
<div id="div1" style="position: absolute; width: 70%; height: 80%; overflow-y: auto; right: 0px; top: 0px;" >
<?php include ('content.php'); ?>
</div>
And here's the code for the javascript:
$(document).ready(function() {
$('#msg').ajaxForm({
target: '#message',
success: function() {
$("#msg")[0].reset();
$("#div1").animate({ scrollTop: $("#div1")[0].scrollHeight}, 1000);
$('#message').fadeIn('slow');
}
});
});

To detect that the scroll bar is at the bottom you can use the following
function isScrolledToBottom(el) {
return el.scrollTop == el.scrollHeight - el.clientHeight;
}
Here's an example where
Div starts scrolled down
When content is added, it checks if the div was scrolled all the way down before updating content
If it was scrolled to the bottom, it scrolls it again after updating
var div = document.getElementById('content');
// Set it to go the bottom initially
scrollToBottom(div);
document.querySelector('button').addEventListener('click', function() {
var wasAtBottom = isScrolledToBottom(div);
var scrambledText = div.innerHTML.split('').sort(function() {
return Math.random() - .5
}).join('');
div.appendChild(document.createTextNode(scrambledText));
if (wasAtBottom) {
scrollToBottom(div);
}
});
function isScrolledToBottom(el) {
return el.scrollTop == el.scrollHeight - el.clientHeight;
}
function scrollToBottom(el) {
el.scrollTop = el.scrollHeight - el.clientHeight;
}
#content {
height: 150px;
overflow: scroll;
}
<div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus imperdiet venenatis. Etiam lorem nisi, ullamcorper nec neque non, ultrices elementum lectus. Ut dapibus venenatis quam sit amet imperdiet. Proin scelerisque, nunc vitae ultricies aliquam, diam ligula venenatis purus, id egestas elit turpis sit amet velit. Suspendisse facilisis vel arcu eget hendrerit. Donec non nunc aliquam, finibus ante vitae, venenatis dolor. Suspendisse pulvinar fermentum rhoncus. Proin pulvinar lectus et purus consectetur rutrum. Phasellus rutrum dolor risus, non consectetur erat posuere eget. Etiam viverra congue laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper finibus. Nulla ac vehicula risus. Phasellus nec fermentum quam. Donec blandit ornare ipsum ut dignissim. Etiam nec velit maximus, mollis nibh id, elementum nisi. Donec arcu nisi, sollicitudin sit amet metus sed, aliquet convallis eros. Sed lacus metus, aliquet sed sodales vitae, rutrum sollicitudin dolor. Nunc dictum, mi id egestas luctus, mi erat finibus enim, a imperdiet orci est ac elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Sed dignissim viverra finibus. Ut quis nulla a sapien bibendum sodales at ut nunc. Etiam volutpat ante varius tellus vulputate blandit. Aliquam turpis purus, efficitur vel lacus imperdiet, viverra auctor nisl. Aenean nunc est, tempus nec tincidunt in, malesuada in mauris. Nam dui risus, maximus et placerat in, elementum tristique leo. Fusce quis viverra enim. Curabitur congue fringilla accumsan. Curabitur vehicula aliquet malesuada. Aliquam pharetra ante vel nulla elementum, sit amet auctor mi porttitor. Mauris id varius leo. Vestibulum ac dolor id ligula iaculis aliquam. Donec porta euismod quam, eu sollicitudin nisi interdum egestas. Vestibulum et ligula velit. Nulla vel iaculis purus. Integer et est ut ipsum fringilla rhoncus. Aliquam auctor eu arcu rhoncus maximus. Sed vulputate, ipsum nec tempus sodales, neque leo hendrerit elit, a faucibus nisl ex nec lorem. Praesent varius dictum felis, sed sollicitudin diam tempor vitae. Mauris tempus justo non egestas mollis. Etiam congue odio eget velit vulputate, sit amet pharetra nulla faucibus. Cras a lorem sed ante imperdiet dapibus id blandit risus. Pellentesque nec tincidunt lacus.</div>
<button>Add content</button>

We Keep Coding

JavaScript is the programming language of the Web.