We Keep Coding

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.

changing the html DOM via javascript not responding

I am changing the background of a div with a function. The following is my html code:
$scope.Background = 'img/seg5en.png';
document.getElementById("Bstyle").style.background = "url("+$scope.Background+") no-repeat center fixed;";
console.log(document.getElementById("Bstyle").style.background);
console.log("url("+$scope.Background+") no-repeat center fixed;");
Originally, $scope.Background is equal to "img/bg.png" which is specified on top of my document.
The first console.log prints that the value of style.background as "img/bg.png".
However, the second console.log prints: url(img/seg5en.png) no-repeat center fixed.
I do not understand why my html page does not update though.

Please change DOM using angularised way
Use ng-style to change style of element from JavaScript.
In angular you can assign value to $scope variable and it can be access to your view.
Here is demo for resolve your issue
function ChangeBackground($scope) {
$scope.Background = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdNIsxlrqB0Bqy-qmamo6tt9fdqqL9p43Bf5oy11xt0UuAa9vAILYjMX7_';
$scope.changeImage = function(){
$scope.Background ='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ2I2AW0JI-scAY0Phe321d1Yi8UHbFhsIk8OXTbpfEfaNf9F4V9lt60rs';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ChangeBackground">
<div ng-style="{'background': 'url(' + Background + ')'}" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor mi non consequat varius. Curabitur libero tellus, placerat in metus nec, porttitor facilisis mi. Vivamus nec mattis felis. Cras mattis in mi sed feugiat. Sed ut hendrerit nisi, at tincidunt nibh. Donec vel malesuada orci. Nunc auctor tortor in mi consectetur gravida. Phasellus eleifend erat lectus, convallis tincidunt nisi euismod et. Donec a ornare eros, et eleifend magna. Phasellus viverra pellentesque metus, in lacinia tortor egestas nec. Suspendisse luctus dolor sit amet nisi interdum, nec commodo orci consectetur. Phasellus pretium vulputate viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<input type="button" value="Change Background" ng-click="changeImage()"/>
</div>

Set height of certain div on click through jquery function in a-tag

I'd like to expand a certain story-div when a button inside the div is clicked.
i.e: An overview of reviews shows only the first few sentences of a review. When a button is clicked the review expands to full height.
<div id="overview">
<div class="story">
<div class="naam">John Doe</div>
<div class="plaats">Washington DC, USA</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at accumsan augue. Curabitur ac tortor felis. Quisque fringilla est at neque congue commodo. Proin metus libero, condimentum sed viverra et, pulvinar eget nisi. Donec viverra arcu ut ante adipiscing laoreet. In non tellus leo. Suspendisse ultrices eros quis odio fermentum id commodo ligula tempus. Nunc tincidunt suscipit dolor, nec tempus quam mattis non. Sed dapibus odio nec nisl ultricies vel commodo dolor sagittis.
</p>
<a class="readMore" href="javascript:openStory();" title="Read more">Read more ›</a>
</div>
<div class="story">
<div class="naam">John Doe</div>
<div class="plaats">Washington DC, USA</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at accumsan augue. Curabitur ac tortor felis. Quisque fringilla est at neque congue commodo. Proin metus libero, condimentum sed viverra et, pulvinar eget nisi. Donec viverra arcu ut ante adipiscing laoreet. In non tellus leo. Suspendisse ultrices eros quis odio fermentum id commodo ligula tempus. Nunc tincidunt suscipit dolor, nec tempus quam mattis non. Sed dapibus odio nec nisl ultricies vel commodo dolor sagittis.
</p>
<a class="readMore" href="javascript:openStory();" title="Read more">Read more ›</a>
</div>
</div>
.story has a fixed height of 120px. I'd like to set its height to 'auto' with the openStory(); function.
function openStory(){
this.parent('.story').css('height','auto');
}
Help is appreciated

$('.readMore').click(function(event) { // Bind click event to all .readMore elements
event.preventDefault(); // Prevent the default click action
$(this) // Refers to the clicked .readMore element
.parent() // Get parent element. Assuming it´s the .story element?
.css('height', 'auto'); // set CSS rule. But why not use a CSS class?
});
..and replace href="javascript:openStory();" with href="#".

Used this in the end to open/close the div:
$('.review .story a.readMore').click(function(){
animatingElement = $(this).parent('.story');
if(animatingElement.hasClass('open')){
animatingElement.removeClass('open');
} else {
animatingElement.addClass('open');
}
});
Until Stefan came up with the toggleClass-function
$('.review .story a.readMore').click(function(){
animatingElement = $(this).parent('.story');
animatingElement.toggleClass('open');
});
That's the way to go.

Multiline Text Truncating

Does anyone know of a clean and easy way to truncate a section of text to two lines. This is what I am trying to truncate (p element):
<blockquote><p>“<?=$test_entry ?>”</p></blockquote><cite><?=$test_name ?></cite>
I have tried various solutions including clamp.js (which doesnt even work properly in the example supplied)
I have tried CSS3 solutions using text-overflow but these only truncate to one line.
All other javascript examples use string length which breaks if the text size changes, if special chars are encoded and under many other conditions.
I am happy to change the markup if necessary I just want to be able to truncate text to fit two lines within a div box and have it end with an elipses (...) or even better with (..."). I thought this would be straightforward but apparantly not.
Can anyone point me to an existing solution or give me a clue where to start with this. Any help much appreciated.

Here you can find an existing solution based on jQuery, which should be working cross browser, in this SO question.

This is a very simple solution to truncate the multiline paragraph and this will also add the ellipsis dots at the end of the last line.
p.truncate_text {
color:red;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>
<p class="truncate_text">This paragraph will truncate into 3 lines Quisque ut purus nunc. Aenean vitae lectus maximus, fermentum justo quis, lobortis neque. Curabitur lacinia in massa in efficitur. Praesent et dolor et ex sodales volutpat vel lobortis ligula. Maecenas convallis luctus tempus. Vivamus non libero nisi. Donec facilisis, odio sed dictum consectetur, eros dolor pellentesque quam, ut ornare est ligula eu ligula. Etiam elementum nibh lectus, quis sodales massa malesuada vitae. Etiam finibus quam eget condimentum rutrum. Donec et velit ipsum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

Use the textarea element to limit text rows!
<textarea rows="2" readonly disabled>Try enameling the ricotta broccolis with aged champaign and rum, warmed. </textarea>
You could then use a pseudo element :after to add an ellipsis or a 'Read more'.
Don't forget the attributes 'readonly' and 'disabled'. Readonly prevents textarea from being interacted with by the user. Disabled prevents any forms in the page from submitting the values.

jQuery.. div reveal/slide?

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.