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.
Related
I have implemented a function for changing the size of a div containing text, debounced for x amount of time.
And this is working when reducing the screen size, however, it does not work when expanding the screen back again.
This may be due to property scrollHeight, however I am unsure of a better way of implementing this.
I do not wish to use JQuery, please help.
https://codepen.io/physicsboy/pen/BayoLZX
const box = document.getElementById('box');
const scrl = box.scrollHeight;
box.style.height = `${scrl}px`;
console.log({box});
window.addEventListener('resize', _.debounce(() => {
console.log('debounced');
reset()
}, 500));
function reset() {
console.log('resizing');
const scrlHeight = box.scrollHeight;
console.log(`height: ${box.style.height} - scrollheight: ${scrlHeight}`);
box.style.height = `${scrlHeight}px`;
}
#box {
margin: auto auto;
padding: 20px;
max-width: 500px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non dolor nec risus cursus convallis. Sed tempor libero eu est elementum, id molestie purus cursus. Nunc pulvinar metus non ante tincidunt tempus. Proin metus mi, varius sed purus et, feugiat auctor lectus. Pellentesque elementum dui quis nunc consectetur, vitae iaculis risus laoreet. Fusce velit leo, tristique vitae faucibus eget, sagittis sed libero. Duis eleifend interdum vulputate. Vivamus vehicula commodo leo, quis rhoncus mi pharetra nec. Vivamus elementum sodales arcu nec consectetur. Nullam rhoncus risus metus, id rhoncus lacus vulputate vel. Nam sit amet egestas arcu, et ornare elit. Pellentesque fringilla volutpat urna, vel ullamcorper velit volutpat at. Pellentesque convallis tristique consequat. Etiam at diam vitae urna bibendum maximus. Nulla elementum, ex vitae tempor egestas, sem sapien pulvinar orci, et scelerisque dolor ante at nisi.
Donec in urna sed est tincidunt gravida. Proin ullamcorper sed nunc et scelerisque. Mauris sit amet arcu a odio tincidunt hendrerit. In consectetur justo ipsum, vel posuere erat tincidunt vel. Nullam dignissim ornare nunc, a porttitor felis placerat in. Etiam feugiat sem sit amet tristique congue. Donec ut arcu sit amet mauris volutpat pellentesque a a felis. Quisque purus tellus, placerat in congue nec, lacinia in lectus. Nam eget ante faucibus, facilisis odio id, dignissim lorem. Vivamus porta pharetra velit a cursus. Phasellus ac volutpat ex, nec cursus sem. Pellentesque congue sem consectetur, consectetur justo at, gravida ex. Quisque est nunc, tempus sed massa sed, consequat fringilla nulla.
Phasellus consectetur, velit id suscipit volutpat, mauris mi tempus augue, sit amet dapibus dolor ipsum eget dui. Vestibulum finibus lectus facilisis feugiat accumsan. Duis lectus felis, blandit et massa ut, eleifend sagittis lacus. Pellentesque imperdiet pharetra nisi eget venenatis. Nullam tincidunt leo nec sem lacinia auctor.
</div>
Remove jQuery and height from CSS, Use below code for CSS
#box {
margin: auto auto;
padding: 20px;
max-width: 500px;
background: lightgrey;
}
Hope it will work for you.
You might not need jQuery, just use viewport width unit "VW" .
Try this :
#box {
margin: auto auto;
padding: 20px;
max-width: 500px;
background: lightgrey;
overflow: hidden;
width: 80vw;
height:auto
}
I have two elements, one positioned on the left and one on the right in absolute. I would like the right element, When it will disappear ((Exit the window), that it remains fixed (without using position: fixed).
I would like the value "top" to update but I can not do it and I can not find anything on the internet.
div.container{
position: relative;
}
article{
width: 50%;
margin-top: 50px;
}
aside{
position: absolute;
right: 0;
top: 0;
color: white;
height: 400px;
width: 300px;
background: blue;
}
<div class="container">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dolor elementum, mollis ipsum eget, fermentum odio. Nunc pretium, dui ut posuere tristique, lacus lacus vestibulum dui, eu finibus dui mi quis felis. Sed nibh odio, ultrices vel dui eget, eleifend efficitur leo. Suspendisse dui metus, maximus quis lacus in, condimentum viverra mauris. Nunc finibus dui felis, sed egestas purus posuere et. Aliquam erat volutpat. Quisque luctus, erat vitae fermentum sodales, nisi diam congue augue, nec ultrices magna eros non mi. Nam semper sollicitudin quam, sit amet porta purus tristique vitae. Suspendisse suscipit, ipsum vel mattis pretium, urna erat imperdiet metus, at dictum est metus quis nisl. Duis rhoncus leo sed erat pulvinar, sit amet auctor est placerat. Duis tincidunt velit dolor, quis luctus felis venenatis quis. Sed odio urna, malesuada in mauris sit amet, lobortis hendrerit turpis. In fringilla metus diam, ut malesuada augue elementum ut. Donec id pharetra elit. Maecenas maximus vitae magna nec gravida. Morbi ac pellentesque mi.
Sed tristique fermentum metus in finibus. Sed commodo ultricies justo eu gravida. Nulla facilisi. Vestibulum mattis tortor sem, quis egestas augue tempus at. Curabitur molestie ut dui ac pretium. Donec vehicula enim ut quam ullamcorper sollicitudin. Donec pretium tristique sapien, id maximus nulla fermentum nec. Sed aliquet consectetur nisi, ut finibus erat vestibulum sit amet. Ut suscipit condimentum nisi.
Aenean eleifend tempus aliquam. Maecenas a fringilla arcu. Nunc leo mi, venenatis sit amet libero luctus, vulputate luctus erat. Fusce ex felis, auctor consequat imperdiet quis, finibus vel est. Morbi vitae pretium felis, id vulputate justo. Phasellus nunc enim, vestibulum ac velit in, finibus tincidunt diam. Cras posuere in metus quis volutpat. Cras posuere metus vitae turpis placerat laoreet. Quisque dignissim quam ut nisl euismod viverra. Aenean sed augue sed lectus congue accumsan. Quisque vel pellentesque enim, ut tincidunt tortor. Vestibulum vel ex nec velit facilisis posuere eget a elit. Phasellus non vulputate turpis, vel venenatis odio.
</p>
</article>
<aside>
My Aside
</aside>
</div>
FIDDLE
Thank you very much !
use position: fixed instead of absolute
aside{
position: fixed;
right: 0;
top: 0;
color: white;
height: 400px;
width: 300px;
background: blue;
}
https://jsfiddle.net/puxf496d/1/
I'm not sure I understand your question. You want your aside to stand in place when scrolling, right? I don't know why you want to do it like that, but you can use Javascript to increment the top property of your aside.
An example using JQuery.
$(window).scroll(function(){
var top = $(document).scrollTop();
$('.container aside').css('top',top);
});
In my page, I have a div that will hold a large quantity of text. I would like to use the scroll value for overflow-y property. However, as I would like to style it, the scroll bar does not transform with the radius. Here is the jsfiddle to go along with it:
https://jsfiddle.net/cjbruin/kkve1bas/
and the code:
HTML
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce
aliquam quam sit amet malesuada lacinia.
Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
eleifend eros. Quisque ut ultrices dui. Mauris quis
</div>
CSS
div {
height: 300px;
width: 400px;
border: 2px solid black;
overflow-y: scroll;
border-radius: 7%;
}
Is there anyway to fix this using CSS3? Or will I have to use JS/jQuery to fix it?
Try this one:
.wrapper {
padding: 15px;
border: 2px solid black;
height: 300px;
width: 400px;
border-radius: 7%;
}
.wrapper div {
height: 300px;
width: 400px;
overflow-y: scroll;
padding-right: 10px;
}
<div class="wrapper"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget
turpis nisi. Sed pellentesque urna a fringilla feugiat. Vivamus consequat
vitae risus nec congue. Nulla faucibus hendrerit velit vitae euismod.
Pellentesque efficitur efficitur aliquet. Vivamus ut nunc mi. Fusce
aliquam quam sit amet malesuada lacinia.
Aenean vulputate sagittis porta. Nullam vehicula tellus a erat malesuada gravida.
Vestibulum vulputate eros consectetur ipsum luctus fermentum. Cras consequat
sollicitudin elit, sed tempor nulla gravida ac. Donec in porttitor ipsum. Sed
a nisi nec massa euismod tincidunt sed vitae justo. Phasellus a nunc commodo,
imperdiet nulla vitae, sollicitudin mi. Pellentesque aliquet faucibus sapien et
congue. In vel diam vitae orci interdum sollicitudin. In a tristique libero,
vitae finibus metus. Aliquam porttitor justo sed iaculis cursus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Mauris massa arcu, pellentesque eu libero vitae, volutpat
eleifend eros. Quisque ut ultrices dui. Mauris quis
</div></div>
Use the following CSS (::-webkit-scrollbar-xxx) to style your scroll bar, or apply this "sidebar" class to your div.
.sidebar::-webkit-scrollbar{
width:5px;
background-color:#303949;
}
.sidebar::-webkit-scrollbar-thumb{
background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-thumb:hover{
background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-thumb:active{
background-color:#cccccc;
}
.sidebar::-webkit-scrollbar-track{
border:1px #303949 solid;
-webkit-box-shadow:0 0 5px 303949 inset;
}
I am trying to set vertical scroll bar to the div2 to replace the default browser vertical scroll bar.
.div1 {
height: 200px;
}
.div2 {
overflow-y: auto;
height: 500px;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>
With the above style, document is left with blank space at the bottom since height of div2 is not exactly occupying the entire document height. How do I fix that?
The steps to achieve what you want are:
Set both html's and body's margin and padding to 0.
Set the header's height to the fixed height you want: in your case, 200px.
Set the .main's height to 100% of the viewport less the header height: calc(100vh - 200px).
Set the .main's overflow-y to auto.
Create a section into the .main, and set the margin you want to show your content (optional).
And then, we're done! Take a look at the example below (if you want to test it in a better way, click on the Full Page button, and then play with your window's resizing etc):
html,
body {
overflow: hidden;
padding: 0;
margin: 0;
}
header {
height: 120px;
background-color: blue;
}
div.main {
height: calc(100vh - 120px);
background-color: red;
overflow-y: auto;
}
div.main > section {
margin: 10px;
}
div.main > div > p {
text-align: justify;
}
<header>
</header>
<div class="main">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt enim sit amet diam bibendum, ut rhoncus est molestie. Ut vulputate egestas mauris, eget ultricies tellus aliquet nec. Mauris nec neque et lorem volutpat feugiat eget sit amet
erat. Nullam luctus ultricies augue ut cursus. Mauris pulvinar velit at venenatis semper. Quisque non dolor ante. Nulla tempus id turpis et placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum justo elit, rhoncus vitae
massa non, condimentum ornare quam. Duis sit amet orci a risus mollis gravida et quis augue. Donec sed felis ante. Vestibulum rutrum non dolor quis finibus. Vestibulum ultricies leo eget mi elementum, vel vestibulum felis maximus. Donec congue lorem
vel ante mattis, eu luctus magna finibus. Donec sit amet dui quam.
</p>
<p>
In ullamcorper, nibh eget venenatis imperdiet, augue ante porttitor mauris, nec scelerisque tortor nisi eu arcu. Phasellus libero ligula, eleifend a lobortis in, cursus in tellus. Morbi volutpat, sem a dignissim venenatis, velit nulla vehicula sem, ut
fermentum augue eros sit amet nisi. Vivamus eget ex id turpis scelerisque lobortis sed sed arcu. Nulla facilisi. Curabitur hendrerit iaculis justo, at iaculis est facilisis sit amet. Donec sem tellus, posuere et metus id, consectetur vehicula sapien.
Ut eros quam, tempor vitae quam sed, efficitur faucibus sapien. Mauris varius velit orci, sit amet fermentum neque auctor ac. Nullam pretium sed urna et pellentesque.
</p>
<p>
Nunc id odio ligula. Sed ut dolor vitae sem fringilla condimentum. Sed venenatis lacus a magna egestas, nec volutpat quam ullamcorper. Maecenas volutpat eu magna nec ultrices. In egestas, risus id porta condimentum, odio urna ultricies mi, ut elementum
magna tortor quis eros. Sed a hendrerit felis. Curabitur id sem consectetur, luctus velit in, sollicitudin elit. Proin ac commodo tortor. Proin imperdiet id massa at sollicitudin. Pellentesque enim arcu, venenatis ut dictum et, ornare at tortor.
Donec et urna nec metus rhoncus auctor. Nunc id nisi nec sem condimentum vehicula a in arcu.
</p>
<p>
Proin eleifend sem massa, at auctor eros porta congue. Aliquam nec aliquet justo, at cursus ipsum. Cras justo leo, varius vel accumsan eget, sagittis sit amet lorem. Donec pulvinar ante ut efficitur eleifend. Duis tincidunt metus non nunc accumsan, vel
accumsan velit rhoncus. Nunc arcu magna, sollicitudin non urna in, pellentesque dignissim eros. Nam placerat sodales rutrum. Sed quis placerat leo. Nunc porttitor nisi nunc, in feugiat dolor accumsan nec. Aliquam gravida diam ac tempor sodales.
Ut in sapien gravida odio molestie vehicula sed vel nulla. Integer sed ipsum semper, auctor massa eget, viverra justo. Nullam mattis suscipit lorem vel mattis. Morbi non aliquet nunc. In hac habitasse platea dictumst.
</p>
<p>
Pellentesque dapibus sapien quis congue porta. Maecenas faucibus ex nisi, in varius risus imperdiet ac. Aliquam tristique egestas ligula, sed vestibulum lacus mollis vel. Nunc non ante ut quam placerat suscipit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In a viverra augue, a dignissim justo. Aliquam volutpat nibh ut tellus interdum suscipit. Praesent mi sem, mollis in libero vel, pretium accumsan ex. Nullam gravida diam quis semper faucibus. Nullam cursus felis dolor, sed egestas
ex lobortis et. Vivamus at maximus felis, vel posuere purus. Quisque pellentesque risus nec posuere suscipit. Aliquam eleifend tempus ante, vel vehicula nunc facilisis quis. Mauris lacinia, felis at ultrices luctus, lacus nisl molestie neque, et
varius urna velit at massa. Nulla facilisi.
</p>
</section>
</div>
I'm not absolutely sure what you're trying to do but try adding this to your css and see if it fixes it.
html, body { height: 100%; }
Try this. The border on div1 and div2 is just to show the height of the div. Feel free to remove it ;)
#container {
height: 100%;
position: absolute;
}
.div1 {
height: 200px;
position: relative;
border: 2px solid yellow;
}
.div2 {
overflow-y: auto;
position: relative;
height: 100%;
border: 2px solid red;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>
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.