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.
Related
I'm trying to get the bootstrap affix top offset to work without using the number of pxiels, but by triggering it after it goes past a certain div. I've got the affix to stop being triggered once it gets to the bottom, but I'm having an issue getting it started in the correct place.
Below is my code and here is a JSFiddle. I would like the sidebar to not be triggered until the user goes past the div #content-header and then the sidebar sits on the top right side of the page. However the sidebar currently just sits at the top.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
return $('#content-header').height(true)
},
bottom: function() {
return (this.bottom = $('#footer-wrapper').outerHeight(true))
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper.affix {
top: 30px;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>
Updated:
Removed true from .height(true) so it now triggers after #content-header. However it only works the first time and once you reach the bottom of the page the sidebar seems to jump back up to the top.
Updated JSFiddle here.
If I understand you correctly, remove the true param from the method height. .hight(true) returns the jQuery element itself but not the height.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
var a = $('#content-header').height();
return a;
},
bottom: function() {
var a = $('#footer-wrapper').outerHeight(true);
//console.log(a);
return a;
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper {
padding-top: 30px;
}
#sidebar-wrapper.affix {
top: 0;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>
my html sample div class :
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>
my css :
#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}
Can someone tell me the JS or JQuery for enabling the checkbox when the user has scrolled to the bottom of the T&C page ? I have tried other answers too but none of them worked. The checkbox remains disabled whatever I do.
use below script,
<script>
$( document ).ready( function() {
$('#terms').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#payment').removeAttr('disabled');
}
});
});
</script>
here is runnable demo : https://jsbin.com/cajusebera/edit?html,js,output
Im not a Jquery Expert but just by googling I created this example. I hope it helps!
jQuery(function($) {
$('#terms').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$('#payment').removeAttr("disabled")
}
})
});
#terms {
width: 780px;
height: 150px;
overflow-y: scroll;
border: 2px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>
HTML:
<div id="scrooly" class="span7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
</p>
<img src="assets/img/photo01.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
</p>
</div>
And my all structure:
http://jsfiddle.net/2FcZN/
It's working good but I want, UP and DOWN button on my scrollbar. How can I do this?
You can use the following:
Create 2 buttons:
<button id='upClick'>Go Up</button>
<button id='downClick'>Go Down</button>
jQuery:
var scrolled = 0;
$("#downClick").on("click", function() {
scrolled = scrolled + $("#scrooly").scrollHeight; //Edit <<
$("#scrooly").animate({
scrollTop: scrolled
});
});
$("#upClick").on("click", function() {
scrolled = scrolled - $("#scrooly").scrollHeight; //Edit <<
$("#scrooly").animate({
scrollTop: scrolled
});
});
Updated fiddle: http://jsfiddle.net/2FcZN/3/
I hope this helps!
try setting the bottom with a value set to 24px, as the height of the footer
I have a div like this:
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
</div>
As you can see, my div has a fixed width and the rest of the content is hidden. I would like to show all the content of my div when I hover the cursor on it (In like a bubble or something). Is this possible with plain HTML, or do I have no other choice but to use JavaScript to do this?
Yes, it's possible, if you use hover. You have to move your inline style into a class. See here for an example:
http://jsfiddle.net/buC6t/
.exdiv {
width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.exdiv:hover {
overflow:visible;
}
<div class="exdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
</div>
As a very basic non-CSS non-JavaScript approach you can use tooltip:
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
</div>
Waving mouse over this div will display text in the tooltip. You can also keep initally title blank and populate it in JavaScript with something like
myDivObj.title = myDivObj.innerHTML;
If you want to have bubble, with no js would be duplicated content, but possible:
http://jsfiddle.net/7e4hC/
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</span></div>
.test span {
display: none;
}
.test:hover span {
display: block;
width: 500px;
background-color: #ddd;
overflow: visible;
white-space: normal;
}
or even cleaner:
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</div>
.test:hover {
display: block;
background-color: #ddd;
overflow: visible;
white-space: normal !important;
}
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.